Audio Controls in ePub3

[codevise]

Yeah, right. Altough I'd love to open-source it, it is our business not a hobby and it was a lot of work. And still is, as we often have to fix it when Apple releases a new version of iBooks and breaks simple webkit stuff. ;-)
Usually we get an audiobook WAV and a epub from our customers and generate the SMILs and package them with the JS.
Most expenses go to the SMIL part, as you might assume if you have already created some. The packaging and the JS software is a fixed royalty-free rate, its license is bound to the epub.

[AlPe]

Ok, no problem, I completely understand.

Thanks for the info.

[AlPe]

For anyone following this thread: you might be interested in checking the following project out.

It is Dante's Divine Comedy, in three audio eBooks, one for each part of the poem: Hell, Purgatory and Heaven. Each eBook contains both the verses and the audio tracks, read by Prof. Lino Pertile (Harvard University), plus the SMIL files that allow Media Overlays, that is, text-audio sync.

You can download the EPUB 3 files, without DRM, for free here (the page is in English):

http://www.smuuks.it/index.php/en/pr...f-lino-pertile

where you can also see a screengrab and some screenshots.

Some statistics: 14233 verses, 14333 SMIL fragments, 13h of audio, 300+ MB.

[AlPe]

I've just updated the screengrab, showing how the Audio-eBook above is displayed by Readium. You can watch it at:

http://www.smuuks.it/index.php/en/pr...f-lino-pertile

or directly on Youtube: http://youtu.be/NVSe0Ce2iZg

[AlPe]

Alright, frustrated by the lack of support of Media Overlays in flowable EPUB 3 ebooks in iBooks, I wrote my own JS to emulate MO support on Apple's app.

I will release the JS soon with a complete example, I just need some time to polish the code a bit and add some init options.

Features (all at user's will) include:
1) autostart
2) assign CSS class to both active and paused SMIL element (possibly different, see the video)
3) a tap (or $n taps, with $n decided by the user) outside text fragments will pause/resume MO rendition or stop it and clear highlight

You can get the flavour from this video (apologies for the shaky hand): http://www.albertopettarin.it/misc/ttp.mp4

[AlPe]

If someone is interested, I have just released the JS previously mentioned, here:

https://github.com/pettarin/rb_smil_emulator

At the same time, I have updated the Audio-eBook "The Curious Case of Benjamin Button", adding this JS-enabled tap-to-play:

http://www.smuuks.it/index.php/en/pr...enjamin-button

Comments are welcome.

[mzmm]

Originally Posted by AlPe

If someone is interested, I have just released the JS previously mentioned, here:

https://github.com/pettarin/rb_smil_emulator

At the same time, I have updated the Audio-eBook "The Curious Case of Benjamin Button", adding this JS-enabled tap-to-play:

http://www.smuuks.it/index.php/en/pr...enjamin-button

Comments are welcome.

+1 for readium support

[AlPe]

For those who are still interested: I have updated the JS script, still available under the MIT License from my GitHub repo: https://github.com/pettarin/rb_smil_emulator

Now it also works in iBooks for both iOS and OS X.

Note also that now Readium ships a complete support for Media Overlays (and a nearly complete UI/UX), so the default behavior of my JS script is to abort if Readium is detected.

Several (111 !) complete EPUB 3 Audio-eBooks, containing this JS, can be found here: http://www.readbeyond.it/shortstories.html

[Jesver]

Originally Posted by josephmwheeler

Is there a way to hide the audio controls in ePub3? That is to say, I would like to click on the word and hear the audio rather than the control button. I have looked high and low and tested more times than I want to remember.

Thanks in advance.

Joe

Hi Joe,

have you try Js?
If not, pls check the below coding:

<script type="text/javascript">

function audplay() {
var video = document.getElementById("audio1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "audio playing";
} else {
video.pause();
button.textContent = "pause";
}
}

function restart() {
var video = document.getElementById("audio1");
video.currentTime = 0;
}

function skip(value) {
var video = document.getElementById("audio1");
video.currentTime += value;
}
</script>

</style>


</head>
<body>
<audio id="audio1" >
<source src="mpthreetest.mp3" type="audio/mp3" />

HTML5 Video is required for this example.
</audio>



<div id="buttonbar">

<a id="play" onclick="audplay()">start play</a>

</div>