html音乐播放器标签,打造属于自己的音乐播放器 HTML5之audio标签
我的音樂播放器
HTML5中增加了Audio和Video標簽,這兩個標簽的用法非常相似。功能卻是相當強大,我們先來看一下Audio標簽各個瀏覽器的支持情況。這里用的依然是Can I Use這個在線網站,相信學習前端的同學應該都不陌生。
Can I Use
我們可以看到,各大瀏覽器對這個元素的支持是非常給力的,除了IE8以前的和Opera Mini,所以just do it。
相關文檔:Audio MDN ? ? Audio 菜鳥教程
對于這個元素怎么使用,個人感覺沒有什么好講解的,都是一目了然。我就講解一下Audio的一些屬性,方法,事件會在什么時候用到。
1 方法
play() ?播放這就不用說了 ?會設置puased屬性為false
pause(), ?暫停這也不用說了 ?會設置puased屬性為true
load() ? 重新加載
fastSeek ?設置播放時間 fastSeek(30) ?設置從30s處播放,可以用來快進,但是這個方法谷歌不支持,狐火下可以,所以最好還是通過設置currentTime來實現。
canPlayType() ?檢查瀏覽器是否可以播放指定的音頻類型 ?如果想做的完美一點是可以的,但是一般常見的音樂類型,瀏覽器都會支持。
2 屬性
屬性(上)
屬性(下)
常用的屬性及其方法我已經在上面進行了標注。在播放音樂之前一定要先加載音樂,也就是設置audio.src屬性。paused屬性在播放是會設置為false 暫停時設置為true。
由于屬性事件太多,于是采用了這種截圖標注的方式,還望大家見諒。
3 事件:
事件(上)
事件(下)注意:
當音頻/視頻處于加載過程中時,會依次發生以下事件:
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough
這個標簽的用法其實很簡單,完成播放器的難點就是邏輯控制,思路的清晰,所以在寫代碼之前一定要畫流程圖。在這里我推薦一款在線的框圖設計網站,不加評論,因為目前自己只用過這一個:https://www.processon.com ?當然還可以畫思維腦圖等等其他的。
可能你在寫播放器的圖中會用到下面的一些問題:
問題1
問題2
我碰到問題2的原因是,音樂沒有加載(沒有設置audio.src)就直接 ?audio.play() ?此時不會報錯 ,但是點擊關閉按鈕即執行 audio.pause()時,就會報這個錯。底下為產生相同錯誤的測試代碼(當然這只是一個例子,可能出現的情況有多種)html>
我的音樂播放器關閉
var?dom=document.getElementById("audioDom");
dom.play();
function?test(){
dom.pause();
}
總結一點 ?就是如果產生類似問題,一定是你的播放邏輯產生了問題。
最后告誡大家一點,寫代碼一定要備份,一定要學會用git來管理自己的項目。這次本來有一個小bug,我想小bug改起來應該容易,不用備份,結果越改坑越大最后改的面目全非,一片混亂,一氣之下又來一遍,每一次改動都會commit。
作者:DJL簫氏
鏈接:https://www.jianshu.com/p/4785f77413cf
總結
以上是生活随笔為你收集整理的html音乐播放器标签,打造属于自己的音乐播放器 HTML5之audio标签的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: word 2010+ 从指定页开始设置页
- 下一篇: 为智能家居赋能,雄迈信息发布4G消费类安