### H5 CORE 03：音频、视频 (`Audio`/`Video`) 的 DOM 操作
#### 一、概述
在HTML5中，`<audio>` 和 `<video>` 标签被广泛用于网页中嵌入多媒体内容。为了更好地控制这些媒体元素，JavaScript 提供了一系列的DOM接口，包括 `HTMLMediaElement`, `HTMLAudioElement` 和 `HTMLVideoElement`。通过这些接口，开发者能够实现诸如播放/暂停、调整音量、更改播放进度等操作。
#### 二、核心概念
**HTMLMediaElement**
- `HTMLMediaElement` 是 `HTMLAudioElement` 和 `HTMLVideoElement` 的父接口，它定义了一些基本属性和方法，这些属性和方法在子接口中被继承。
**HTMLAudioElement**
- 描述 `<audio>` 标签的DOM对象，用于处理音频内容。
- 可以通过 JavaScript 获取并操作 `<audio>` 元素，以实现动态控制音频播放等功能。
**HTMLVideoElement**
- 描述 `<video>` 标签的DOM对象，用于处理视频内容。
- 同样可以通过 JavaScript 获取并操作 `<video>` 元素，以实现动态控制视频播放等功能。
#### 三、创建对象实例
1. **通过 `getElementById` 方法获取**:
```javascript
const audio = document.getElementById('audio');
```
2. **通过 `new Audio()` 构造函数创建**:
```javascript
const audio = new Audio();
```
#### 四、主要属性
1. **`autoplay`**: 控制音频文件是否在加载完毕后自动播放。
2. **`controls`**: 控制是否显示默认的播放器控件，如播放/暂停按钮等。
3. **`currentTime`**: 当前播放时间的位置，单位为秒。
4. **`defaultMuted`**: 设置或返回音频是否默认为静音状态。
5. **`duration`**: 返回音频的总长度，单位为秒。
6. **`ended`**: 返回一个布尔值，指示音频是否已经播放完毕。
7. **`error`**: 返回一个 `MediaError` 对象，用于表示音频加载或播放过程中的错误。
8. **`loop`**: 控制音频文件播放完毕后是否循环播放。
9. **`muted`**: 设置或返回音频是否处于静音状态。
10. **`paused`**: 返回一个布尔值，指示音频是否处于暂停状态。
11. **`playbackRate`**: 设置或返回音频的播放速度。
12. **`readyState`**: 返回一个整数值，表示音频文件的加载状态。
13. **`src`**: 设置或返回音频文件的URL。
14. **`volume`**: 设置或返回音频的音量，范围从0到1。
#### 五、主要方法
1. **`load()`**: 重新加载音频文件。
2. **`play()`**: 开始播放音频文件。
3. **`pause()`**: 暂停当前正在播放的音频文件。
#### 六、事件监听
1. **`addEventListener('ended', function() {})`**: 在音频播放结束后触发。
2. **其他事件**:
- **`onabort`**: 视频/音频终止加载时触发。
- **`oncanplay`**: 用户可以开始播放视频/音频时触发。
- **`onended`**: 视频/音频播放结束时触发。
- **`onerror`**: 视频/音频数据加载期间发生错误时触发。
- **`onloadedmetadata`**: 视频/音频的元数据加载后触发。
- **`onpause`**: 视频/音频暂停时触发。
- **`onplay`**: 视频/音频开始播放时触发。
- **`onratechange`**: 视频/音频的播放速度发送改变时触发。
- **`onseeked`**: 用户重新定位视频/音频的播放位置后触发。
- **`onseeking`**: 用户开始重新定位视频/音频时触发。
- **`onvolumechange`**: 音量发生改变时触发。
#### 七、示例代码
以下是一个简单的示例，展示如何使用 JavaScript 控制音频播放：
```javascript
const audio = document.getElementById('myAudio');
audio.addEventListener('canplay', function() {
console.log('音频已准备好播放');
});
audio.addEventListener('ended', function() {
console.log('音频播放结束');
});
// 播放音频
audio.play();
// 暂停播放
audio.pause();
// 调整音量
audio.volume = 0.5;
// 跳转到指定时间
audio.currentTime = 30;
```
#### 八、总结
通过使用 `HTMLAudioElement` 和 `HTMLVideoElement` 接口，开发者可以轻松地控制网页中的音频和视频内容。掌握这些接口的方法和属性对于开发具有多媒体功能的网站至关重要。同时，利用事件监听机制，还可以实现更复杂的功能，如播放列表管理、进度条显示等。希望本文能帮助你更好地理解 HTML5 中音频和视频的相关操作。
