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

Posted 2023-02-24

【中文标题】在 Safari 中多次播放 HTML5 音频时出现问题

【英文标题】：Problems playing HTML5 audio multiple times in Safari

【发布时间】：2013-04-08 08:53:27

【问题描述】：

这是我的代码：

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].play() 之前添加audio[0].load() 但这会导致浏览器每次被要求播放音频时都会发出请求，这是完全不可取的。

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

【问题讨论】：

Safari 有一些有趣的音频问题。我注意到的一件事是，如果在没有用户输入的情况下以编程方式触发音频将不会启动。从本质上讲，如果您的声音在没有用户点击或做某事的情况下被触发，Safari 很可能会拒绝播放它。 audio[i].play() 是如何被调用的？

在示例 jsfiddle 中，它是通过用户单击调用的。不过，在我们的代码中，它是通过编程触发的……您有关于该主题的文档/文章的链接吗？

【参考方案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

【讨论】：

嗯...这很奇怪。你是对的，当我只留下 wav 源时，它工作正常。但为什么？ Mp3 格式作为源，Safari 应该支持。顺便说一句，我在生产环境中使用了不同的文件，这个文件只是我在互联网上随机找到的。然而，这个问题和我们的 2 个生产 .mp3 文件都重现了这个问题。请给一个合理的解释，我会给你你的奖励。谢谢！

@GeorgeAcev 您缺少 Content-Range 标头。见Apple Developer 和html5-audio-safari-live-broadcast-vs-not