Html5音頻相關(guān)API

<audio>標(biāo)簽定義聲音，比如音樂或其他音頻流。

在HTML5標(biāo)準(zhǔn)網(wǎng)頁里面，我們可以運(yùn)用audio標(biāo)簽來完成我們對聲音的調(diào)用及播放。以下是最經(jīng)常見到的運(yùn)用HTML5三種基本格式：

1.最少的代碼

<audio src="song.ogg" controls="controls"></audio>

2.帶有不兼容提醒的代碼

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

3.盡量兼容瀏覽器的寫法

<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>

HTML5音頻格式

當(dāng)前，HTML5 Audio標(biāo)簽支持三種格式的音頻，分別是wav mp3和ogg格式。而目前主流瀏覽器對他們的支持如下：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

IE8以及IE8以下不支持HTML5的audio標(biāo)簽

HTML 5 Audio屬性

1. autoplay:唯一可選值為autoplay，出現(xiàn)autoplay屬性并準(zhǔn)確賦值時(shí)，音頻將會(huì)自動(dòng)播放
2. controls：唯一可選值為controls，出現(xiàn)controls屬性并準(zhǔn)確賦值時(shí)，音頻播放控件將會(huì)顯示，控件包括：播放、暫停、定位、音量、全屏切換、字幕（如果可用）、音軌（如果可用）。
3. loop：唯一可選值為loop，出現(xiàn)loop屬性并準(zhǔn)確賦值時(shí)，音頻將會(huì)循環(huán)播放。
4. preload：可選值有auto(當(dāng)頁面加載后載入整個(gè)音頻)、meta(當(dāng)頁面加載后只載入元數(shù)據(jù))和none(當(dāng)頁面加載后不載入音頻) 如果設(shè)置了前面的autoplay屬性，那么preload將會(huì)被忽略。
5. src：指定音頻URL地址，可以是相對的URL也可以是絕對的URL 當(dāng)然還可以像第2和第3個(gè)例子一樣，用source標(biāo)簽來指定源。

Audio相關(guān)的API

控制函數(shù)功能說明

• load()   加載音頻、視頻軟件，通常不必調(diào)用，除非是動(dòng)態(tài)生成的元素，用來在播放前預(yù)加載
• play()    加載并播放音頻、視頻文件，除非文件已經(jīng)暫停在其他位置，否則默認(rèn)重頭開始播放
• pause() 暫停處于播放狀態(tài)的音頻、視頻文件

audio 的只讀媒體特性有：

只讀屬性屬性說明

• duration   獲取媒體文件的播放時(shí)長，以s為單位，如果無法獲取，則為NaN
• paused     如果媒體文件被暫停，則返回true，否則返回false
• ended       如果媒體文件播放完畢，則返回true
• startTime  返回起始播放時(shí)間，一般是0.0，除非是緩沖過的媒體文件，并一部分內(nèi)容已經(jīng)不在緩沖區(qū)
• error          在發(fā)生了錯(cuò)誤后返回的錯(cuò)誤代碼
• currentSrc  以字符串形式返回正在播放或已加載的文件，對應(yīng)于瀏覽器在source元素中選擇的文件

audio 可腳本控制的特性值：

• autoplay       自動(dòng)播放已經(jīng)加載的的媒體文件，或查詢是否已設(shè)置為autoplay
• loop              將媒體文件設(shè)置為循環(huán)播放，或查詢是否已設(shè)置為loop
• currentTime 以s為單位返回從開始播放到目前所花的時(shí)間，也可設(shè)置currentTime的值來跳轉(zhuǎn)到特定位置
• controls        顯示或者隱藏用戶控制界面
  
• volume         在0.0到1.0間設(shè)置音量值,或查詢當(dāng)前音量值
• muted           設(shè)置是否靜音
• autobuffer     媒體文件播放前是否進(jìn)行緩沖加載，如果設(shè)置了autoplay，則忽略此特性

 實(shí)例說明：

----------------------------------html----------------------------------

<div class="play-btn">

<i class="icon-pause icon-2x"></i>

</div>

$(function(){

    var playBtn = $('.play-btn');

    var playIco = playBtn.find('i');

    var mediA= $('#media').get(0);

// 說明，這里引用的是dom的api，需要把jquery的對象轉(zhuǎn)化成dom對象才能引用其對應(yīng)的api

    playBtn.click(function(){

    if(mediA.paused) {

    play();

    }else{

    pause();

    }

    })

    function play() {

    mediA.play();

    playIco.addClass('icon-pause').removeClass('icon-play');

    }

    function pause(){

    mediA.pause();

    playIco.addClass('icon-play').removeClass('icon-pause');

    }

    })