1. 前言背景
在HTML5出現之前，Web頁面訪問音視頻主要是通過Flash，Activex插件，還有微軟后來推出的silverlight來展現的，盡管FLASH曾經風靡全球，但是隨着互聯網的不斷發展，進入移動時代以后，Flash的風頭漸漸被HTML5替代，主要原因是Flash經常爆出漏洞，安全性令人擔憂，性能方面較差，對網絡瀏覽和設備的電池也消耗比較大等等，Flash天生就是為PC而生，無法適應移動時代的特點，所以被各大廠商逐漸拋棄，連Adobe自己都已經放棄了Flash。所以HTML5是未來Web多媒體的主要方向。
2. 音頻格式
HTML5 Audio支持的格式有：wav，mp3和ogg格式，首先看看各大瀏覽器的支持情況
| 瀏覽器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
先安利一下格式的定義：
Ogg：一種新的音頻壓縮格式，是完全免費、開放和沒有專利限制的。
MP3：是一種音頻壓縮技術。它被設計用來大幅度地降低音頻數據量。
WAV：為微軟公司開發的一種聲音文件格式，聲音文件質量和CD相差無幾。
opera,chrome和firefox對三種模式都支持，而微軟和蘋果則對自己有專利利益的mp3格式情有獨鍾，而對潛在競爭者開源的ogg進行了封殺，ogg是一種為了對抗mpeg(音頻上就是mp3)格式開發的一種音視頻技術，但他的關系比較微妙，因為目前沒有哪個正式的公司敢直接使用ogg，因為商業推廣ogg存在專利訴訟風險，之所以目前還沒有人訴訟ogg，是因為目前沒有大魚上鈎，不值得訴訟，但是反過來一旦訴訟失敗，ogg被證明沒有侵權mpeg，那以后mpeg就沒有人使用了。
3. audio 標准API
src: 要播放的音頻的 URL。preload: 是否預加載，如果使用 "autoplay"，則忽略該屬性。autoplay: 是否自動播放。loop: 是否循環播放。controls: 是否顯示瀏覽器自帶的控制條，例如播放按鈕。
<audio controls> <source src="test.ogg" type="audio/ogg"> <source src="test.mp3" type="audio/mpeg"> <source src="test.wav" type="audio/wav"> 您的瀏覽器不支持音頻播放 </audio>
//js獲取Dom對象 var audio_test = new Audio("test.mp3"); var audio_test = document.getElementById("audio_test");
DOM對象方法:
canPlayType(type);能否播放某個資源文件，返回三個字符串之一：empty、maybe 或 probably
load();重新加載資源
pay();播放
pause();暫停
DOM對象屬性，因為比較多這里只展示了幾個重要屬性：
- Media.currentSrc; //返回當前資源的URL
- Media.src = value; //返回或設置當前資源的URL
- Media.currentTime = value; //當前播放的位置，賦值可改變位置
- Media.volume = value; //音量
- Media.muted = value; //靜音
3. audio實際上的坑
Audio標簽API其實非常簡單，但只有PC瀏覽器支持的比較好，移動端卻因為流量問題存在各種坑。
（1）自動播放
ios Safari會忽視autoplay屬性，原因據官方說明是因為流量問題，Safari認為不讓用戶確認就下載音頻文件會引起流量問題，所以禁止了這個功能，除了ios,高版本的安卓(5.0)部分機器也存在這個問題，為了繞開這個功能必須要做一些處理：
解決辦法就是在頁面上新增一個按鈕，當用戶點擊按鈕時播放音樂
$('#myBtn').on('touchstart',function(){
var audio = $('#audio')[0];
audio.load();
audio.pause();
audio.play();
})
（2）單例問題:估計也是因為流量問題，iOS Safari的音頻對象是單例的，也就是說你無法播放多個音頻文件，當你load多個音頻時，后一個會覆蓋前一個，有一個解決思路，就是把兩個音頻文件合並成一個文件，加載后通過設置聲音的位置來播放不同的音樂，類似於CSS中的雪碧圖原理。
var audio= $('#audio')[0], audioConfig= { sound1: {//第一個聲音 start: 0, length: 1 }, sound2: {//第二個聲音 start: 1.5, length: 2 } }
//播放聲音1
audio.currentTime = audioConfig.sound1.start;
audio.play();
var stopFunc= function() {
if (this.currentTime >= audioConfig.sound1.start + audioConfig.sound1.length) {
this.pause()
}
}
audio.addEventListener('timeupdate', stopFunc, false);
//播放聲音2
audio.currentTime = audioConfig.sound2.start;
audio.play();
var stopFunc2 = function() {
if (this.currentTime >= audioConfig.sound2.start + audioConfig.sound2.length) {
this.pause()
}
}
audio.addEventListener('timeupdate', stopFunc2, false);
（3）循環播放
部分機型（ios）循環播放失效，解決方法，監聽播放完成事件，手動觸發播放
<!doctype html>
<html>
<head>
<title>Looping Audio</title>
<script type="text/javascript">
function init() {
var myAudio = document.getElementById("audio");
myAudio.addEventListener('ended', loopAudio, false);
}
function loopAudio() {
var myAudio = document.getElementById("audio");
myAudio.play();
}
</script>
</head>
<body onload="init();">
<audio id="audio" src="myAudio.m4a" controls></audio>
</body>
</html>
5. 視頻格式
視頻格式也有對應的3種格式：
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
6. video標准API
Media.canPlayType(type); //是否能播放某種格式的資源
Media.load(); //重新加載src指定的資源
Media.play(); //播放
Media.pause(); //暫停
7. video中的坑
（1）自動播放，類似於audio標簽，video也需要進行類似的操作
（2）多視頻播放，同樣也是要采用銜接，設置currenttime的方法來實現，還有一種方法是設置dom的src屬性，再第一個視頻播放完畢時，設置src屬性再進行play也是可以播放多個視頻的，但是缺點是，新的視頻需要加載，緩沖時間。
（3）循環播放類似於Audio標簽也是通過事件來處理
（4）預加載，preload屬性ios下是不支持的，android下也不能檢測是否加載成功，所以通用的做法是對視頻進行play方法然后立刻暫停