HTML5 audio音频播放全解析

2020-08-12    分类： 网站建设

html5 audio的语法以及属性和方法

使用语法

属性
src 是歌曲的路径
controls 播放控制 如果给标签里写了 controls="controls" 那么网页会显示audio自带的播放控件，如果没写就不会显示.
loop 歌曲循环 在标签里添加该属性歌曲循环 如果你的歌曲是从后台调取的的 也可以在ajax里设置 loop=true/false来控制;
autoplay 当歌曲加载后自动播放，但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)
以上是标签内的属性 当然也可以作为对象属性来调取控制auido.*

audio不单单是个标签 他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢

对象属性：
currentTime 获取当前播放时间
duration 获取歌曲的总时间
play 是否在播放 返回true/false
pause 是否暂停 返回true/false

对象方法：
play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲

以上这些属性和方法只是audio最常用的一部分，也是今天的demo里面要用到的，如果想了解更多关于audio的属性和方法可以去w3shool看下http://www.w3school.com.cn/jsref/dom_obj_audio.asp

html5 audio的一些事件

play 播放事件 可判断歌曲是否正在播放中
pause 暂停事件 判断歌曲是否暂停
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（这些事件在加载过程中是按以上顺序触发的）
以上这些事件可以通过事件监听对其做相应处理

完整的音频播放页面

 
	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音频播放全解析
                

                标题链接：https://www.cdcxhl.com/news/85102.html
            

            

                                    成都网站建设公司_创新互联，为您提供品牌网站建设、App设计、建站公司、品牌网站制作、网站制作、网站收录            

            

                广告
                
            

            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            

        

        

            
猜你还喜欢下面的内容

            
        

    


    

        搜索引擎优化
        

            
网站建设知识

            
        

        

            
各行业网站