免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

HTML5 audio音頻播放全解析

2020-08-12    分類： 網(wǎng)站建設(shè)

html5 audio的語法以及屬性和方法

使用語法

屬性
src 是歌曲的路徑
controls 播放控制 如果給標(biāo)簽里寫了 controls="controls" 那么網(wǎng)頁會顯示audio自帶的播放控件，如果沒寫就不會顯示.
loop 歌曲循環(huán) 在標(biāo)簽里添加該屬性歌曲循環(huán) 如果你的歌曲是從后臺調(diào)取的的 也可以在ajax里設(shè)置 loop=true/false來控制;
autoplay 當(dāng)歌曲加載后自動播放，但是只有pc端可以實現(xiàn) 移動端不行(pc端的瀏覽器要比移動端的完善很多，對有些屬性支持也會好很多)
以上是標(biāo)簽內(nèi)的屬性 當(dāng)然也可以作為對象屬性來調(diào)取控制auido.*

audio不單單是個標(biāo)簽 他也是window下的一個對象，對象就有屬性和方法，作為對象他有哪些常用的方法呢

對象屬性：
currentTime 獲取當(dāng)前播放時間
duration 獲取歌曲的總時間
play 是否在播放 返回true/false
pause 是否暫停 返回true/false

對象方法：
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。（這些事件在加載過程中是按以上順序觸發(fā)的）
以上這些事件可以通過事件監(jiān)聽對其做相應(yīng)處理

完整的音頻播放頁面

 
	html5 audio音頻播放



%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 
沒時間-Leinov


            

                文章題目：HTML5 audio音頻播放全解析
                

                文章分享：http://m.newbst.com/news2/85102.html
            

            

                                    成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、定制網(wǎng)站、網(wǎng)頁設(shè)計公司、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站收錄            

            

                廣告
                
            

            

                聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：
                創(chuàng)新互聯(lián)
            

        

        
    


    

        h5響應(yīng)式網(wǎng)站建設(shè)