equivalents to ibooks fixed layout audio read-aloud buttons

[soparch]

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

[Hitch]

Originally Posted by soparch

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

[soparch]

I think the authors also want to sell it on their website so it can be viewed using other apps apart from ibooks

[Hitch]

Originally Posted by soparch

I think the authors also want to sell it on their website so it can be viewed using other apps apart from ibooks

Well...that's all well and good, but without knowing which "other apps" they're talking about, nobody can help you. In terms of physical devices, only iBooks has a viable read-along functionality, which, IIRC, is emulated in KoboBooks, in the higher-end devices. Nooks don't do this, nor do Kindles, Sony, et al.

So, by "other apps" do they mean, say, Readium, or Aazardi? Or...? Readalong functionality isn't some built-in thing, that works everywhere. It's device and app-specific, and you have to know what type of scripting is available to you, in order to write code that will work.

Speaking bluntly, this sounds like a case for client education. And with all due respect, you don't seem to be up to speed on the world of eReaders, either, if you're even entertaining this idea from them, or haven't already explained to them that they went through all this, paid all this, for "readalong" functionality that pretty much only exists in a single place.

Hitch

[dwig]

Originally Posted by soparch

... I have sorted it in ibooks with their -ibooks-media-overlay-enabled overlays but I cannot seem to manage it for other epub readers. ...

Ah, there's the rub...

As an addenda to Hitch's excellent response, it should be noted that iBooks is not a true ePub reader. While it can read standard ePub books, it is primarily built around Apple's proprietary extension to the ePub spec.

It's not a matter of making things work is "other ePub readers", but instead it is a matter of emulating iBooks' proprietary functions in standard ePub books, something that is not always possible.