Javascript 为什么音频有时在同一浏览器中播放，有时不在同一浏览器中播放？_Javascript_Html_Audio_Browser_Hosting

Javascript 为什么音频有时在同一浏览器中播放，有时不在同一浏览器中播放？

javascript html audio browser

Javascript 为什么音频有时在同一浏览器中播放，有时不在同一浏览器中播放？,javascript,html,audio,browser,hosting,Javascript,Html,Audio,Browser,Hosting,我有下面的代码，我不确定出了什么问题。我们拥有音频文件的远程主机有问题吗？在Chrome中，有时播放，有时不播放，当它不播放时，它不会说我的浏览器不支持音频格式 <audio controls id="audio" style="display:none"> <source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" type="audio/mpeg" /> Your browser do

我有下面的代码，我不确定出了什么问题。我们拥有音频文件的远程主机有问题吗？在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>


更新：这真的很奇怪。在源代码部分，我添加了
</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>

标记Qualtrics中的块，但当我使用富上下文编辑器编写代码时，标记会消失。有什么解决办法吗？
接下来的两个故事将是在观众席上呈现的两个故事。请按&ldquo；游戏故事&rdquo；现在按下按钮，听一个听觉故事示例。请务必调整您正在收听的设备的音量，以便您能够清晰地听到听觉故事

您的浏览器没有'；我不支持这种音频格式。
剧本




注意：我是否在onload
部分使用了正确的功能？
在我看来，在页面加载之后，您需要执行代码。例如（更新）

您的浏览器不支持此音频格式。
玩
函数loadAudio（）{
var button=document.getElementById（'button'）；
var audio=document.getElementById（'audio'）；
var onClick=function（）{
audio.play（）；//音频将加载然后播放
};
addEventListener（'click'，onClick，false）；
}

我认为你的代码有时能工作而其他代码不能工作的原因是，目前它取决于DOM加载的速度——javascript可以在音频标记完全加载到页面之前执行。
我正在刷新它，但似乎没有遇到你在chromeI上的问题。我真的不知道问题的根源是什么。一个小时前它对我不起作用，现在它起作用了。我不知道如何重新生成问题。你的按钮在我的iPad上不起作用（音频文件加载速度似乎很慢，并且在0:00时卡住）Ps:display:none在iOSDerek上不起作用我们尚未为移动系统设计。我们只专注于桌面。不过，非常感谢您的评论。我会记住这一点。附言：iPad上没有显示器的替代品吗？这不仅取决于DOM加载的速度，还取决于音效加载的速度。如果在调用play（）时MP3已加载，则它可以播放，但不能播放尚未加载的音效。但是，您的解决方案是有效的。等待音效加载后再播放谢谢。我现在就试试@mdsomerfield你能看一下更新的问题吗？我在Qualtrics（我正在创建调查的地方）尝试了你的解决方案，但没有成功。@Mona Jalal我已经更新了示例以澄清我的意思。恐怕我对Qualtrics不太熟悉，所以我不能提供太多的指导。@tomysshadow这不完全准确，至少对最新的Firefox和Chrome版本不准确-只要加载了DOM元素，play（）就会对音频进行排队，以便音频一下载就开始播放。如果它已经下载，它将立即播放，如果没有，它将在下载完成后开始播放。
<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>