为什么有时在同一个浏览器中播放音频，有时又不在同一浏览器中播放？答案

【问题标题】：Why the audio plays sometimes and sometimes not within the same browser?为什么有时在同一个浏览器中播放音频，有时又不在同一浏览器中播放？
【发布时间】：2014-07-30 10:12:22
【问题描述】：

我有以下代码，但我不确定出了什么问题。我们拥有音频文件的远程主机有问题吗？在Chrome中，有时播放有时不播放，不播放时，并不是说我的浏览器不支持音频格式。

<audio controls id="audio" style="display:none">
    <source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" type="audio/mpeg" />
    Your browser doesn't support this audio format.
</audio>
<button id="button">Play</button>
<script type="text/javascript">

        // run on page load
    var button = document.getElementById('button');
    var audio = document.getElementById('audio');

    var onClick = function() {
        audio.play(); // audio will load and then play
    };

    button.addEventListener('click', onClick, false);
</script>

http://jsfiddle.net/MfU7h/

更新：这真的很奇怪。在源代码部分我添加了

</html> tag for a block in Qualtrics but when I source my code using rich context editor the tags fade away. Any solution to this? 
<html>
<body onload='Qualtrics.SurveyEngine.addOnload'>
<p>The next two stories will be the two stories presented auditorily. Please press the &ldquo;Play Story&rdquo; button now to hear an example auditory story. Be sure to adjust the volume of the device on which you are listening so that you can hear the auditory story clearly.</p>

<p>&nbsp;</p>

<div>
<audio controls="" id="audio1" style="display:none"><source src="http://langcomplab.net/Test_take2.mp3" style="width:50%" type="audio/mpeg" />Your browser doesn&#39;t support this audio format.</audio>
</div>

<div><button name="play" onclick="disabled=true" style="height:25px; width:200px" type="button">Play Story</button>

<p>&nbsp;</p>
</div>
</body>
</html>

P.S.：我在onload 部分中使用了正确的功能吗？

【问题讨论】：

我正在刷新它，但似乎在 chrome 上没有遇到您的问题
我真的不知道问题的根源是什么。 1 小时前它对我不起作用，现在它正在起作用。我不知道如何重新生成问题。
您的按钮在我的 iPad 上无法使用（音频文件似乎加载非常缓慢，并且在 0:00 时卡住了） Ps：display:none 在 iOS 上无法使用
Derek 我们还没有为移动系统设计。我们只专注于桌面。不过非常感谢你的评论。我会记住这一点。 P.S.：在 iPad 上有没有 display:none 的替代品？

标签： javascript html audio browser hosting

【解决方案1】：

在我看来，您需要在页面加载后执行代码。例如。（更新）

<body onload='loadAudio'>

<audio controls id="audio" style="display:none">
    <source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" type="audio/mpeg" />
    Your browser doesn't support this audio format.
</audio>
<button id="button">Play</button>

<script type="text/javascript">

function loadAudio() {
    var button = document.getElementById('button');
    var audio = document.getElementById('audio');

    var onClick = function() {
        audio.play(); // audio will load and then play
    };

    button.addEventListener('click', onClick, false);
}
</script>
</body>

我认为您的代码有时有效而不是其他代码的原因是因为目前它取决于 DOM 加载的速度 - javascript 可以在音频标签完全加载到页面之前执行。

【讨论】：

不仅取决于 DOM 加载的速度，还取决于音效加载的速度。如果在调用 play() 时 MP3 已加载，则它可以播放，但不能播放尚未加载的音效。但是，您的解决方案有效。等到音效加载完毕再播放
谢谢。我现在就试试！
@mdsomerfield 你能看看更新的问题吗？我在 Qualtrics（我正在创建调查）中尝试了您的解决方案，但没有奏效。
@Mona Jalal 我已经更新了示例以阐明我的意思。恐怕我不熟悉 Qualtrics，所以我无法提供太多指导。
@tomysshadow 这并不完全准确，至少对于最新的 Firefox 和 Chrome 版本来说不是——只要加载了 DOM 元素，那么 play() 就会将音频排队，以便它会立即启动已下载。如果已经下载，则立即播放，如果没有，则在下载完成后开始播放。