自动播放 HTML 音频

在网站中添加音频可以为用户带来更丰富的体验。本文将介绍如何让网页中的音频自动播放。

HTML5 标签

HTML5 中添加音频的标签为 audio。添加一个音频文件的代码如下：

<audio controls>
  <source src="audiofile.mp3" type="audio/mp3">
</audio>

其中，controls 属性可以让用户控制音频的播放、暂停、音量等功能。

自动播放

如果想要让音频自动播放，可以添加 autoplay 属性：

<audio controls autoplay>
  <source src="audiofile.mp3" type="audio/mp3">
</audio>

循环播放

如果希望音频循环播放，可以添加 loop 属性：

<audio controls loop>
  <source src="audiofile.mp3" type="audio/mp3">
</audio>

JavaScript

如果想要更多掌控音频的展现方式，可以使用 JavaScript 控制音频播放、暂停等特性。

播放音频

可以通过 play() 方法播放音频：

var audio = new Audio();
audio.src = "audiofile.mp3";
audio.play();

暂停音频

可以通过 pause() 方法暂停音频：

var audio = new Audio();
audio.src = "audiofile.mp3";
audio.play();

// 5 秒钟后暂停
setTimeout(function() {
  audio.pause();
}, 5000);

循环播放

可以通过 loop 属性实现循环播放：

var audio = new Audio();
audio.src = "audiofile.mp3";
audio.loop = true;
audio.play();

总结

本文介绍了如何在 HTML 中添加音频，并让音频自动播放。同时，也提供了使用 JavaScript 控制音频的方法，实现更具个性化的音频效果。