HTML5 audio will not play a second time in Firefox

Question

I am working on a web application where I need to play a sound file of a word and sentence. I use the backbone to fetch and render content from the server. Audio files live on S3. When the content is displayed, I play the word audio file and then the sentence audio file. I also have a button for each so that the sound of the word and sentence can be played.

My problem is that Firefox will not play audio files after the initial game. When playWord and playSentence , nothing happens. Codewords are great in Safari and 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

All you have to do is call .load() in both cases, i.e. playWord() should only need this.audioWord.load(); , and playSentence() should only this.audioSentence.load()