Javascript firing intermittently when turning page in iBooks

Question

I'm trying to add the ability to play audio in my ebook and for the user to be able to pause and start this if they want.

I can do this in javascript by controlling a standard HTML5 audio tag on a page but when the user turns the page I want the next page to remember the state i.e if the audio is paused or not.

The problem seems to be that when each page turns the javascript sometimes fires and sometimes doesn't. I've tried adding a standard listener

'document.addEventListener("DOMContentLoaded", function(event) { `

in the HEAD but this does not always fire when the page turns. When I try it in Chrome it works perfectly.

Any help would be appreciated

EDIT: here is the code I am trying to run:

document.addEventListener("DOMContentLoaded", function(event) { 
  do work
    if (document.getElementById("audioreadalong") && localStorage.playaudio == "1"){
        if (localStorage.isPaused == "0"){
            document.getElementById("audioreadalong").play();
            if (document.getElementById("play") && document.getElementById("pause")){
                document.getElementById("play").setAttribute("style", "display: none;");
                document.getElementById("pause").setAttribute("style", "display: block;");
            }
        }
        else if (localStorage.isPaused == "1"){
            document.getElementById("audioreadalong").pause();
            if (document.getElementById("play") && document.getElementById("pause")){
                document.getElementById("play").setAttribute("style", "display: block;");
                document.getElementById("pause").setAttribute("style", "display: none;");
            }
        }
    }
    else if(localStorage.playaudio == "0"){
        if (document.getElementById("play") && document.getElementById("pause")){
            document.getElementById("play").setAttribute("style", "display: none;");
            document.getElementById("pause").setAttribute("style", "display: none;");
        }
    }
});

This is referenced in the head of each page I need audio on (the odd numbered, right ones not the even numbered left ones - each double page is 2 separate web pages).

This code does not run every time the page turns. It does in Chrome as each page reloads each time. I can't see anything in the epub3 spec that would explain this.

FINAL EDIT: I can only assume that either a) there is a bug in the way iBooks runs javascript on a page; or b) I have something misconfigured. I have worked a way around my problem by using Apple's built-in support for Read Along Books in their Asset Guide. I've downloaded the sample project from iTunes and am now using SMILs with the iBooks namespace and iBooks.js (found in the sample project). If anyone needs help with this post a question and reference it here.

Thanks to those who tried to help or upvoted this.

What do you mean by page turns ? Is your 2nd page in the same DOM or another web page ? — Rayon, May 03 '15 at 10:23
it's another web page - it is a fixed layout landscape book. — Guy Lowe, May 03 '15 at 12:25

score 0 · Answer 1 · answered May 03 '15 at 17:50

0

You will have to store the current state of the audio in Local Storage like this:

localStorage.setItem("audioState", "true");

And just retrieve value of localstorage using:

localStorage.getItem("audioState");

And implement conditions accordingly...

answered May 03 '15 at 17:50

Rayon

36,219
4
49
76

Thanks Rayon I am doing that at the moment but the problem is that as a page turns the code doesn't get run each time for some reason. – Guy Lowe May 03 '15 at 23:47
Can you provide me any basicstructure of your code ? You need to get the value from localstorage on "DOMContentLoaded" event..Can you tell me what value you get from the localstorage ? – Rayon May 04 '15 at 04:52

Javascript firing intermittently when turning page in iBooks

1 Answers1