Question

这是我的代码：

HTML：

<div id="audio-files" style="display: none;">
    <audio id="click-sound">
        <source src="/assets/click.mp3" type="audio/mpeg">
        <source src="/assets/click.wav" type="audio/wav">
    </audio>
</div>

JavaScript的：

play: function() {
  var audio = $('#audio-files').find('audio#click-sound');
  if (audio.length) {
    audio[0].play();
  }
}

期望的行为：
当我调用play（）时，声音应播放一次。在页面加载时，服务器应该只有1个请求。多次调用play（）不应该触发多个请求。

实际行为：
- Firefox（19.0.2），Chrome（26.0.1410.43）和Opera（12.15）按预期工作 - Safari（6.0.3）只播放一次所需的声音，然后在被要求时拒绝播放或发出任何其他声音。

我尝试在audio[0].load()之前添加audio[0].play()，但这会导致浏览器每次要求播放音频时都会发出请求，这是非常不受欢迎的。

小提琴：http://jsfiddle.net/Tpvfm/

Answer 1

我认为您的示例mp3文件存在问题。我刚从你的小提琴中删除了它（mp3），它可以在OSX上的Safari中使用。

<div id="audio-files" style="display: none;">
  <audio id="click-sound">
    <source src="/assets/click.wav" type="audio/wav">
  </audio>
</div>

小提琴：73GCX

在Safari中多次播放HTML5音频时出现问题

1 个答案: