HTML5 音频不会在 Firefox 中第二次播放

HTML5 audio will not play a second time in Firefox

本文关键字:第二次 播放 Firefox 音频 HTML5      更新时间:2023-09-26

我正在开发一个网络应用程序,我需要在其中播放单词和句子音频文件。我正在使用骨干网从服务器获取和呈现内容。音频文件存在于 S3 上。渲染内容时,我播放单词音频文件,然后播放句子音频文件。我还有一个按钮,因此可以重播单词和句子音频。

我的问题是Firefox在初始播放后不会重播音频文件。当调用playWordplaySentence时,什么也没发生。代码字在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();
  }

您需要做的就是在这两种情况下都调用.load(),即 playWord()只需要this.audioWord.load();playSentence()只需要this.audioSentence.load();。