为什么第一次单击“播放”按钮时音频不启动？答案

【问题标题】：Why does audio not start when 'play' button is first clicked?为什么第一次单击“播放”按钮时音频不启动？
【发布时间】：2014-07-30 15:44:29
【问题描述】：

我在 Firefox 中遇到音频问题。我在<audio> 标签中有一个 .ogg 音频剪辑，当第一次按下播放按钮时，Firefox 没有开始播放该文件。但是，如果按下播放按钮，然后从时间线中选择时间，音频将从选择的时间开始播放。如果反复按下播放按钮（例如播放/暂停/播放），文件也会开始播放。

我还使用网络音频 API 通过 AnalyserNode 运行音频。但是，该问题似乎与分析仪无关，因为可以在不影响此问题的情况下将其删除。这似乎与createMediaElementSource 有关。如果我删除与此相关的 JavaScript 代码，问题就会消失。

音频文件是从同一来源提供的，所以我相当肯定这不是 CORS 问题（如 here 所述）。正如我所说，音频会播放，但前提是在时间线上选择了时间。

我将包含以下问题的最简单示例。这可能需要从 HTTP 服务器（python -m http.server、python -m SimpleHTTPServer 或其他）运行以避免任何 CORS 问题。出于这个原因，我认为我不能在此处包含有关此问题的 JSFiddle 演示。

此问题似乎仅限于 Firefox。它肯定不会影响 Chrome，但我还没有实际测试过任何其他浏览器。

<audio id="audio" controls>
  <source src="piano-sonata-no13.ogg" type="audio/ogg" />
</audio>

<script>
    var audio_node = document.getElementById('audio');
    var audioctx = new (window.AudioContext || window.webkitAudioContext)();
    var analyser = audioctx.createAnalyser();

    window.addEventListener('load', function(e) {
        var source = audioctx.createMediaElementSource(audio_node);
        source.connect(analyser);
        source.connect(audioctx.destination);
    }, false);
</script>

编辑：可以在此处找到此问题的示例：http://mdn.github.io/media-source-buffer/

【问题讨论】：

什么叫play()，它叫什么？
@inorganik 我对音频 API 不是很熟悉，但我认为 audio 标签提供的播放按钮会播放文件。正如我所说，它确实会播放文件，但只有在按下播放然后单击时间线之后。我只是玩了一下，按播放/暂停/播放也会播放文件。我错过了什么吗？
您可以尝试将 currentTime 设置为 0 - audio_node.currentTime = 0 但我认为这可能与 audioctx 或 AudioContext 有关。阅读更多关于他们的文档。

标签： javascript html firefox html5-audio

【解决方案1】：

尝试用这个替换窗口“加载”事件监听器：

audio_node.addEventListener('canplay', function(e) {
    var source = audioctx.createMediaElementSource(audio_node);
    source.connect(analyser);
    source.connect(audioctx.destination);
}, false);

【讨论】：

感谢您的回答。实际上，当我在发布之前进行尽职调查时，我实际上看到您在另一个答案中提出了这个建议。我试过这个，但没有任何效果。除非我真的在这里遗漏了一些明显的东西，否则我开始认为这可能是一个 Firefox 错误。

【解决方案2】：

此问题似乎与 Firefox bug 有关。

它的要点是，似乎createMediaElementSource 目前在 Firefox 中有些损坏，您不能将音频 API 与 createMediaStreamSource 一起使用并使其按预期工作。

我找到了解决方法 here（警告：页面自动播放音频），但据我所知，它仅在 autoplay 设置为 true 时有效。快速测试表明将audio.autoplay 设置为true，并立即调用audio.pause() 可能是解决此问题的可接受的解决方法。此方法的一个缺点是当按下播放按钮时，音频不会从文件的最开头开始。

这个解决方案看起来像这样：

<audio id="audio" controls>
  <source src="piano-sonata-no13.ogg" type="audio/ogg" />
</audio>

<script>
    var audio_node = document.getElementById('audio');
    audio_node.autoplay = true;
    // Alternatively, the autoplay attribute can be set on the <audio> tag
    var audioctx = new (window.AudioContext || window.webkitAudioContext)();
    var analyser = audioctx.createAnalyser();

    window.addEventListener('load', function(e) {
        var source = audioctx.createMediaElementSource(audio_node);
        source.connect(analyser);
        source.connect(audioctx.destination);
        audio_node.pause();
    }, false);
</script>

【讨论】：