I am trying to add some play and pause buttons for audio to a fixed layout book (without extra javascript files). I have sorted it in ibooks with their -ibooks-media-overlay-enabled overlays but I cannot seem to manage it for other epub readers. I managed to get the "Play" button to work but this then disabled the highlighting of the text.
So ideally I would like it to work exactly as per ibooks i.e. the text highlights in time with the audio book and the reader can stop and start the text by clicking on the buttons on the page. (I know most devices have their own versions but the authors want some buttons on the page)
This is what I have at the moment - if someone could please help me I would be extremely grateful.
CSS file
.-epub-media-overlay-active { color:red; }
.buttons-rw { position: absolute; top: 1180px; left: 580px; font-size: 40px; font-family: "Times New Roman"; }
button.play { color: white; background: green; border: 4px solid black; left: 0; padding: 10px; border-radius: 60px 0 0 60px; -webkit-border-radius: 60px 0 0 60px; }
button.stop { color: white; background: red; border: 4px solid black; top: 0px; left: 65px; padding: 10px; border-radius: 0px 60px 60px 0px; -webkit-border-radius: 0px 60px 60px 0px; }
page
<audio id="page1.mp3" src="../Audio/page1.mp3"></audio>
<div class="buttons-rw"><button class="play" type="button" value="Play" onclick="document.getElementById('page1.mp3').play ()">Play</button><button class="stop" type="button" value="Stop" onclick="document.getElementById('xMorocco_Sting.m p3').pause()">Stop</button></div>
Thanks in advance
Soparch