HTML5 中的 <audio> 元素用于在网页中嵌入音频内容。通过 <audio> 元素,我们可以轻松地在网页中播放音频文件,如音乐、音效等。
属性
- autoplay: 指定音频是否在加载后立即播放。
- controls: 显示音频播放控件,如播放/暂停按钮、音量控制等。
- loop: 指定音频是否应该循环播放。
- muted: 静音音频。
- preload: 指定音频应该在页面加载时进行加载。
- src: 指定要播放的音频文件的 URL。
方法
- play(): 开始播放音频。
- pause(): 暂停音频播放。
- load(): 重新加载音频。
事件
- onplay: 当音频开始播放时触发。
- onpause: 当音频暂停时触发。
- onended: 当音频播放结束时触发。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- ---------------------------- ------------------
----- --------------- ---------------------------- -------------------
------------ --------------
-------
------
------ ---------
------- --------------- ------------------
---- ------- ---- --- ------- --- ----- --------
--------
-------
-------在上面的示例代码中,我们创建了一个简单的音频播放器,用户可以通过控件来控制音频的播放、暂停和音量。当浏览器不支持 <audio> 元素时,会显示 "Your browser does not support the audio element."。
| 属性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象 |
| autoplay | 设置或返回是否在加载完成后随即播放音频 |
| buffered | 返回表示音频已缓冲部分的 TimeRanges 对象 |
| controller | 返回表示音频当前媒体控制器的 MediaController 对象 |
| controls | 设置或返回音频是否显示控件(比如播放/暂停等) |
| crossOrigin | 设置或返回音频的 CORS 设置 |
| currentSrc | 回当前音频的 URL |
| currentTime | 设置或返回音频中的当前播放位置(以秒计) |
| defaultMuted | 设置或返回音频默认是否静音 |
| defaultPlaybackRate | 设置或返回音频的默认播放速度 |
| duration | 返回当前音频的长度(以秒计) |
| ended | 返回音频的播放是否已结束 |
| error | 返回表示音频错误状态的 MediaError 对象 |
| loop | 设置或返回音频是否应在结束时重新播放 |
| mediaGroup | 设置或返回音频所属的组合(用于连接多个音频元素) |
| muted | 设置或返回音频是否静音 |
| networkState | 返回音频的当前网络状态 |
| paused | 设置或返回音频是否暂停 |
| playbackRate | 设置或返回音频播放的速度 |
| played | 返回表示音频已播放部分的 TimeRanges 对象 |
| preload | 设置或返回音频是否应该在页面加载后进行加载 |
| readyState | 返回音频当前的就绪状态 |
| seekable | 返回表示音频可寻址部分的 TimeRanges 对象 |
| seeking | 返回用户是否正在音频中进行查找 |
| src | 设置或返回音频元素的当前来源 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
| volume | 设置或返回音频的音量 |
| 方法 | 描述 |
|---|---|
| addTextTrack() | 在音频中添加一个新的文本轨道 |
| canPlayType() | 检查浏览器是否可以播放指定的音频类型 |
| fastSeek() | 在音频播放器中指定播放时间。 |
| getStartDate() | 返回一个新的Date对象,表示当前时间轴偏移量 |
| load() | 重新加载音频元素 |
| play() | 开始播放音频 |
| pause() | 暂停当前播放的音频 |