最近學習了HTML5中的Audio標簽陵叽,學習他的最好方式當然是實踐狞尔,于是就自己寫了一個。那就直接上演示鏈接吧
http://htmlpreview.github.io/?https://github.com/djlxiaoshi/Audio/blob/master/music.html巩掺。模仿了QQ音樂網(wǎng)頁版的部分樣式偏序。誰叫自己不會UI呢!
HTML5中增加了Audio和Video標簽胖替,這兩個標簽的用法非常相似研儒。功能卻是相當強大豫缨,我們先來看一下Audio標簽各個瀏覽器的支持情況。這里用的依然是Can I Use這個在線網(wǎng)站端朵,相信學習前端的同學應該都不陌生好芭。
我們可以看到,各大瀏覽器對這個元素的支持是非常給力的冲呢,除了IE8以前的和Opera Mini舍败,所以just do it。
相關(guān)文檔:Audio MDN Audio 菜鳥教程
對于這個元素怎么使用敬拓,個人感覺沒有什么好講解的邻薯,都是一目了然。我就講解一下Audio的一些屬性乘凸,方法厕诡,事件會在什么時候用到。
1 方法
play() 播放這就不用說了 會設(shè)置puased屬性為false
pause(), 暫停這也不用說了 會設(shè)置puased屬性為true
load() 重新加載
fastSeek 設(shè)置播放時間 fastSeek(30) 設(shè)置從30s處播放营勤,可以用來快進灵嫌,但是這個方法谷歌不支持,狐火下可以冀偶,所以最好還是通過設(shè)置currentTime來實現(xiàn)醒第。
canPlayType() 檢查瀏覽器是否可以播放指定的音頻類型 如果想做的完美一點是可以的,但是一般常見的音樂類型进鸠,瀏覽器都會支持稠曼。
2 屬性
常用的屬性及其方法我已經(jīng)在上面進行了標注。在播放音樂之前一定要先加載音樂客年,也就是設(shè)置audio.src屬性霞幅。paused屬性在播放是會設(shè)置為false 暫停時設(shè)置為true。
由于屬性事件太多量瓜,于是采用了這種截圖標注的方式司恳,還望大家見諒。
3 事件:
注意:
當音頻/視頻處于加載過程中時绍傲,會依次發(fā)生以下事件:
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough
這個標簽的用法其實很簡單扔傅,完成播放器的難點就是邏輯控制,思路的清晰烫饼,所以在寫代碼之前一定要畫流程圖猎塞。在這里我推薦一款在線的框圖設(shè)計網(wǎng)站,不加評論杠纵,因為目前自己只用過這一個:https://www.processon.com 當然還可以畫思維腦圖等等其他的荠耽。
可能你在寫播放器的圖中會用到下面的一些問題:
我碰到問題2的原因是,音樂沒有加載(沒有設(shè)置audio.src)就直接 audio.play() 此時不會報錯 比藻,但是點擊關(guān)閉按鈕即執(zhí)行 audio.pause()時铝量,就會報這個錯倘屹。底下為產(chǎn)生相同錯誤的測試代碼(當然這只是一個例子,可能出現(xiàn)的情況有多種)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的音樂播放器</title>
</head>
<body>
<audio id="audioDom"></audio>
<button onclick="test()">關(guān)閉</button>
</body>
<script type="text/javascript">
var dom=document.getElementById("audioDom");
dom.play();
function test(){
dom.pause();
}
</script>
</html>
總結(jié)一點 就是如果產(chǎn)生類似問題慢叨,一定是你的播放邏輯產(chǎn)生了問題纽匙。
這是我個人播放器的github地址:音樂播放器 目前還沒有怎么整理優(yōu)化,只是功能有了插爹,金玉其外哄辣,敗絮其中了。
最后告誡大家一點赠尾,寫代碼一定要備份力穗,一定要學會用git來管理自己的項目。這次本來有一個小bug气嫁,我想小bug改起來應該容易当窗,不用備份,結(jié)果越改坑越大最后改的面目全非寸宵,一片混亂崖面,一氣之下又來一遍,每一次改動都會commit梯影。