HTML5 audio音頻播放全解析
2020-08-12 分類： 網(wǎng)站建設(shè)
html5 audio的語(yǔ)法以及屬性和方法
使用語(yǔ)法
屬性
src 是歌曲的路徑
controls 播放控制 如果給標(biāo)簽里寫了 controls="controls" 那么網(wǎng)頁(yè)會(huì)顯示audio自帶的播放控件，如果沒(méi)寫就不會(huì)顯示.
loop 歌曲循環(huán) 在標(biāo)簽里添加該屬性歌曲循環(huán) 如果你的歌曲是從后臺(tái)調(diào)取的的 也可以在ajax里設(shè)置 loop=true/false來(lái)控制;
autoplay 當(dāng)歌曲加載后自動(dòng)播放，但是只有pc端可以實(shí)現(xiàn) 移動(dòng)端不行(pc端的瀏覽器要比移動(dòng)端的完善很多，對(duì)有些屬性支持也會(huì)好很多)
以上是標(biāo)簽內(nèi)的屬性 當(dāng)然也可以作為對(duì)象屬性來(lái)調(diào)取控制auido.*
audio不單單是個(gè)標(biāo)簽 他也是window下的一個(gè)對(duì)象，對(duì)象就有屬性和方法，作為對(duì)象他有哪些常用的方法呢
對(duì)象屬性：
currentTime 獲取當(dāng)前播放時(shí)間
duration 獲取歌曲的總時(shí)間
play 是否在播放 返回true/false
pause 是否暫停 返回true/false
對(duì)象方法：
play() 播放歌曲
pause() 暫停歌曲
load()重新加載歌曲
以上這些屬性和方法只是audio最常用的一部分，也是今天的demo里面要用到的，如果想了解更多關(guān)于audio的屬性和方法可以去w3shool看下http://www.w3school.com.cn/jsref/dom_obj_audio.asp
html5 audio的一些事件
play 播放事件 可判斷歌曲是否正在播放中
pause 暫停事件 判斷歌曲是否暫停
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（這些事件在加載過(guò)程中是按以上順序觸發(fā)的）
以上這些事件可以通過(guò)事件監(jiān)聽(tīng)對(duì)其做相應(yīng)處理
完整的音頻播放頁(yè)面
%24%28function%28%29%20%7B%20%20%20%20getSong%28%29%3B%7D%29//%u83B7%u53D6%u6B4C%u66F2%u94FE%u63A5%u5E76%u63D2%u5165dom%u4E2Dfunction%20getSong%28%29%20%7B%20%20%20%20var%20audio%20%3D%20document.getElementById%28%22audio%22%29%3B%20%20%20%20audio.src%20%3D%20%22http%3A//frontman.qiniudn.com/songnotime.mp3%22%3B%20%20%20%20audio.loop%20%3D%20true%3B%20//%u6B4C%u66F2%u5FAA%u73AF%20%20%20%20playCotrol%28%29%3B%20//%u64AD%u653E%u63A7%u5236%u51FD%u6570%7D//%u70B9%u51FB%u64AD%u653E/%u6682%u505Cfunction%20clicks%28%29%20%7B%20%20%20%20var%20audio%20%3D%20document.getElementById%28%22audio%22%29%3B%20%20%20%20%24%28%22%23control%22%29.click%28function%28%29%20%7B%20%20%20%20%20%20%20%20if%20%28%24%28%22%23control%22%29.hasClass%28%22play%22%29%29%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%24%28%22%23control%22%29.addClass%28%22pause%22%29.removeClass%28%22play%22%29%3B%20%20%20%20%20%20%20%20%20%20%20%20audio.play%28%29%3B//%u5F00%u59CB%u64AD%u653E%20%20%20%20%20%20%20%20%20%20%20%20dragMove%28%29%3B//%u5E76%u4E14%u6EDA%u52A8%u6761%u5F00%u59CB%u6ED1%u52A8%20%20%20%20%20%20%20%20%20%20%20%20%24%28%22%23control%22%29.html%28%22%u6682%u505C%u64AD%u653E%22%29%3B%20%20%20%20%20%20%20%20%7D%20else%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%24%28%22%23control%22%29.addClass%28%22play%22%29.removeClass%28%22pause%22%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%24%28%22%23control%22%29.html%28%22%u70B9%u51FB%u64AD%u653E%22%29%3B%20%20%20%20%20%20%20%20%20%20%20%20audio.pause%28%29%3B%20%20%20%20%20%20%20%20%7D%20%20%20%20%7D%29%7D//%u64AD%u653E%u65F6%u95F4function%20timeChange%28time%2C%20timePlace%29%20%7B//%u9ED8%u8BA4%u83B7%u53D6%u7684%u65F6%u95F4%u662F%u65F6%u95F4%u6233%u6539%u6210%u6211%u4EEC%u5E38%u89C1%u7684%u65F6%u95F4%u683C%u5F0F%20%20%20%20var%20timePlace%20%3D%20document.getElementById%28timePlace%29%3B%20%20%20%20//%u5206%u949F%20%20%20%20var%20minute%20%3D%20time%20/%2060%3B%20%20%20%20var%20minutes%20%3D%20parseInt%28minute%29%3B%20%20%20%20if%20%28minutes%20%3C%2010%29%20%7B%20minutes%20%3D%20%220%22%20+%20minutes%3B%20%7D%20//%u79D2%20var%20second%20%3D%20time%20%25%2060%3B%20seconds%20%3D%20parseInt%28second%29%3B%20if%20%28seconds%20%3C%2010%29%20%7B%20seconds%20%3D%20%220%22%20+%20seconds%3B%20%7D%20var%20allTime%20%3D%20%22%22%20+%20minutes%20+%20%22%22%20+%20%22%3A%22%20+%20%22%22%20+%20seconds%20+%20%22%22%20timePlace.innerHTML%20%3D%20allTime%3B%7D//%u64AD%u653E%u4E8B%u4EF6%u76D1%u542Cfunction%20playCotrol%28%29%20%7B%20audio.addEventListener%28%22loadeddata%22%2C%20//%u6B4C%u66F2%u4E00%u7ECF%u5B8C%u6574%u7684%u52A0%u8F7D%u5B8C%u6BD5%28%20%u4E5F%u53EF%u4EE5%u5199%u6210%u4E0A%u9762%u63D0%u5230%u7684%u90A3%u4E9B%u4E8B%u4EF6%u7C7B%u578B%29%20function%28%29%20%7B%20%24%28%22%23control%22%29.addClass%28%22play%22%29.removeClass%28%22color_gray%22%29%3B%20%24%28%22%23control%22%29.html%28%22%u70B9%u51FB%u64AD%u653E%22%29%3B%20addListenTouch%28%29%3B%20//%u6B4C%u66F2%u52A0%u8F7D%u4E4B%u540E%u624D%u53EF%u4EE5%u62D6%u52A8%u8FDB%u5EA6%u6761%20var%20allTime%20%3D%20audio.duration%3B%20timeChange%28allTime%2C%20%22allTime%22%29%3B%20setInterval%28function%28%29%20%7B%20var%20currentTime%20%3D%20audio.currentTime%3B%20%24%28%22%23time%20.currentTime%22%29.html%28timeChange%28currentTime%2C%20%22currentTime%22%29%29%3B%20%7D%2C%201000%29%3B%20clicks%28%29%3B%20%7D%2C%20false%29%3B%20audio.addEventListener%28%22pause%22%2C%20function%28%29%20%7B%20//%u76D1%u542C%u6682%u505C%20%24%28%22%23control%22%29.addClass%28%22play%22%29.removeClass%28%22pause%22%29%3B%20%24%28%22%23control%22%29.html%28%22%u70B9%u51FB%u64AD%u653E%22%29%3B%20if%20%28audio.currentTime%20%3D%3D%20audio.duration%29%20%7B%20audio.stop%28%29%3B%20audio.currentTime%20%3D%200%3B%20%7D%20%7D%2C%20false%29%3B%20audio.addEventListener%28%22play%22%2C%20function%28%29%20%7B%20//%u76D1%u542C%u6682%u505C%20%24%28%22%23control%22%29.addClass%28%22pause%22%29.removeClass%28%22play%22%29%3B%20%24%28%22%23control%22%29.html%28%22%u6682%u505C%u64AD%u653E%22%29%3B%20dragMove%28%29%3B%20%7D%2C%20false%29%3B%20audio.addEventListener%28%22ended%22%2C%20function%28%29%20%7B%20alert%280%29%20%7D%2C%20false%29%7D%20//%u8FDB%u5EA6%u6761%2C%20%u8FD9%u91CC%u6211%u7528%u7684%u662F%u4E8B%u4EF6%u5B9E%u73B0%u8FDB%u5EA6%u62D6%u52A8%20%u5982%u679C%u4E0D%u592A%u719F%u6089touch%u7684%u53EF%u4EE5%u770B%u4E0B%u6211%u4E4B%u524D%u5199%u7684%u4E00%u4E2A%u5C0Fdemo%20http%3A//www.cnblogs.com/leinov/p/3701951.html%20var%20startX%2C%20x%2C%20aboveX%20%3D%200%3B%20//%u89E6%u6478%u65F6%u7684%u5750%u6807%20//%u6ED1%u52A8%u7684%u8DDD%u79BB%20//%u8BBE%u4E00%u4E2A%u5168%u5C40%u53D8%u91CF%u8BB0%u5F55%u4E0A%u4E00%u6B21%u5185%u90E8%u5757%u6ED1%u52A8%u7684%u4F4D%u7F6E//1%u62D6%u52A8%u76D1%u542Ctouch%u4E8B%u4EF6function%20addListenTouch%28%29%20%7B%20document.getElementById%28%22drag%22%29.addEventListener%28%22touchstart%22%2C%20touchStart%2C%20false%29%3B%20document.getElementById%28%22drag%22%29.addEventListener%28%22touchmove%22%2C%20touchMove%2C%20false%29%3B%20document.getElementById%28%22drag%22%29.addEventListener%28%22touchend%22%2C%20touchEnd%2C%20false%29%3B%20var%20drag%20%3D%20document.getElementById%28%22drag%22%29%3B%20var%20speed%20%3D%20document.getElementById%28%22speed%22%29%3B%7D//touchstart%2Ctouchmove%2Ctouchend%u4E8B%u4EF6%u51FD%u6570%20function%20touchStart%28e%29%20%7B%20e.preventDefault%28%29%3B%20var%20touch%20%3D%20e.touches%5B0%5D%3B%20startX%20%3D%20touch.pageX%3B%7D%20function%20touchMove%28e%29%20%7B%20//%u6ED1%u52A8%20e.preventDefault%28%29%3B%20var%20touch%20%3D%20e.touches%5B0%5D%3B%20x%20%3D%20touch.pageX%20-%20startX%3B%20//%u6ED1%u52A8%u7684%u8DDD%u79BB%20//drag.style.webkitTransform%20%3D%20%27translate%28%27%20+%200+%20%27px%2C%20%27%20+%20y%20+%20%27px%29%27%3B%20//%u4E5F%u53EF%u4EE5%u7528css3%u7684%u65B9%u5F0F%20drag.style.left%20%3D%20aboveX%20+%20x%20+%20%22px%22%3B%20//%20speed.style.left%20%3D%20-%28%28window.innerWidth%29%20-%20%28aboveX%20+%20x%29%29%20+%20%22px%22%3B%20%7D%20function%20touchEnd%28e%29%20%7B%20//%u624B%u6307%u79BB%u5F00%u5C4F%u5E55%20e.preventDefault%28%29%3B%20aboveX%20%3D%20parseInt%28drag.style.left%29%3B%20var%20touch%20%3D%20e.touches%5B0%5D%3B%20var%20dragPaddingLeft%20%3D%20drag.style.left%3B%20var%20change%20%3D%20dragPaddingLeft.replace%28%22px%22%2C%20%22%22%29%3B%20numDragpaddingLeft%20%3D%20parseInt%28change%29%3B%20var%20currentTime%20%3D%20%28numDragpaddingLeft%20/%20%28window.innerWidth%20-%2030%29%29%20*%20audio.duration%3B//30%u662F%u62D6%u52A8%u5706%u5708%u7684%u957F%u5EA6%uFF0C%u51CF%u6389%u662F%u4E3A%u4E86%u8BA9%u6B4C%u66F2%u7ED3%u675F%u7684%u65F6%u5019%u4E0D%u4F1A%u8DD1%u5230window%u4EE5%u5916%20audio.currentTime%20%3D%20currentTime%3B%20%7D//3%u62D6%u52A8%u7684%u6ED1%u52A8%u6761%u524D%u8FDBfunction%20dragMove%28%29%20%7B%20setInterval%28function%28%29%20%7B%20drag.style.left%20%3D%20%28audio.currentTime%20/%20audio.duration%29%20*%20%28window.innerWidth%20-%2030%29%20+%20%22px%22%3B%20speed.style.left%20%3D%20-%28%28window.innerWidth%29%20-%20%28audio.currentTime%20/%20audio.duration%29%20*%20%28window.innerWidth%20-%2030%29%29%20+%20%22px%22%3B%20%7D%2C%20500%29%3B%7D
html5 audio 音頻播放demo
00:00/00:00
沒(méi)時(shí)間-Leinov
網(wǎng)頁(yè)名稱：HTML5 audio音頻播放全解析
標(biāo)題鏈接：http://www.rwnh.cn/news/85102.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、App設(shè)計(jì)、建站公司、品牌網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站收錄
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 提升偽原創(chuàng)質(zhì)量的主要方法分析 2020-08-12
- 淺析如何規(guī)避網(wǎng)頁(yè)設(shè)計(jì)前的策劃錯(cuò)誤風(fēng)險(xiǎn) 2020-08-12
- 如何做好成都SEO優(yōu)化？記住這些細(xì)節(jié) 2020-08-11
- 成都網(wǎng)站優(yōu)化公司教你如何做好網(wǎng)站優(yōu)化 2020-08-11
- 成都網(wǎng)站優(yōu)化公司為您分析什么樣的網(wǎng)站算是一個(gè)好網(wǎng)站？ 2020-08-11
- seo優(yōu)化公司的這些優(yōu)化策略是什么你知道嗎？ 2020-08-11
- Web前端開(kāi)發(fā)規(guī)范文檔 2020-08-12
- 內(nèi)容策略：企業(yè)站留住流量的又一法寶 2020-08-12
- 創(chuàng)新互聯(lián)淺談：國(guó)內(nèi)企業(yè)網(wǎng)站一些常見(jiàn)的誤區(qū) 2020-08-12
- 在進(jìn)行網(wǎng)站seo推廣時(shí)需要謹(jǐn)記的幾個(gè)點(diǎn)是什么？ 2020-08-11
- 影響成都seo排名的這幾個(gè)因素你都記住了嗎? 2020-08-11
- 成都網(wǎng)站優(yōu)化公司分享SEO關(guān)鍵詞應(yīng)該如何選擇 2020-08-11
- 成都網(wǎng)站優(yōu)化人員為您講解網(wǎng)站文章更新頻率的判斷方法 2020-08-11
- URL路徑應(yīng)該如何設(shè)置？成都網(wǎng)站優(yōu)化人員告訴你答案 2020-08-11
- 為什么網(wǎng)站內(nèi)容要更新？成都網(wǎng)站優(yōu)化人員告訴你答案 2020-08-11
- seo優(yōu)化人員為您講解關(guān)鍵詞布局的注意點(diǎn)有哪些 2020-08-11
- 成都seo公司教你如何查詢網(wǎng)站IP和ICP 2020-08-11
- 成都企業(yè)網(wǎng)站優(yōu)化推廣的目的是什么？記住這四點(diǎn) 2020-08-11
- 成都網(wǎng)站優(yōu)化的這些技巧你都記住了嗎？ 2020-08-11