這篇文章主要介紹了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中文網其他相關文章!

H5和HTML5是不同的概念:HTML5是HTML的一個版本,包含新元素和API;H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼,H5應用則需要容器運行並通過JavaScript與原生代碼交互。

HTML5的關鍵元素包括、、、、、等,用於構建現代網頁。 1.定義頭部內容,2.用於導航鏈接,3.表示獨立文章內容,4.組織頁面內容,5.展示側邊欄內容,6.定義頁腳,這些元素增強了網頁的結構和功能性。

HTML5和H5沒有區別,H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本,增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用,適用於各種移動設備。

HTML5是超文本標記語言的最新版本,由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強,提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤,如、、、等,使網頁結構更清晰,SEO效果更好。 HTML5支持多媒體元素和,無需第三方插件,提升了用戶體驗和加載速度。 HTML5增強了表單功能,引入了新的輸入類型如、等,提高了用戶體驗和表單驗證效率。

如何寫出乾淨高效的HTML5代碼?答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等,提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性,使用適當縮進和註釋。 3.優化性能,通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤,如標籤未閉合,確保代碼有效性。

H5通過多媒體支持、離線存儲和性能優化提升網頁用戶體驗。 1)多媒體支持:H5的和元素簡化開發,提升用戶體驗。 2)離線存儲:WebStorage和IndexedDB允許離線使用,提升體驗。 3)性能優化:WebWorkers和元素優化性能,減少帶寬消耗。

HTML5代碼由標籤、元素和屬性組成:1.標籤定義內容類型,用尖括號包圍,如。 2.元素由開始標籤、內容和結束標籤組成,如內容。 3.屬性在開始標籤中定義鍵值對,增強功能,如。這些是構建網頁結構的基本單位。

HTML5是構建現代網頁的關鍵技術,提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等,增強了網頁結構和SEO。 2.支持多媒體元素和,無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性,簡化了驗證過程。 4.提供了離線和本地存儲功能,提升了網頁性能和用戶體驗。


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

記事本++7.3.1
好用且免費的程式碼編輯器

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),