當我最近項目用到audio的時候，我們用到了jPlayer作為三方庫。
功能實現了，暫停播放，進度條什么的，都很順利的搞定了。后來考慮到當網速過慢時需要給播放按鈕一個載入動畫，然后就一發不可收拾了。
找到jPlayer官方文檔，看了下events事件，嗯不錯，事件很全，幾乎能解決任何需求：
從圖中可以看出，我們肯定會用到waiting和playing事件來解決剛才提出的問題。
啪啪啪搞定：
jq('#jPlayer').on($.jPlayer.event.waiting, function(){
loadingBar.show()
});
jq('#jPlayer').on($.jPlayer.event.playing, function(){
loadingBar.hide()
});
chrome打開，測試通過，mobile模式下也通過。下班！
程序猿的第六感也是很強，回到家腦子里突然閃過一個想法，手機測會不會有問題啊。按理說-webkit-瀏覽器都應該會支持的，
chrome測試了應該沒問題了。但是就是有很大的感覺，移動端會出問題。果然，第二天就傻尿了。手機上微信內置瀏覽器，
QQ內置瀏覽器，系統瀏覽器都失效了（我的魅族魅藍手機）。拿同事的小米4和iPhone6測試也是差不多啥反應也沒有。
(⊙o⊙)噢！一定是jPlayer太渣了，這些事件支持力這么差，打開W3C教程：
事件和jPlayer的一樣嘛，再看看jplayer的源碼，原來就是用的原生的事件，只是它自己封裝了一下而已，自己寫個原生的demo，
果然還是一樣。那么waiting、playing事件是不能用了的。那么時時出現緩沖顯示loading條這個功能確實實現不了了。
最開始我限制3G或者2G的流量的時候發現，音頻只要能播放了，再跳到接近終點的位置播放，還是能夠播放出來，我一度以為audio
是載入完了，才會再播放，或者說我們項目里的音頻文件都比較小，很快能載入完。那么我可以在"開始載入"事件觸發顯示loadingBar，在第一次開始播放時
隱藏掉loadingBar。
上面那個事件列表里，很多事件是黑的，沒有詳細說明。
只有：
- loadstart
- durationchange
- loadedmetadata
- loadeddata
- progress
- canplay
- canplaythrough
這是一個加載流程，這么一說我可以利用這里面的canplay事件替代之前的playing，loadStart代替waiting事件，前提audio的屬性要設置為preload=“none”（禁止預加載，
確實也需要讓用戶點擊后才加載，因為用戶本來就不一定要聽，預加載了不就是浪費用戶流量了嗎）。
我以為事件列表里有詳細說明的事件肯定是所有瀏覽器都支持的，事實上我錯了，canplay事件在移動端的瀏覽器里表現不一，甚至不支持。
后來我又用一個較大的MP3文件測試，audio的載入流程，證實了audio和video一樣，都是邊載入邊播放的，並不是一次載完才播放。
由於項目中的音頻比較小，用2G或3G的流量情況下，只要開始播放了，就能流暢的播放下去，結合我發現的timeupdate這個事件支持比較好。
就只有暫時做個“假”的loadingBar，僅在第一次播放之前的載入過程顯示loadingBar。
定義一個全局變量，判斷是否開始播放：var isLoaded = 0;
在點擊播放事件里控制顯示loadingBar：
var play = function() {
if(isLoaded == 0){
loadingBar.show()
}else{
loadingBar.hide()
}
}
在timeupdate事件里判斷是否開始播放：
timeupdate: function(e) {
if(e.jPlayer.status.currentTime > 0 && isLoaded == 0){
loadingBar.hide()
isLoaded = 1;
}
}
后來又在W3C里發現了這個 html5視頻/DOM教程 ，頁面底部列出了大多數瀏覽器支持的方法、屬性和事件。我絕逼確定waiting事件支持很不好！！
最開始我是看的這個 html5 視頻/音頻參考手冊，上面的大多數瀏覽器支持列表還真不容易發現。
最后有個測試地址，如下：