html中的audio

audio支持wav、mp3、ogg、acc、webm等格式，每个浏览器因为版权问题支持的格式都不一样

浏览器对audio的支持情况

音频格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支持	支持	支持	不支持	不支持
MP3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支持

没有一种通用的文件格式让每个浏览器都使用单个文件格式意味着至少有 2/5 的浏览器无法播放某些声音。这不是无法在单一音频标准中达成一致的浏览器制造商不妥协的问题，而是涉及专利权和特许权使用费的法律和财务问题。不受软件专利限制的 OGG 格式旨在一劳永逸地解决这个问题。然而，在撰写本文时，Opera 和 Safari 都不支持 OGG。与 OGG 格式的文件相比，可用的 WAV 和 MP3 文件数量要更多，因此毫无疑问，浏览器制造商考虑到了这一点。MP3 作为事实的标准是个很好的解决方案。

解决方案

HTML5 提供了一个解决方案，使您喜欢的浏览器能够找到一种兼容的格式。

与 <audio> 标签结合使用时，<source> 标签可以嵌套在 <audio> 容器内。首先，您需要获得三种文件类型的音乐，即 OGG、MP3 和 WAV。将这些音乐文件与 HTML5 文件放在同一个文件夹内。然后，将每个文件名放在单独的 标签里，并且音频容器中的所有源标签都由 构成，如下所示

<audio controls>
    <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</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	设置或返回音频的音量。

audio的方法

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

audio的监听事件

事件	描述
loadstart	当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时
durationchange	当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。
loadedmetadata	当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。
progress	当浏览器正在下载指定的音频/视频时，会发生 progress 事件。
suspend	该事件在媒体数据被阻止加载时触发。可以是完成加载后触发，或者因为被暂停的原因。
loadeddata	当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件
canplay	当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。
canplaythrough	当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。
play	开始播放时触发
playing	开始回放
timeupdate	播放时间改变 这个会一直打印
pause	暂停时会触发，当播放完一首歌曲时也会触发
ended	当播放完一首歌曲时也会触发
abort	客户端主动终止下载（不是因为错误引起）
error	请求数据时遇到错误
stalled	网速失速
waiting	等待数据，并非错误
seeking	寻找中
seeked	寻找完毕
ratechange	播放速率改变
volumechange	音量改变

// 例
audio.addEventListener("timeupdate", function () { // 播放时间改变   这个会一直打印
    console.log("event timeupdate: ", audio.currentTime);
});