L'audio HTML5 non verrà riprodotto una seconda volta in Firefox

Question

Sto lavorando a un'app Web in cui ho bisogno di riprodurre un file audio di parole e frasi. Sto usando il backbone per recuperare e rendere il contenuto dal server. I file audio vivono su S3. Quando il rendering viene eseguito, riproduco il file audio della parola, quindi eseguo la frase del file audio. Ho anche un pulsante per ciascuno in modo che l'audio della parola e della frase possa essere riprodotto.

Il mio problema è che Firefox non riprodurrà i file audio dopo la riproduzione iniziale. Quando vengono chiamati playWord e playSentence, non accade nulla. Le parole in codice vanno bene in Safari e Chrome.

events: { 
    "click a#play-sentence":  "playSentence", 
    "click a#play-word":   "playWord" 
    }, 


    // render markup when model has synced with server 
    render: function() { 
    this.$el.html(this.template({ exam: this.model })); 
    this.cacheMedia(); 

    return this; 
    }, 


    // save audio objects. play word then sentence 
    cacheMedia: function() { 
    this.audioWord = this.$el.find('#audioWord').get(0); 
    this.audioSentence = this.$el.find('#audioSentence').get(0); 

    this.audioWord.addEventListener('ended', function(){ 
     this.currentTime = 0; 
    }, false); 

    this.audioSentence.addEventListener('ended', function(){ 
     this.currentTime = 0; 
    }, false); 

    var view = this; 
    var playSentence = function() { 
     view.audioSentence.play(); 
     view.audioWord.removeEventListener('ended', playSentence); 
    }; 

    this.audioWord.addEventListener('ended', playSentence); 
    this.audioWord.play(); 
    }, 


    // play sentence audio 
    playSentence: function(e) { 
    e.preventDefault(); 

    this.audioWord.pause(); 
    this.audioWord.currentTime = 0; 

    this.audioSentence.play(); 
    }, 


    // play word audio 
    playWord: function(e) { 
    e.preventDefault(); 

    this.audioSentence.pause(); 
    this.audioSentence.currentTime = 0; 

    this.audioWord.play(); 
    } 

Answer 1

Tutto quello che dovrebbe essere necessario fare è chiamare .load() in entrambi i casi, vale a dire playWord() deve solo bisogno this.audioWord.load(); e playSentence() dovrebbe solo bisogno this.audioSentence.load();.