各种声音构成了我们的生活背景。现在， HTML5 <audio> 元素使 Web 开发人员可以将声音嵌入他们的应用程序。控制的灵活性加上平台其他功能的集成，使多个应用场景得以实现，包括从简单的声音效果到背景音频，再到游戏体验以及更复杂的音频引擎。
本博客文章介绍了一些在 Web 应用程序中使用<audio> 标签的最佳实践，包括来自真实站点的一些有用的技巧。
在您的页面中添加音频元素
第一步是向您的页面中添加音频元素。您可以通过几种方式完成这一步骤，在标记中声明一个 <audio> 标签，在JavaScript 代码中将一个新的音频元素实例化，或者在页面中嵌入音频流：
第一种：
<audio src="audio/sample.mp3" autoplay></audio>
第二种：
var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg")){
audio.src = "audio/sample.mp3";
audio.play();
}
第三种：
<audio src="data:audio/mpeg,ID3%02%00%00%00%00%..." autoplay></audio>
第一种方式使您可以在加载页面时初始化音频组件。第二种方式为您提供了更大的灵活性，并使您可以更好地管理网络流，这是由于它将音频剪辑的加载推迟到应用程序生命周期中的某个特定时间。第三种方式（较少推荐）是将音频文件作为 data-uri 嵌入到页面中，减少向服务器发送请求的次数。
请注意，您可以播放由 JavaScript 生成的音频元素，即使它并未实际添加到DOM 树中（如上面的代码片段）。但在页面中添加音频元素将可以显示默认的控制条。
