一、HTML5 音频简介
HTML5 引入了 <audio> 元素，用于在网页中播放音频文件。这使得音频的嵌入变得更加简单和标准化。在 HTML5 之前，大多数音频是通过插件（如 Flash）来播放的，但这种方式存在兼容性问题，因为并非所有浏览器都支持相同的插件。HTML5 的 <audio> 元素为音频播放提供了一种标准方法。
二、浏览器支持情况
-
Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 都支持
<audio>元素。 -
注意：Internet Explorer 8 及更早版本不支持
<audio>元素。
三、基本用法
1. 基本语法
在 HTML5 中嵌入音频的基本语法如下：
HTML复制
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>预览
-
<audio>元素提供了播放、暂停和音量控件来控制音频。 -
<audio>标签之间插入的内容是为不支持<audio>元素的浏览器提供的备用内容。 -
<audio>元素允许使用多个<source>元素，<source>元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
2. 支持的音频格式
目前，<audio> 元素支持三种音频格式：
-
MP3：MIME 类型为
audio/mpeg。 -
Wav：MIME 类型为
audio/wav。 -
Ogg：MIME 类型为
audio/ogg。
不同浏览器对这些格式的支持情况如下表所示：
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
四、使用 DOM 控制音频
<audio> 元素支持多种方法、属性和事件，可以通过 JavaScript 进行控制。例如：
-
方法：
play()、pause()等，用于控制音频的播放和暂停。 -
属性：
paused、currentTime等，可以读取或设置音频的状态和播放时间。 -
事件：
play、pause等，可以监听音频的播放和暂停事件。
示例代码
以下是一个简单的示例，展示如何使用 JavaScript 控制 <audio> 元素：
HTML复制
<audio id="myAudio" controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button><script>function playAudio() {document.getElementById("myAudio").play();}function pauseAudio() {document.getElementById("myAudio").pause();}
</script>预览
五、相关标签
1. <source> 标签
<source> 标签用于定义多种媒体资源，例如 <audio> 和 <video>。它可以链接不同的音频文件，浏览器将使用第一个可识别的格式。
2. <track> 标签
<track> 标签用于定义在媒体播放器中的文本轨迹，例如字幕、章节等。虽然 <track> 标签主要用于视频，但它也可以用于音频，例如提供音频的歌词或章节信息。
)
)
