如何在HTML5中自定义一个mp3播放器-创新互联
如何在HTML5中自定义一个mp3播放器?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联公司是一家专业提供思礼企业网站建设,专注与成都网站设计、网站制作、H5开发、小程序制作等业务。10年已为思礼众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。audio对象
src兼容.ogg .wav .mp3
width autoplay loop muted静音
播放play()
var myAudio = new Audio(); myAudio.src = 'data/imooc.wav'; myAudio.play(); btn.onclick = function(){ myAudio.play(); };
暂停pause()
pauseNode.onclick = function(){ myAudio.pause(); };
当前播放的时间currentTime
音频总时长duration
//返回音频的总长度 myAudio.addEventListener('canplay',function(){ durationNode.innerHTML = myAudio.duration; }); //更新当前播放的时间 setInterval(function(){ currentNode.innerHTML = myAudio.currentTime; },100);
音频源currentSrc
var myAudio = new Audio(); myAudio.src = 'data/imooc.mp3'; console.log(myAudio.currentSrc);
loop循环
myAudio.loop = true;
音频播放结束ended
myAudio.addEventListener('ended',function(){ console.log('音频播放结束'); console.log(myAudio.ended) });
重新加载
loadBtn.onclick = function(){ myAudio.load(); };
跳转到新的播放位置seeked / seeking
myAudio.addEventListener('seeked',function(){ console.log('seeked'); }); myAudio.addEventListener('seeking',function(){ console.log('seeking'); sekingNum++; seekingNum.innerHTML = sekingNum; });
playbackRate设置当前播放速度
myAudio.playbackRate = '15'; console.log(myAudio.playbackRate)
全屏requestFullScreen
btnScreen.onclick = function(){ myAudio.webkitRequestFullScreen(); }
loop 循环
myAudio.loop = true;
volumechange音量改变
myAudio.addEventListener('volumechange',function(){ console.log('音频的声音改变了') });
timeupdate音频正在播放状态
myAudio.addEventListener('timeupdate',function(){ console.log('音频正在播放中...') })
自定义mp3播放器
放图
关于如何在HTML5中自定义一个mp3播放器问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
本文标题:如何在HTML5中自定义一个mp3播放器-创新互联
网址分享:http://ybzwz.com/article/cciecg.html