如何在HTML5中自定義一個mp3播放器？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
我們注重客戶提出的每個要求，我們充分考慮每一個細節(jié)，我們積極的做好成都做網(wǎng)站、網(wǎng)站設計服務，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)贏得了業(yè)內的良好聲譽，這一切，也不斷的激勵著我們更好的服務客戶。 主要業(yè)務：網(wǎng)站建設,網(wǎng)站制作,網(wǎng)站設計,重慶小程序開發(fā),網(wǎng)站開發(fā),技術開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術開發(fā)工程師。
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循環(huán)
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 循環(huán)
myAudio.loop = true;
volumechange音量改變
myAudio.addEventListener('volumechange',function(){
console.log('音頻的聲音改變了')
});timeupdate音頻正在播放狀態(tài)
myAudio.addEventListener('timeupdate',function(){
console.log('音頻正在播放中...')
})自定義mp3播放器
放圖
