前言:
此时看官们对“h5自动播放背景音乐”大体比较着重,各位老铁们都需要分析一些“h5自动播放背景音乐”的相关内容。那么小编在网摘上网罗了一些对于“h5自动播放背景音乐””的相关资讯,希望姐妹们能喜欢,大家快快来学习一下吧!音乐的播放和暂停
在播放按钮的点击事件里,不能手动去设置src,这样会导致音乐的暂停无法控制。而应该直接在audio标签内把src写好。
改写playMusic方法:
当暂停音乐的时候,同时也要把xuanzhuan样式类去掉。
进度条
效果:
方法就是在mbox最后面加上一个div,作为进度条:
通过控制div的width 来显示歌曲的播放进度。
代码:
window.onload = function(){ //给音乐播放器(audio)添加一个timeupdate时间 document.getElementById("music").ontimeupdate = function(){ var currentTime = Math.floor(this.currentTime); //获取当前时间 var m = parseInt(currentTime / 60);//分钟 var s = parseInt(currentTime % 60);//秒钟 var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化 //console.log(time); //打印出来看看 // 百分比 = 当前时长 ÷ 总时长 × 100% var total = this.duration;//总时长 //console.log(currentTime + '=======' + total); //console.log( Math.floor(currentTime / total * 100) + "%" ); document.getElementsByClassName("progress")[0].style.width = Math.floor(currentTime / total * 100) + "%" ; }}
完成!
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #h5自动播放背景音乐 #h5自动播放音乐