View Full Version : Audio Controls in ePub3


josephmwheeler
06-27-2012, 02:53 AM
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

mrmikel
06-27-2012, 08:45 AM
You might ask in the Apple section, if you haven't already.

AlPe
10-02-2012, 10:38 AM
I am wondering about the same issue, as I am working on a pet project involving an audio eBook.

Specifically, I would like to customize the audio player control bar (not necessarily on iBooks --- for example Readium or Calibre ebook-viewer now support the audio element as per EPUB 3 specs). The EPUB 3 specs do not seem to provide much meat, nor the "official" samples do.

The support is --- surprise, surprise --- spotty. When I change chapter in ebook-viewer, the audio track that has started playing stops. On iBooks, on the other hand, this does not happen. So, if I need to listen to a different track (from, say, Chapter 2), I need to go back and stop the track associated with the previous chapter (say, Chapter 1).

Does anyone have good pointers to solve/document these issues? Thanks in advance.

mzmm
10-03-2012, 03:34 PM
I would like to click on the word and hear the audio rather than the control button.

seems like you're able to override the default controls using the epub:trigger element in epub3, and bind controls to whatever html you'd want, although i haven't had a chance to test it out yet. the sample html provided on idpf looks like this:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<epub:trigger ev:observer="pause" ev:event="click" action="pause" ref="test"/>
<epub:trigger ev:observer="resume" ev:event="click" action="resume" ref="test"/>
<epub:trigger ev:observer="mute" ev:event="click" action="mute" ref="test"/>
<epub:trigger ev:observer="mute" ev:event="click" action="show" ref="muted"/>
<epub:trigger ev:observer="unmute" ev:event="click" action="unmute" ref="test"/>
<epub:trigger ev:observer="unmute" ev:event="click" action="hide" ref="muted"/>
</head>
<body>
<video id="test" src="birds.mp4" width="320" height="240"/>
<p>
<span class="button" id="resume">Play/Resume</span>
<span class="button" id="pause">Pause</span>
<span class="button" id="mute">Mute</span>
<span class="button" id="unmute">Unmute</span>
<span id="muted">MUTED</span>
</p>
</body>
</html>

and you can read more here about :trigger :

http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml-epub-trigger

mzmm
10-03-2012, 04:45 PM
I am wondering about the same issue, as I am working on a pet project involving an audio eBook.

Specifically, I would like to customize the audio player control bar (not necessarily on iBooks --- for example Readium or Calibre ebook-viewer now support the audio element as per EPUB 3 specs). The EPUB 3 specs do not seem to provide much meat, nor the "official" samples do.

The support is --- surprise, surprise --- spotty. When I change chapter in ebook-viewer, the audio track that has started playing stops. On iBooks, on the other hand, this does not happen. So, if I need to listen to a different track (from, say, Chapter 2), I need to go back and stop the track associated with the previous chapter (say, Chapter 1).

Does anyone have good pointers to solve/document these issues? Thanks in advance.

i'm kind of unclear on what it is you're trying to do, but it sounds like you might be attempting to use the <audio> element to create a media-overlay(?)

as i understand the specs, an audio clip should be included using the html5 audio element, but an ambient soundtrack or narration should be done with a media overlay. i think that playback controls for media-overlays are provided by the e-readers, though.

AlPe
10-03-2012, 05:57 PM
Hi,

thank you for the interesting pointers. They all look promising.

Just to clarify my request: I do not want to create a media-overlay, because I am working with several different audio clips whose reproduction should be left on the user's will.

I was just asking if it was possible to "tweak" the <audio> tag in order to have it displayed in the same way on every reading software (a way to achieve this might exploit the epub:trigger, I will give it a try tomorrow) and whether it is possible to automatically stop an ongoing audio clip if the user exits the chapter it belongs to.

Thank you again for your suggestions!

AlPe
10-04-2012, 03:52 PM
For anyone interested: download cc-shared-culture-20120130.epub from http://code.google.com/p/epub-samples/downloads/list

The epub:trigger is a good way to define the play/pause/mute/unmute controls.

However, still no idea about "confining" an audio element to play only when the XHTML page is actually rendered, and to stop it when the XHTML page is changed. (For example, from my test, iBooks seems to stop the audio when you go back, but not when you go forward)

Also, SMIL does not seem suitable for what I want.

ms82
10-25-2012, 05:17 AM
For anyone interested: download cc-shared-culture-20120130.epub from http://code.google.com/p/epub-samples/downloads/list

The epub:trigger is a good way to define the play/pause/mute/unmute controls.

However, still no idea about "confining" an audio element to play only when the XHTML page is actually rendered, and to stop it when the XHTML page is changed. (For example, from my test, iBooks seems to stop the audio when you go back, but not when you go forward)

Also, SMIL does not seem suitable for what I want.

