在iBooks中翻页时，Javascript会间歇性地触发

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 ie 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.

Answer 1

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...