触摸iPad / iPhone设备上的HTML5音频会停止

Question

In order to get an HTML5 animation playing with sound on an idevice, I've made a div the size of the entire browser named "theScreen", and use the following code:

audioCont.prototype.iCrapLoadPlayThrough = function () { 
    if (this.supported) {
        theScreen = document.getElementById("theScreen");
        var self = this;
        theScreen.addEventListener('touchstart', function(){self.iCrapClickedLoadPlayThrough();}, false);
        return(1);
    } else {
        return(0); // Not supported
    }
};
audioCont.prototype.iCrapClickedLoadPlayThrough = function () { // Check if supported, then load the audio file
    var self = this;
    theScreen.removeEventListener('touchstart', function(){self.iCrapClickedLoadPlayThrough();}, false);
    this.addCanPlayThrough();
    this.load();
}

Now this works, and the sound/animation starts when the user taps on the screen. The problem is, if they tap on it again the sound stops, and each repeat tap you hear a few ms of audio. Does anyone know why?

Answer 1

It's not removing the event listener because it's an anonymous function. Remove the anonymous function and just have the function name instead

 theScreen.addEventListener('touchstart',self.iCrapClickedLoadPlayThrough,false)
 theScreen.removeEventListener('touchstart',self.iCrapClickedLoadPlayThrough,true)

Answer 2

I've found a solution to the problem:

theScreen.addEventListener('touchstart', eventID=function() {self.iCrapClickedLoadPlayThrough();}, false);

then

theScreen.removeEventListener('touchstart', eventID, false);