Has anyone tried this epub:trigger? I downloaded this cc-shared-culture-20120130.epub and epub:trigger seems to be not supported (I used calibre, FBReader, and epubReader in Firefox). I tried also to write some example using instructions from http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml-epub-trigger but also without a success (no actions are triggered when I click on the Play/Pause/... 'buttons').

If you managed to have this working could you please say on which reader you launch it? And one more thing, namely is there a need to have some JavaScipt for this (as it was in case of ops:trigger)?

AlPe
10-25-2012, 05:30 AM
Also, SMIL does not seem suitable for what I want.

Correction: SMIL is the right way to go, as, per spec, it provides a way of "limiting" the reproduction of an audio clip to a certain portion of text.

Some caveats:

1) iBooks does not support it (not even iBooks 3) and ADE neither
2) AZARDI offers some minimal support to SMIL
3) Readium offers support for SMIL, but --- to date --- the "stable" version (0.5.3 9/29/2012) has problems with internal links and SMIL. They have already been solved in the sources, so you might want to get the source code via git, and load it into Chrome as "unpacked extension".

So, for the moment, for my needs (iBooks, unfortunately), I will simply embed the audio file, add an <audio> tag, but I will not add SMIL yet.

I hope SMIL will gain traction soon.

AlPe
10-25-2012, 05:38 AM
Has anyone tried this epub:trigger? I downloaded this cc-shared-culture-20120130.epub and epub:trigger seems to be not supported (I used calibre, FBReader, and epubReader in Firefox). I tried also to write some example using instructions from http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml-epub-trigger but also without a success (no actions are triggered when I click on the Play/Pause/... 'buttons').


I do not remember exactly, but I made some code (modifying cc-shared-culture) working on iBooks 2. I will check my notes when I get back home. All other readers failed.


If you managed to have this working could you please say on which reader you launch it? And one more thing, namely is there a need to have some JavaScipt for this (as it was in case of ops:trigger)?

AFAIK, not even Readium supports it. Check the support spreadsheet here: http://www.bisg.org/what-we-do-12-152-epub-30-support-grid.php

AlPe
10-25-2012, 04:27 PM
I confirm that epub:trigger works in iBooks 3 (I think it was working in iBooks 2 as well), at least for pause/play/mute/unmute, without JS, just load the xml-events namespace. See cc-shared-culture demo.

mzmm
10-26-2012, 03:08 PM
I confirm that epub:trigger works in iBooks 3 (I think it was working in iBooks 2 as well), at least for pause/play/mute/unmute, without JS, just load the xml-events namespace. See cc-shared-culture demo.

hey great to hear - thanks for uploading.


1) iBooks does not support [smil] (not even iBooks 3) ...


smil actually is supported in iBooks. this is how they're creating their Read Aloud function, although i don't think i've ever seen it implemented in a flowing book. perhaps they only have support for it for their fixed-layouts?

AlPe
10-26-2012, 03:12 PM
hey great to hear - thanks for uploading.

You're welcome.



smil actually is supported in iBooks. this is how they're creating their Read Aloud function, although i don't think i've ever seen it implemented in a flowing book. perhaps they only have support for it for their fixed-layouts?

Exactly. Media Overlays not supported in reflowable rendition. Hence, it is not (fully) supported. Put in other words, SMIL works only in fixed layout. Which is a pity, in my opinion.

codevise
10-28-2012, 02:43 PM
We at Codevise (http://codevise.de) implemented a polyfill for media overlays with reflowable content in iBooks>1.3. Basically, it parses the smil and provides menus to control the audio.
As this is nice and works for more than a year in production (full books; splitted on a per sentence basis), we'd love to see apple providing the "read-aloud" gui in non-fixed layout epubs too.

AlPe
10-28-2012, 04:20 PM
Hi, thanks for the lead.

I was thinking of doing that as well (NOT from scratch, maybe from the Readium sources, of course)*, maybe at the bare minimum required for my pet project (http://www.smuuks.it/index.php/en/projects/divina-commedia). I assume you cannot make the JS public, as it is a "proprietary" tool, right?

(The funny thing is that I have all the 100 SMIL files, and they work well in Readium and AZARDI, but not in iBooks, since my ebook is reflowable... shame on Apple)

EDIT: added ()*

codevise
10-29-2012, 10:13 PM
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
10-30-2012, 04:04 AM
Ok, no problem, I completely understand.

Thanks for the info.

AlPe
11-28-2012, 05:47 PM
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/projects/divine-comedy-read-prof-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
02-26-2013, 09:18 AM
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/projects/divine-comedy-read-prof-lino-pertile

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

AlPe
05-20-2013, 07:44 PM
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
06-11-2013, 06:51 AM
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/projects/the-curious-case-of-benjamin-button

Comments are welcome.

mzmm
06-11-2013, 07:17 PM
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/projects/the-curious-case-of-benjamin-button

Comments are welcome.

+1 for readium support

AlPe
05-30-2014, 01:19 PM
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: https://readbeyond.it/shortstories.html

Jesver
06-03-2014, 08:09 AM
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>