13518219792
如何在HTML5中自定义一个mp3播放器？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
我们注重客户提出的每个要求，我们充分考虑每一个细节，我们积极的做好成都做网站、网站设计服务，我们努力开拓更好的视野，通过不懈的努力，创新互联赢得了业内的良好声誉，这一切，也不断的激励着我们更好的服务客户。 主要业务：网站建设,网站制作,网站设计,重庆小程序开发,网站开发,技术开发实力，DIV+CSS，PHP及ASP，ASP.Net，SQL数据库的技术开发工程师。
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播放器
放图
