JS+html5制作簡(jiǎn)單音樂(lè)播放器

更新時(shí)間：2020年09月13日 10:31:34 作者：lzc534650799

這篇文章主要為大家詳細(xì)介紹了JS html5制作簡(jiǎn)單音樂(lè)播放器的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

1.HTML

<audio> 標(biāo)簽定義聲音，比如音樂(lè)或其他音頻流。其主要屬性有src:要播放的音頻的 URL,controls:如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

幾個(gè)主要的標(biāo)簽如下：

<div>  
 <h4 id="name">李玉剛 - 剛好遇見(jiàn)你</h4> 
 <br> 
<audio id="audio" src="F:\KuGou\李玉剛 - 剛好遇見(jiàn)你.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樣式，只做功能說(shuō)明。

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 = ["李玉剛 - 剛好遇見(jiàn)你","張杰 - 三生三世","樸樹(shù) - 平凡之路"];//歌單 
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播放器的播放，暫停，上一首和下一首功能了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于原生JS實(shí)現(xiàn)圖片裁剪
要進(jìn)行圖片編輯，最重要要能夠?qū)D片進(jìn)行裁剪。主要的實(shí)現(xiàn)分成兩部分，一部分是前端利用js進(jìn)行裁剪區(qū)域選擇，第二部分是利用PHP進(jìn)行后臺(tái)處理?，F(xiàn)在就跟大家分享一下。
2016-08-08
js實(shí)現(xiàn)非常簡(jiǎn)單的焦點(diǎn)圖切換特效實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)非常簡(jiǎn)單的焦點(diǎn)圖切換特效,是一個(gè)非常簡(jiǎn)單的js焦點(diǎn)圖切換效果,涉及javascript操作鼠標(biāo)事件與圖片的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
js函數(shù)柯里化的方法和作用實(shí)例分析
這篇文章主要介紹了js函數(shù)柯里化的方法和作用,結(jié)合實(shí)例形式分析了js函數(shù)柯里化的方法、功能及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JavaScript判斷瀏覽器和hack滾動(dòng)條的寫法
這篇文章主要介紹了JavaScript判斷瀏覽器和hack滾動(dòng)條的寫法,需要的朋友可以參考下
2017-07-07
layer實(shí)現(xiàn)彈出層自動(dòng)調(diào)節(jié)位置
今天小編就為大家分享一篇layer實(shí)現(xiàn)彈出層自動(dòng)調(diào)節(jié)位置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
javascript中l(wèi)ayim之查找好友查找群組
這篇文章主要介紹了javascript中l(wèi)ayim之查找好友查找群組,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02
Javascript中判斷變量是數(shù)組還是對(duì)象(array還是object)
怎樣判斷一個(gè)JavaScript變量是array還是obiect，或許有很多初學(xué)者對(duì)此不是很清楚吧，下面為大家詳細(xì)解答下，希望對(duì)大家有所幫助
2013-08-08
原生js獲取元素樣式的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇原生js獲取元素樣式的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JavaScript中Promise的使用詳解
Promise，相信每一個(gè)前端工程師都或多或少地在項(xiàng)目中都是用過(guò)，畢竟它早已不是一個(gè)新名詞。ES6中已經(jīng)原生對(duì)它加以支持，在caniuse中搜索一下 Promise ，發(fā)現(xiàn)新版的chrome和firefox也已經(jīng)支持。但是低版本的瀏覽器我們可以使用 es6-promise 這個(gè) polyfill 庫(kù)來(lái)加以兼容。
2017-02-02
使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享
這篇文章主要介紹了使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享,利用AJAX的異步來(lái)顯示服務(wù)器端的處理進(jìn)度是當(dāng)下比較流行的做法,需要的朋友可以參考下
2016-05-05