HTML5制作酷炫音頻播放器插件圖文教程

2020-03-24 17:21:47

字體：大中小

來源：轉載

供稿：網友

上圖便是這個音頻播放器的UI界面圖，里面還隱藏了一個歌曲的播放列表。整個播放器的UI除了大背景的人像圖和歌曲的星星評分使用了圖片其他全部由CSS和font-face繪制而成，看上去有難度的地方就只有CD和打碟器的制作了，在歌曲播放時CD和打碟器都是具有動畫交互效果的，這個在后面的部分會講解到。點擊播放器的CD可以打開播放列表噢~因為這一期的教程主要是為了展示Html5新增的 audio 標簽和audio元素的Dom API的使用，所以播放器UI的繪制在這里就不詳細解釋了，有疑問的可以自行查看案例的CSS文件的注釋或者在下方留言。主要功能：一、播放、暫停、上一首、下一首、音量增減二、點擊CD可以打開和關閉播放列表三、可以拖動本地音樂文件到播放器進行播放Html結構

復制代碼代碼如下:
div id="myAudio"
audio
source title="王若琳 - Wild World.mp3" src=" a http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3 /a " /
source title="韋禮安 - 還是會.mp3" src=" a http://stream18.qqmusic.qq.com/31005070.mp3 /a " /
source title="王若琳 - Lost in paradise.mp3" src=" a http://stream12.qqmusic.qq.com/30416842.mp3 /a " /
/audio
div
div span /span div /div /div
div
span /span
div
div
ul data-score="85"
li /li
li /li
li /li
li /li
li /li
/ul
/div
/div
div
a a /a
span
span /span
a /a
/span
a b /a
/div
/div
/div
ul /ul
div
div
a e /a
a c /a
a d /a
/div
div
span 0:00 /span
span
span /span
/span
span 0:00 /span
/div
/div
/div
audio標簽在上面的結構中我們可以發現這個html5新增的audio標簽，它具有一個controls屬性，顧名思義它是播放器的控制器，controls 屬性規定瀏覽器為音頻提供播放控件，例如在chrome瀏覽器下的audio標簽中設置該屬性，播放器就會以如下的形式出現，如果不設置該屬性，則會是空白一片
復制代碼代碼如下: audio controls src="xxx.mp3" /audio 但由于在不同瀏覽器下的對audio標簽渲染效果不一，這種簡易的方法并不適合在跨瀏覽器下的使用，并且瀏覽器默認的播放器控件所提供的功能實在是太少了。。所以我們一般通過不設置該屬性的方法來隱藏瀏覽器的默認播放控件，并且手工加入額外的標簽和樣式來定制播放器的UI界面。在播放器的UI界面繪制完成后，首先我們需要做的是為播放、上一首、下一首這三個主要的控制按鈕添加對應的事件監聽。
復制代碼代碼如下:
var myAudio = $("#myAudio audio")[0];
var $sourceList = $("#myAudio source");
var currentSrcIndex = 0;
var currentSr = "";

復制代碼代碼如下:
$(".btn_play").click(function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
});
$(".btn_next").click(function(){
++currentSrcIndex $sourceList.length - 1 (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_previous").click(function(){
--currentSrcIndex 0 (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
上述的按鈕點擊的事件監聽中，我們通過調用原始的audio元素的play()和pause()方法來控制音頻的播放和暫停。另外audio元素提供了currentSrc屬性，該屬性表示當前播放文件的文件源，我們通過設置該屬性來控制當前播放的歌曲曲目。接下來我們來對音量條兩邊的兩個小喇叭添加事件監聽，使得通過點擊左右兩個小喇叭可以減小和增加當前播放的音量。要設置播放器的音量，我們可以調用audio元素中所提供的volume屬性。volume值最大為1，最小為0，在這里我們通過每次點擊喇叭增減0.1的音量來實現音量的控制。當然你也可以使用別的值。但要注意的是javascript語言不能對小數提供精準的控制，所以每次減少0.1的音量時實際上減少的音量是稍微地大于0.1的，這導致當連續點擊9次音量減少的按鈕時剩下0.09xxxx的音量，然后你會發現播放器怎么無法靜音了。。。當然這個問題是很容易解決的（如下所示），只是稍作提醒。
復制代碼代碼如下:
$(".volume_control .decrease").click(function() {
var volume = myAudio.volume - 0.1;
volume 0 (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .increase").click(function() {
var volume = myAudio.volume + 0.1;
volume 1 (volume = 1);
myAudio.changeVolumeTo(volume);
});
另外我們還需要實現使用滑動器或者點擊音量條某一位置來調控音量的功能，有了上面的基礎，這個就容易完成了。首先我們來看看點擊音量條某一位置來調控音量的功能：點擊音量條的某一位置，計算該由音量條的起點到該位置的長度值，再用該值除以總的音量條長度（在這里是100）得到百分比值，再用該百分比值乘以最大音量值1得到所要跳躍到的音量值，再賦值給volume。通過滑動器來調控音量的方法實現也與此類似，主要是要懂得如何計算滑動器在音量條的位置值。在此就不做詳細解釋，有問題可以下方留言。
復制代碼代碼如下:
$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var volume = (posX - targetLeft)/100;
volume 1 (volume = 1);
volume 0 (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this).position().left; /*滑塊初始位置*/
var origX = ev.clientX; /*鼠標初始位置*/
var target = this;
var progress_bar = $(".volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*計算鼠標移動的距離*/
var curLeft = origLeft + moveX; /*用鼠標移動的距離表示滑塊的移動距離*/
(curLeft -7) (curLeft = -7);
(curLeft 93) (curLeft = 93);
target.style.left = curLeft + "px";
progress_bar.style.width = curLeft + 7 + "%";
myAudio.changeVolumeTo((curLeft + 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$(document).unbind("mouseup",stopDrag);
});
});
時間控制好了，現在播放器已經基本能用了，但我們還希望能夠直接跳過音頻的一部分到特定的時間點。那么要怎么實現呢？？！制定標準的委員們也不是傻子，這種常用的功能是不會有所疏漏的拉~所以趕緊翻翻API吧，你會發現audio元素提供了一個名為currentTime的屬性，非常簡明易懂的名稱（其實大多屬性都是很好理解的），設置該屬性可以設置當前播放的時間點。在這里，我們還需要使用audio的另一個屬性duration，該屬性指的是當前播放文件的總時間長度。因此根據音量控制的實現，我們可以這樣做：一、點擊進度條的某一位置，計算該由進度條的起點到該位置的長度占總進度條長度的百分比值（例如點擊進度條的正中間位置，則進度條的起點到該位置的長度占總進度條長度的50%），記為percentage。二、然后用percentage乘以文件的總時間長度duration就得到了你想要跳躍到的時間點的值，再把該值賦給currentTime即完成了所要實現的功能。
復制代碼代碼如下:
$(".time_line .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var percentage = (posX - targetLeft)/140 * 100;
myAudio.currentTime = myAudio.duration * percentage / 100;
});
到這里，播放器已經基本成型了。剩下一些無關痛癢（其實對我來說才是最重要的哈哈）的UI交互實現，如果大家有興趣的話就到源碼中查看吧，有問題可以在下方評論留言，希望能多多交流和學習。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：利用HTML實現限制ip的投票網站作弊方案

下一篇：html font標簽怎么用