View Single Post
Old 06-22-2018, 11:22 PM   #2
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 11,462
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by soparch View Post
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
May I ask, where is it that the authors think this is going to be played? What vendor? Other than KoboBooks, I mean?

Hitch
Hitch is offline   Reply With Quote