這篇文章主要介紹了HTML5網頁音樂播放器的範例程式碼,內容蠻不錯的,現在分享給大家,也給大家做個參考。
本文介紹了HTML5網頁音樂播放器的範例程式碼,分享給大家,如下:
1功能介紹
##HTML5中推出了音訊視訊標籤,可以讓我們不借助其他外掛程式就可以直接播放音訊視訊。下面我們就利用H5的audio標籤及其相關屬性和方法來製作一個簡單的音樂播放器。主要包括以下幾個功能:1、播放暫停、上一首和下一首2、調整音量和播放進度條3、根據清單切換目前歌曲先來看看最終的完成效果:<audio id="music1">浏览器不支持audio标签 <source src="media/Beyond - 光辉岁月.mp3"></source> </audio> <audio id="music2">浏览器不支持audio标签 <source src="media/Daniel Powter - Free Loop.mp3"></source> </audio> <audio id="music3">浏览器不支持audio标签 <source src="media/周杰伦、费玉清 - 千里之外.mp3"></source> </audio>下面的播放清單也對應三個audio標籤:
<p id="playList"> <ul> <li id="m0">Beyond-光辉岁月</li> <li id="m1">Daniel Powter-Free Loop</li> <li id="m2">周杰伦、费玉清-千里之外</li> </ul> </p>接下來我們就開始逐步實現上面提到的功能吧,先來完成播放和暫停功能,在按下播放按鈕時我們要做到進度條隨歌曲進度前進,播放時間也逐漸增加,同時播放按鈕變成暫停按鈕,播放列表的樣式也對應改變。 在做功能之前我們要先把三個audio標籤取得id後存到一個陣列中,以供後續使用。
var music1= document.getElementById("music1"); var music2= document.getElementById("music2"); var music3= document.getElementById("music3"); var mList = [music1,music2,music3];
2播放與暫停:
我們現在就可以完成播放按鈕的功能啦,先設定一個標誌,用來標記音樂的播放狀態,再為陣列的索引index設定一個預設值:然後對播放狀態進行判斷,呼叫對應的函數,並修改flag的值和清單對應項目樣式:function playMusic(){ if(flag&&mList[index].paused){ mList[index].play(); document.getElementById("m"+index).style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; progressBar(); playTimes(); play.style.backgroundImage = "url(media/pause.png)"; flag = false; }else{ mList[index].pause(); flag = true; play.style.backgroundImage = "url(media/play.png)"; } }上面的程式碼中調用了多個函數,其中播放和暫停是audio標籤自帶的方法,而其他的函數則是我們自己定義的。下面我們就來看看這些函數是怎麼實現的,又對應了哪些功能吧。
3進度條與播放時間:
首先是進度條功能,取得歌曲的全部時長,然後再根據目前播放的進度與進度條總長度相乘計算出進度條的位置。function progressBar(){ var lenth=mList[index].duration; timer1=setInterval(function(){ cur=mList[index].currentTime;//获取当前的播放时间 progress.style.width=""+parseFloat(cur/lenth)*300+"px"; progressBtn.style.left= 60+parseFloat(cur/lenth)*300+"px"; },10) }下面是改變播放時間功能,這裡我們設定一個定時函數,每隔一段時間來執行一次以改變播放時間。因為我們取得到的歌曲時長是以秒來計算,所以我們要利用if語句對時長判斷來進行換算,將播放時間改為以幾分幾秒的形式來顯示。
function playTimes(){ timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//秒数 var minute=parseInt(cur/60); if (minute<10) { if(cur%60<10){ playTime.innerHTML="0"+minute+":0"+cur%60+""; }else{ playTime.innerHTML="0"+minute+":"+cur%60+""; } } else{ if(cur%60<10){ playTime.innerText= minute+":0"+cur%60+""; }else{ playTime.innerText= minute+":"+cur%60+""; } } },1000); }
4調整播放進度和音量:
接下來我們再來完成一下透過進度條調整播放進度和調整音量功能。 調整播放進度功能利用了event物件來實現,因為offsetX屬性只有IE事件具有,所以推薦使用IE瀏覽器查看效果。先對進度條新增事件監聽,在進度條上點擊滑鼠時,取得滑鼠的位置,並根據位置除以進度條的總長度來計算目前的播放進度,然後對歌曲進行設定。//调整播放进度 total.addEventListener("click",function(event){ var e = event || window.event; document.onmousedown = function(event){ var e = event || window.event; var mousePos1 = e.offsetX; var maxValue1 = total.scrollWidth; mList[index].currentTime = (mousePos1/300)*mList[index].duration; progress.style.width = mousePos1+"px"; progressBtn.style.left = 60+ mousePos1 +"px"; } })下面是調整音量功能,音量的調整我們採用拖動的形式實現,思路也是對音量條的按鈕球添加事件監聽,然後根據拖動的位置來計算按鈕球相對於音量條整體的位置,最後根據計算結果與音量相乘得出當前音量:
volBtn.addEventListener("mousedown",function(event){ var e = event || window.event; var that =this; //阻止球的默认拖拽事件 e.preventDefault(); document.onmousemove = function(event){ var e = event || window.event; var mousePos2 = e.offsetY; var maxValue2 = vol.scrollHeight; if(mousePos2<0){ mousePos2 = 0; } if(mousePos2>maxValue2){ mousePos2=maxValue2; } mList[index].volume = (1-mousePos2/maxValue2); console.log(mList[index].volume); volBtn.style.top = (mousePos2)+"px"; volBar.style.height = 60-(mousePos2)+"px"; document.onmouseup = function(event){ document.onmousemove = null; document.onmouseup = null; } } })
5歌曲切換
最後我們再來實現比較複雜的歌曲切換功能。 先來看用上一首和下一首按鈕切換,在切換音樂時我們要注意的問題有下面幾個:第一,我們要停止目前播放的音樂,轉而播放下一首音樂;第二,要清空進度條和播放時間,重新計算;第三,歌曲資訊要隨之改變,播放器下面的播放清單樣式也要改變。在弄清楚上面三點以後我們就可以開始實現功能了。//上一曲 function prevM(){ clearInterval(timer1); clearInterval(timer2); stopM(); qingkong(); cleanProgress(); --index; if(index==-1){ index=mList.length-1; } clearListBgc(); document.getElementById("m"+index).style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; changeInfo(index); mList[index].play(); progressBar(); playTimes(); if (mList[index].paused) { play.style.backgroundImage = "url(media/play.png)"; }else{ play.style.backgroundImage = "url(media/pause.png)"; } } //下一曲 function nextM(){ clearInterval(timer1); clearInterval(timer2); stopM(); qingkong(); cleanProgress(); ++index; if(index==mList.length){ index=0; } clearListBgc(); document.getElementById("m"+index).style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; changeInfo(index); mList[index].play(); progressBar(); playTimes(); if (mList[index].paused) { play.style.backgroundImage = "url(media/play.png)"; }else{ play.style.backgroundImage = "url(media/pause.png)"; } }下面的程式碼是點擊清單切換歌曲。
m0.onclick = function (){ clearInterval(timer1); clearInterval(timer2); qingkong(); flag = false; stopM(); index = 0; pauseall(); play.style.backgroundImage = "url(media/pause.png)"; clearListBgc(); document.getElementById("m0").style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; mList[index].play(); cleanProgress(); progressBar(); changeInfo(index); playTimes(); } m1.onclick = function (){ clearInterval(timer1); clearInterval(timer2); flag = false; qingkong(); stopM(); index = 1; pauseall(); clearListBgc(); play.style.backgroundImage = "url(media/pause.png)"; document.getElementById("m1").style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; mList[index].play(); cleanProgress(); changeInfo(index); progressBar(); playTimes(); } m2.onclick = function (){ clearInterval(timer1); clearInterval(timer2); flag = false; qingkong(); stopM(); index = 2; pauseall(); play.style.backgroundImage = "url(media/pause.png)"; clearListBgc(); document.getElementById("m2").style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; mList[index].play(); cleanProgress(); changeInfo(index); progressBar(); playTimes(); }透過播放清單來切換歌曲與透過按鈕切換的想法差不多,只是根據對應的清單項目來設定目前應該播放哪首歌曲。 上面切換歌曲的函數中都呼叫了幾個方法,下面我們就來看看這些方法的用途是什麼吧。 首先是切換歌曲訊息:
function changeInfo(index){ if (index==0) { musicName.innerHTML = "光辉岁月"; singer.innerHTML = "Beyond"; } if (index==1) { musicName.innerHTML = "Free Loop"; singer.innerHTML = "Daniel Powter"; } if (index==2) { musicName.innerHTML = "千里之外"; singer.innerHTML = "周杰伦、费玉清"; } }然後清空兩個計時器:
//将进度条置0 function cleanProgress(timer1){ if(timer1!=undefined){ clearInterval(timer1); } progress.style.width="0"; progressBtn.style.left="60px"; } function qingkong(timer2){ if(timer2!=undefined){ clearInterval(timer2); } }再把播放的音樂停止,並且將播放時間恢復。
function stopM(){ if(mList[index].played){ mList[index].pause(); mList[index].currentTime=0; flag=false; } }最後的最後,改變下面播放清單的樣式:
function clearListBgc(){ document.getElementById("m0").style.backgroundColor = "#E5E5E5"; document.getElementById("m1").style.backgroundColor = "#E5E5E5"; document.getElementById("m2").style.backgroundColor = "#E5E5E5"; document.getElementById("m0").style.color = "black"; document.getElementById("m1").style.color = "black"; document.getElementById("m2").style.color = "black"; }到此,音樂播放器我們就基本上完成了,來看一下動圖的效果:
######################################### ############
以上是使用HTML5實現網頁音樂播放器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本文解釋瞭如何使用&lt; audio&gt;元素,包括用於格式選擇的最佳實踐(MP3,OGG Vorbis),文件優化和JavaScript控件用於播放。 它強調使用多個音頻f

本文討論了使用HTML5頁面可見性API來檢測頁面可見性,提高用戶體驗並優化資源使用情況。關鍵方麵包括暫停媒體,減少CPU負載以及基於可見性變化管理分析。

本文解釋瞭如何創建和驗證HTML5表格。 它詳細介紹了&gt;元素,輸入類型(文本,電子郵件,編號等)和屬性(必需,模式,最小,最大)。 HTML5的優勢比舊方法形成

本文討論了使用GeOlocation API管理用戶位置隱私和權限,並強調要求權限,確保數據安全性並遵守隱私法律的最佳實踐。

本文使用JavaScript詳細介紹了創建Interactive HTML5遊戲。 它涵蓋了遊戲設計,HTML結構,CSS樣式,JavaScript邏輯(包括事件處理和動畫)以及音頻集成。 必需的JavaScript庫(Phaser,Pi

本文討論了使用視口元標記來控制移動設備上的頁面縮放,重點是寬度和初始尺度之類的設置,以獲得最佳響應和性能。

本文解釋了HTML5 Websockets API,用於實時雙向客戶服務器通信。 它詳細詳細介紹了客戶端(JavaScript)和服務器端(Python/Flask)的實現,以應對可伸縮性,狀態管理,一個挑戰


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Dreamweaver Mac版
視覺化網頁開發工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

禪工作室 13.0.1
強大的PHP整合開發環境

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!