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。（这些事件在加载过程中是按以上顺序触发的）
以上这些事件可以通过事件监听对其做相应处理

完整的音频播放页面

星空体育app最新版本(2024已更新)

%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音频播放全解析
文章分享：/news2/85102.html

成都网站建设公司_创新互联，为您提供网站设计公司、定制网站、网页设计公司、手机网站建设、网站导航、网站收录

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

猜你还喜欢下面的内容