如何在各种浏览器中解决HTML中的非播放音频

Question

我在各种浏览器中播放以下mp3，有时它会播放，有时它不会播放。特别是现在它不再在Chrome中播放了，但它在Firefox中播放：

http://langcomplab.net/Most_Precious_Possession_Master.mp3

以下是代码：

The second auditory story is titled, “The Most Precious Possession.” Press the “Play Story” button to begin listening to the story; after you have finished listening to the story, you will answer a set of questions about the story.
<div>
<audio id="audio3" src="http://langcomplab.net/Most_Precious_Possession_Master.mp3" style="width:50%">Canvas not supported</audio>
</div>

<p>&nbsp;</p>

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

这是javascript：

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your Javascript Below This Line*/
    var aud = document.getElementById('audio3');
    this.questionclick = function(event,element){
        if((element.type == "button") && (element.name == "play"))
        {
            aud.play();
        }
    }


});

所以我不确定是什么修复。我正在使用Qualtrics创建音频调查。

更新： 虽然我将代码更改为以下内容，但并不表示浏览器不支持此格式。我不确定我错过了什么。这是一个截图：

<audio controls="">&lt; id=&quot;audio3&quot; src=&quot;http://langcomplab.net/Honey_Gatherers_Master.mp3&quot; style=&quot;width:50%&quot; type=&quot;audio/mpeg&quot;&gt;Your browser does not support this audio format.</audio>

Answer 1

你可以使用它：

<div>
<audio controls>
  <source src="http://langcomplab.net/Most_Precious_Possession_Master.mp3"type="audio/mpeg">
  Your browser does not support this audio format.
</audio>
</div>

它应该适用于任何现代浏览器（需要HTML5）。希望有所帮助。

修改：要使其与按钮一起使用，而不显示HTML5控件，您可以使用：

The second auditory story is titled...
<div>
<audio controls id="reader" style="display:none">
  <source src="http://langcomplab.net/Most_Precious_Possession_Master.mp3"type="audio/mpeg">
  Your browser does not support this audio format.
</audio>
</div>
<input id="Play Story" type="button" value="Play Story" onclick="document.getElementById('reader').play();" />