JS+html5製作簡單音樂播放器，jshtml5音樂播放器

JS+html5製作簡單音樂播放器，jshtml5音樂播放器

本教程為大家分享了JS音樂播放器的具體代碼，供大家參考，具體內容如下

1.HTML

<audio> 標籤定義聲音，比如音樂或其他音頻流。其主要屬性有src:要播放的音訊 URL,controls:如果出現該屬性，則向使用者顯示控制項，比如播放按鈕。

幾個主要的標籤如下：

<div>    <h4 id="name">李玉剛 - 剛好遇見你</h4>  <br> <audio id="audio" src="F:\KuGou\李玉剛 - 剛好遇見你.mp3 " controls></audio><br/> </div> <br><br> <div> <button id="btn-play" >播放</button>  <button id="btn-stop" >暫停</button>  <button id="btn-pre" >上一首</button>  <button id="btn-next" >下一首</button>  </div> </div> 

這裡不提供CSS樣式，只做功能說明。

2.js

var btn1 = document.getElementById("btn-play");   btn1.onclick = function(){      if(audio.paused){                audio.play();     }   }  <!--暫停--> var btn2 = document.getElementById("btn-stop");   btn2.onclick = function(){      if(audio.played){                audio.pause();     }   }    var music = new Array(); music = ["李玉剛 - 剛好遇見你","張傑 - 三生三世","樸樹 - 平凡之路"];//歌單 var num = 0; var name = document.getElementById("name");   <!--上一首--> var btn3 = document.getElementById("btn-pre"); btn3.onclick = function(){     num = (num +2)%3;     audio.src = "music/"+music[num]+".mp3";     name.innerHTML = music[num];     audio.play();   }    <!--下一首--> var btn4 = document.getElementById("btn-next"); btn4.onclick = function(){     num = (num +1)%3;     audio.src = "music/"+music[num]+".mp3";     name.innerHTML = music[num];     audio.play();   }

這樣就可以控制audio播放器的播放，暫停，上一首和下一首功能了。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。