Question

为什么在html中插入了音频的代码，网页上打开却要刷新一次后才能播放？

为什么在html中插入了音频的代码<audio src="Two Steps From Hell - For The Win.mp3" autoplay="autoplay" loop="loop"></audio>，网页上第一次打开的时候无法自动播放，需要刷新一次后才能播放？

• 你的回答被采纳后将获得：
• 系统奖励15（财富值+成长值）+难题奖励20（财富值+成长值）+提问者悬赏20（财富值+成长值）

Answer 1

html5的audio标签只支持三种格式，但没有一种格式在各个浏览器里通用，你可以对照一下下图，你应该是在火狐和Opera的浏览器里听不到声音。

针对这种情况，我们需要做三种格式的文件：

<audio autoplay="autoplay" loop="loop">

<source src=”Two Steps From Hell - For The Win.ogg” />
<source src=”Two Steps From Hell - For The Win.mp3″ />
<source src=”Two Steps From Hell - For The Win.wav” />

</audio>

虽然我们设置了autoplay，但是在ios10以上的微信端以及在sarafi里不能够自动播放，需要手动操作。但如果想自动播放的话，在网页端需要兼听touchstart事件：

<audio id="voice" autoplay="autoplay" loop="loop">
<source src=”Two Steps From Hell - For The Win.ogg” /><source src=”Two Steps From Hell - For The Win.mp3″ /><source src=”Two Steps From Hell - For The Win.wav” />
</audio>

var voice = document.getElementById('voice');
var voiceStatu = true;
//监听 touchstart 事件进而调用 <audio> 元素提供的 play() 方法播放音频
document.addEventListener("touchstart", function(e) {
            if (voiceStatu) {
                voice.play();
                voiceStatu = false;
            }
}, false);

具体自己去调试一下，不会再追问