如何解决各种浏览器中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();" />