音频 audio
用法
1.单标签型
<audio id="audio" src="./音乐.mp3"></audio>
2.多类型资源
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
3.脚本化
var audio = document.getElementById('audio');
var audio = new Audio('./laojie.mp3');
var audio = document.createElement('video');
兼容性
这里写图片描述
IE8一下不兼容
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto metadata none |
规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | URL | 规定音频文件的 URL。 |
- preload属性介绍
- auto浏览器应当加载它认为适当的内容简单来说就是, 浏览器根据网络情况自动加载
- metadata元数据, 类似时长,比特率等信息, 而不是媒体文件
- none不需要加载
HTML DOM Audio 对象
controls/loop/preload/autoplay属性
- audio.loop = 'loop';
- audio.controls = true;
- audio.preload = 'auto';
- audio.autoplay = true;
Audio 对象方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音频添加新的文本轨道。 |
| canPlayType() | 检查浏览器是否能够播放指定的音频类型。 |
| fastSeek() | 在音频播放器中指定播放时间。 |
| getStartDate() | 返回新的 Date 对象，表示当前时间线偏移量。 |
| load() | 重新加载音频元素。 |
| play() | 开始播放音频。 |
| pause() | 暂停当前播放的音频。 |
对象事件
- play 开始播放触发
- pause 暂停触发
- loadedmetadata 浏览器获取完媒体的元数据触发
- loaddeddata 浏览器已经加载完当前帧数据，准备播放时触发
- ended 当前播放结束后触发
视频video
poster (video 独有)
当视频不可用时，使用一张图片替代，否则是空白
<video src="成都.mp4" poster="封面.jpg" controls></video>
其他属性几乎同audio
