HTML5製作酷炫音訊播放器外掛圖文教學_html5教學技巧

上圖就是這個音訊播放器的UI介面圖，裡面還隱藏了一個歌曲的播放清單。整個播放器的UI除了大背景的人像圖和歌曲的星星評分使用了圖片其他全部由CSS和font-face繪製而成，看上去有難度的地方就只有CD和打碟器的製作了，在歌曲播放時CD和打碟器都是具有動畫互動效果的，這個在後面的部分會講解到。點選播放器的CD可以開啟播放清單噢~

因為這一期的教學主要是為了展示Html5新增的

主要功能：

一、播放、暫停、上一首、下一首、音量增減

二、點選CD可以開啟、關閉播放清單

三、可以拖曳本地音樂檔案到播放器進行播放

Html結構

複製代碼

代碼如下:

代碼如下:



代碼如下:



代碼如下:



代碼如下:



代碼如下:



代碼如下:



代碼如下：

• 
  
• 
  
• 
  
• 
  

a

b

e c d

0:00

0:00

audio標籤 在上面的結構中我們可以發現這個html5新增的audio標籤，它具有一個controls屬性，顧名思義它是播放器的控制器，controls 屬性規定瀏覽器為音頻提供播放控件，例如在chrome瀏覽器下方的audio標籤中設定此屬性，播放器就會以如下的形式出現，如果不設定該屬性，則會是空白一片複製程式碼程式碼如下:

但由於在不同瀏覽器下的對audio標籤渲染效果不一，這種簡易的方法並不適合在跨瀏覽器下的使用，並且瀏覽器默認的播放器控件所提供的功能實在是太少了。 。所以我們一般透過不設定該屬性的方法來隱藏瀏覽器的預設播放控件，並且手工加入額外的標籤和樣式來定製播放器的UI介面。

播放控制

在播放器的UI介面繪製完成後，首先我們需要做的是為播放、上一首、下一首這三個主要的控制按鈕添加對應的事件監聽。

複製程式碼

程式碼如下:

var myAudio = $("#) ")[0];
var $sourceList = $("#myAudio source");
var currentSrcIndex = 0;
var currentSr = "";

複製程式碼

程式碼如下:

$(".btn_play").blick (function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
});
$(".btn_next").click(function(){
currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAuq source"。 currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_previous")..lickclick(function() {
--currentSrcIndex currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myddio. ;
myAudio.play();
});

上述的按鈕點擊的事件監聽中，我們透過呼叫原始的audio元素的play()和pause()方法來控制音訊的播放和暫停。另外audio元素提供了currentSrc屬性，該屬性表示目前播放檔案的檔案來源，我們透過設定該屬性來控制目前播放的歌曲曲目。

音量控制

接下來我們來對音量條兩邊的兩個小喇叭添加事件監聽，使得透過點擊左右兩個小喇叭可以減少和增加目前播放的音量。要設定播放器的音量，我們可以呼叫audio元素中所提供的volume屬性。 volume值最大為1，最小為0，在這裡我們透過每次點擊喇叭增減0.1的音量來實現音量的控制。當然你也可以使用別的值。但要注意的是javascript語言不能對小數提供精準的控制，所以每次減少0.1的音量時實際上減少的音量是稍微地大於0.1的，這導致當連續點擊9次音量減少的按鈕時剩下0.09 xxxx的音量，然後你會發現播放器怎麼無法靜音了。 。 。當然這個問題是很容易解決的（如下圖），只是稍作提醒。

複製程式碼

程式碼如下:

$(“volume_contro".volume_contro".volume" .click(function() {
var volume = myAudio.volume - 0.1;
volume myAudio.changeVolumeTo(volume);
});
});
}); >$(".volume_control .increase").click(function() {
var volume = myAudio.volume 0.1;
volume > 1 && (volume = 1);
myAudio.changeVolumeTovolume(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 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> 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 (curLeft > 93) && (curLeft = 93);
target.style.left = curLeft "px";
progress_bar.style.width = curLeft 7 "%";
myAudio.changeVolumeTo((curLeft 7To)/ 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 . .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交互實現，如果大家有興趣的話就到源碼中查看吧，有問題可以在下方評論留言，希望能多多交流和學習。