HTML5 音频不会在 Firefox 中再次播放答案

【问题标题】：HTML5 audio will not play a second time in FirefoxHTML5 音频不会在 Firefox 中再次播放
【发布时间】：2015-03-05 21:53:45
【问题描述】：

我正在开发一个需要播放单词和句子音频文件的网络应用程序。我正在使用主干从服务器获取和呈现内容。音频文件位于 S3 上。渲染内容时，我播放单词音频文件，然后播放句子音频文件。我还为每个按钮设置了一个按钮，以便可以重播单词和句子的音频。

我的问题是 Firefox 在初始播放后不会重播音频文件。当playWord 和playSentence 被调用时，什么也没有发生。在 Safari 和 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();
  }

【问题讨论】：

您是否尝试过在播放之前重新加载音频文件，例如 this.audioWord.load() 然后 this.audioWord.play() ？
我在一年前做的一个项目中遇到了一些浏览器的问题。正如@RoumelisGeorge 所建议的那样，为了让它们都能正常工作，我最终不得不重新加载音频源，然后再次播放。
SoundJS 库在 FireFox 中多次播放声音而不重新加载没有问题。支持 HTML 音频和 WebAudio。 createjs.com/#!/Demos/SoundJS/Audio-Test-Suite（仅点击顶部的 HTML 音频，默认为网络音频）
可能是stackoverflow.com/questions/11004437/…的副本
感谢您的回复。我正在使用带有过期 url 的 AWS S3，所以 .load() 有效，但前提是用户在下载 url 仍然有效的情况下点击多次播放。每次播放后的.load() 不是一个很好的解决方案，但我们还没有任何用户抱怨。

标签： javascript html firefox audio

【解决方案1】：

您只需要在这两种情况下都调用.load()，即playWord() 只需要this.audioWord.load();，playSentence() 只需要this.audioSentence.load()；。

【讨论】：