HTML5自定义自定义mp3播放器源码播放器源码
audio对象对象
src兼容.ogg .wav .mp3
<audio controls src='data/imooc.wav'></audio>
width autoplay loop muted静音
<audio controls src='data/imooc.wav' autoplay loop width='500' height='500' muted></audio>
播放播放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