HTML 5 音频

音频格式
当前，audio 元素支持三种音频格式：

audio标签的使用 
audio标签含有src、preload、autoplay、loop、controls等几个属性， 以及一个内部使用的标签。
audio标签内除了可以包含标签外，还可以包含当指定的音频文件都不能播放时，返回的内容。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：
实例

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
实例

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

标签的属性

(1)autoplay属性

设置为自动播放的 audio 元素：

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

(2)controls属性

带有浏览器默认控件的 audio 元素：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

定义和用法

controls 属性规定浏览器应该为音频提供播放控件。

如果设置了该属性，则规定不存在作者设置的脚本控件。

浏览器控件应该包括：

• 播放
• 暂停
• 定位
• 音量
• 全屏切换
• 字幕（如果可用）
• 音轨（如果可用）

谷歌浏览器显示结果：

(3)loop属性

设置为循环播放的 audio 元素：

<audio controls="controls" loop="loop">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

(4)preload属性

设置为预加载的 audio 元素：属性有三个值auto ,meta,noe。如果不使用此属性，默认为auto。

<audio controls="controls" preload="auto">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

auto - 当页面加载后载入整个音频

meta - 当页面加载后只载入元数据

none -  当页面加载后不载入音频

定义和用法

preload 属性规定是否在页面加载后载入音频。

如果设置了 autoplay 属性，则忽略该属性。

audio标签的属性,方法和事件汇总 

获得对象

//audio可以直接通过new创建对象
var Media = new Audio("horse.mp3");
//audio和video都可以也可以通过标签获取对象
var Media = document.getElementById("media");

//错误状态
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

//网络状态
Media.currentSrc; //返回当前资源的URL
Media.src = value; //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源
Media.load(); //重新加载src指定的资源
Media.buffered; //返回已缓冲区域，TimeRanges
Media.preload; //none:不预载 metadata:预载资源信息 auto:

//准备状态
Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //是否正在seeking

//回放状态
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay;  //是否自动播放
Media.loop;  //是否循环播放
Media.play();    //播放
Media.pause();   //暂停

//控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音

事件：

事件	描述
canplay	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
canplaythrough	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
durationchange	当媒介长度改变时运行脚本
emptied	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
ended	当媒介已抵达结尾时运行脚本
error	当在元素加载期间发生错误时运行脚本
onloadeddata	当加载媒介数据时运行脚本
loadedmetadata	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
loadstart	当浏览器开始加载媒介数据时运行脚本
pause	当媒介数据暂停时运行脚本
play	当媒介数据将要开始播放时运行脚本
playing	当媒介数据已开始播放时运行脚本
progress	当浏览器正在取媒介数据时运行脚本
ratechange	当媒介数据的播放速率改变时运行脚本
readystatechange	当就绪状态（ready-state）改变时运行脚本
seeked	当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
seeking	当媒介元素的定位属性为真且定位已开始时运行脚本
stalled	当取回媒介数据过程中（延迟）存在错误时运行脚本
suspend	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
timeupdate	当媒介改变其播放位置时运行脚本
volumechange	当媒介改变音量亦或当音量被设置为静音时运行脚本
waiting	当媒介已停止播放但打算继续播放时运行脚本