HTML5 audio音频播放全解析
发布时间：2025-06-04 点击：4
html5 audio的语法以及属性和方法使用语法
亲 您的浏览器不支持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 音频播放demoloading
00:00/00:00
没时间-leinov
怎样判定网站是否被k呢?如何恢复？
创意的网站设计技巧有哪些
网站设计时色彩搭配的重要性
如今！网站外链建设不是所有的外链都有效
工业机器人行业网站关键词排名优化指南
来自工作两年Linux C/C++ 程序员的感想
网站制作北京的ip打造两个基本原则（1）（2）制作生日礼物的网站
速度快即效率高 提高网站打开速度不得不提的几点小建议
亲 您的浏览器不支持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 音频播放demoloading
00:00/00:00
没时间-leinov
怎样判定网站是否被k呢?如何恢复？
创意的网站设计技巧有哪些
网站设计时色彩搭配的重要性
如今！网站外链建设不是所有的外链都有效
工业机器人行业网站关键词排名优化指南
来自工作两年Linux C/C++ 程序员的感想
网站制作北京的ip打造两个基本原则（1）（2）制作生日礼物的网站
速度快即效率高 提高网站打开速度不得不提的几点小建议
下一篇：网站建设一条龙