h5中的audio音频标签与对应的dom对象

HTML5中提供了一个<audio>标签，同时也提供了一个Audio对象给JavaScript去操作，这个对象属于HTML的DOM对象。

H5中的<audio>标签

此标签是HTML5的新标签（双标签），用于定义声音，比如音乐或其他音频流。

实例

<audio src="someaudio.wav">
    <span>你的浏览器不支持audio标签，傻瓜。</span>
</audio>

同时此标签提供<source>子标签（单标签）来链接不同的音频文件。

<audio controls="controls">
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
    <span>你的浏览器不支持audio标签，呆子。</span>
</audio>

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用属性autoplay属性，则忽略该属性。
src	url	要播放的音频的URL。

此标签支持HTML中的全局属性与事件属性。

浏览器支持与兼容性提示

Internet Explorer 9+、Firefox、Opera、Chrome以及Safari浏览器支持此标签。

Internet Explorer 8以及更早的版本不支持此标签。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

另外，可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。比如在上面的实例中，不支持这个标签的浏览器就会显示<span>标签中的文本内容。

H5中的HTML DOM Audio对象

Audio对象是HTML5中的新对象，表示HTML中的<audio>标签元素。

访问Audio对象

可以用getElementsByTag()方法。

var audio = document.getElementsByTag(audio")[0];

也可以用getElementById()方法。

var audio = document.getElementById("myAudio");

创建Audio对象

可以用createElement方法。

var audio = document.createElement("audio");

也可以用new Audio()方法。

var audio = new Audio();

Audio对象的属性

属性	描述
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	设置或返回音频的preload属性的值。
readyState	返回音频当前的就绪状态。
seekable	返回表示音频可寻址部分的TimeRanges对象。
seeking	返回用户当前是否正在音频中进行查找。
src	设置或返回音频的src属性的值。
textTracks	返回表示可用文本轨道的TextTrackList对象。
volume	设置或返回音频的音量，默认为1，即最大音量。

Audio对象的方法

方法	描述
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的Date对象，表示当前时间线偏移量。
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。

Audio对象支持标准的属性和事件。

Audo对象的事件监听

还可以给Audio对象添加一些状态改变的监听事件。

audio.addEventListener('timeupdate', function() { // 播放时间变化就会触发
    // 做点坏事
});
audio.addEventListener('ended', function() { // 播放结束就会触发
    // 做点好事
});

 

"生活很难，你一定要哄着自己过完。"