使用HTML5可以轻松地将声音和音乐添加到网页中。 实际上，要做的最难的事情就是创建所需的多个源，以确保您的声音文件可以在各种浏览器上播放。
使用HTML5的好处是您可以通过使用几个标签来嵌入声音。 然后，浏览器播放声音，就像使用IMG元素时显示图像一样。
如何将声音添加到HTML5网页
您需要一个HTML编辑器 ，一个声音文件（最好以MP3格式）和一个声音文件转换器。
- 首先，你需要一个声音文件。 最好将该文件记录为MP3（ .mp3 ），因为它具有很高的音质，并且受到大多数浏览器（Android 2.3+，Chrome 6+，IE 9+，iOS 3+和Safari 5+）的支持。
- 将您的文件转换为Vorbis格式（ .ogg ）以添加Firefox 3.6+和Opera 10.5+支持。 您可以使用Vorbis.com上的转换器。 您还可以将MP3转换为WAV文件格式（ .wav ）以获得Firefox和Opera的支持。 为了安全起见，我建议您将文件张贴在所有三种类型中，但最需要的是MP3和另一种类型。
- 将所有音频文件上传到您的网络服务器，并记下您存储它们的目录。将它们放在仅用于音频文件的子目录中是个好主意，就像大多数设计师将图像保存在图像目录中一样。
- 将AUDIO元素添加到您希望显示声音文件控件的HTML文件中。 <音频控制>
- 在AUDIO元素中放置每个上传的音频文件的SOURCE元素：
-
- AUDIO元素内的任何HTML都将用作不支持AUDIO元素的浏览器的后备。 所以添加一些HTML。 最简单的方法是添加HTML以让它们下载文件，但您也可以使用HTML 4.01嵌入方法播放声音。 以下是一个简单的回退：
您的浏览器不支持音频回放，请下载文件：
- 您需要做的最后一件事是关闭您的AUDIO元素：
- 完成后，您的HTML应如下所示：
其他技巧
- 一定要使用HTML5的doctype（），以便您的HTML将被验证
- 查看元素的可用属性，查看可以添加到元素的其他选项。
- 请注意，我们将HTML设置为默认包含控件，并关闭自动播放功能。 当然，您可以改变这种情况，但请记住，许多人会发现自动启动的声音/他们无法控制的烦人的声音，并且通常会在发生此情况时离开页面。