我欲封天耳根小说,盗墓笔记txt全集下载,怎样写网络小说

主頁(yè) > 知識(shí)庫(kù) > HTML5制作酷炫音頻播放器插件圖文教程

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

上圖便是這個(gè)音頻播放器的UI界面圖，里面還隱藏了一個(gè)歌曲的播放列表。整個(gè)播放器的UI除了大背景的人像圖和歌曲的星星評(píng)分使用了圖片其他全部由CSS和font-face繪制而成，看上去有難度的地方就只有CD和打碟器的制作了，在歌曲播放時(shí)CD和打碟器都是具有動(dòng)畫(huà)交互效果的，這個(gè)在后面的部分會(huì)講解到。點(diǎn)擊播放器的CD可以打開(kāi)播放列表噢~

因?yàn)檫@一期的教程主要是為了展示Html5新增的<audio>標(biāo)簽和audio元素的Dom API的使用，所以播放器UI的繪制在這里就不詳細(xì)解釋了，有疑問(wèn)的可以自行查看案例的CSS文件的注釋或者在下方留言。

主要功能：

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

二、點(diǎn)擊CD可以打開(kāi)和關(guān)閉播放列表

三、可以拖動(dòng)本地音樂(lè)文件到播放器進(jìn)行播放

Html結(jié)構(gòu)

復(fù)制代碼

代碼如下:

audio標(biāo)簽

在上面的結(jié)構(gòu)中我們可以發(fā)現(xiàn)這個(gè)html5新增的audio標(biāo)簽，它具有一個(gè)controls屬性，顧名思義它是播放器的控制器，controls 屬性規(guī)定瀏覽器為音頻提供播放控件，例如在chrome瀏覽器下的audio標(biāo)簽中設(shè)置該屬性，播放器就會(huì)以如下的形式出現(xiàn)，如果不設(shè)置該屬性，則會(huì)是空白一片

復(fù)制代碼

代碼如下:

但由于在不同瀏覽器下的對(duì)audio標(biāo)簽渲染效果不一，這種簡(jiǎn)易的方法并不適合在跨瀏覽器下的使用，并且瀏覽器默認(rèn)的播放器控件所提供的功能實(shí)在是太少了。。所以我們一般通過(guò)不設(shè)置該屬性的方法來(lái)隱藏瀏覽器的默認(rèn)播放控件，并且手工加入額外的標(biāo)簽和樣式來(lái)定制播放器的UI界面。

播放控制

在播放器的UI界面繪制完成后，首先我們需要做的是為播放、上一首、下一首這三個(gè)主要的控制按鈕添加對(duì)應(yīng)的事件監(jiān)聽(tīng)。

復(fù)制代碼

代碼如下:

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

復(fù)制代碼

代碼如下:

$(".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();
});

上述的按鈕點(diǎn)擊的事件監(jiān)聽(tīng)中，我們通過(guò)調(diào)用原始的audio元素的play()和pause()方法來(lái)控制音頻的播放和暫停。另外audio元素提供了currentSrc屬性，該屬性表示當(dāng)前播放文件的文件源，我們通過(guò)設(shè)置該屬性來(lái)控制當(dāng)前播放的歌曲曲目。

音量控制

接下來(lái)我們來(lái)對(duì)音量條兩邊的兩個(gè)小喇叭添加事件監(jiān)聽(tīng)，使得通過(guò)點(diǎn)擊左右兩個(gè)小喇叭可以減小和增加當(dāng)前播放的音量。要設(shè)置播放器的音量，我們可以調(diào)用audio元素中所提供的volume屬性。volume值最大為1，最小為0，在這里我們通過(guò)每次點(diǎn)擊喇叭增減0.1的音量來(lái)實(shí)現(xiàn)音量的控制。當(dāng)然你也可以使用別的值。但要注意的是javascript語(yǔ)言不能對(duì)小數(shù)提供精準(zhǔn)的控制，所以每次減少0.1的音量時(shí)實(shí)際上減少的音量是稍微地大于0.1的，這導(dǎo)致當(dāng)連續(xù)點(diǎn)擊9次音量減少的按鈕時(shí)剩下0.09xxxx的音量，然后你會(huì)發(fā)現(xiàn)播放器怎么無(wú)法靜音了。。。當(dāng)然這個(gè)問(wèn)題是很容易解決的（如下所示），只是稍作提醒。

復(fù)制代碼

代碼如下:

$(".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);
});

另外我們還需要實(shí)現(xiàn)使用滑動(dòng)器或者點(diǎn)擊音量條某一位置來(lái)調(diào)控音量的功能，有了上面的基礎(chǔ)，這個(gè)就容易完成了。首先我們來(lái)看看點(diǎn)擊音量條某一位置來(lái)調(diào)控音量的功能：點(diǎn)擊音量條的某一位置，計(jì)算該由音量條的起點(diǎn)到該位置的長(zhǎng)度值，再用該值除以總的音量條長(zhǎng)度（在這里是100）得到百分比值，再用該百分比值乘以最大音量值1得到所要跳躍到的音量值，再賦值給volume。通過(guò)滑動(dòng)器來(lái)調(diào)控音量的方法實(shí)現(xiàn)也與此類(lèi)似，主要是要懂得如何計(jì)算滑動(dòng)器在音量條的位置值。在此就不做詳細(xì)解釋?zhuān)袉?wèn)題可以下方留言。

復(fù)制代碼

代碼如下:

$(".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; /*鼠標(biāo)初始位置*/
var target = this;
var progress_bar = $(".volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*計(jì)算鼠標(biāo)移動(dòng)的距離*/
var curLeft = origLeft + moveX; /*用鼠標(biāo)移動(dòng)的距離表示滑塊的移動(dòng)距離*/
(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);
});
});

時(shí)間控制

好了，現(xiàn)在播放器已經(jīng)基本能用了，但我們還希望能夠直接跳過(guò)音頻的一部分到特定的時(shí)間點(diǎn)。那么要怎么實(shí)現(xiàn)呢？？！制定標(biāo)準(zhǔn)的委員們也不是傻子，這種常用的功能是不會(huì)有所疏漏的拉~所以趕緊翻翻API吧，你會(huì)發(fā)現(xiàn)audio元素提供了一個(gè)名為currentTime的屬性，非常簡(jiǎn)明易懂的名稱(chēng)（其實(shí)大多屬性都是很好理解的），設(shè)置該屬性可以設(shè)置當(dāng)前播放的時(shí)間點(diǎn)。

在這里，我們還需要使用audio的另一個(gè)屬性duration，該屬性指的是當(dāng)前播放文件的總時(shí)間長(zhǎng)度。因此根據(jù)音量控制的實(shí)現(xiàn)，我們可以這樣做：

一、點(diǎn)擊進(jìn)度條的某一位置，計(jì)算該由進(jìn)度條的起點(diǎn)到該位置的長(zhǎng)度占總進(jìn)度條長(zhǎng)度的百分比值（例如點(diǎn)擊進(jìn)度條的正中間位置，則進(jìn)度條的起點(diǎn)到該位置的長(zhǎng)度占總進(jìn)度條長(zhǎng)度的50%），記為percentage。

二、然后用percentage乘以文件的總時(shí)間長(zhǎng)度duration就得到了你想要跳躍到的時(shí)間點(diǎn)的值，再把該值賦給currentTime即完成了所要實(shí)現(xiàn)的功能。

復(fù)制代碼

代碼如下:

$(".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;
});

到這里，播放器已經(jīng)基本成型了。剩下一些無(wú)關(guān)痛癢（其實(shí)對(duì)我來(lái)說(shuō)才是最重要的哈哈）的UI交互實(shí)現(xiàn)，如果大家有興趣的話就到源碼中查看吧，有問(wèn)題可以在下方評(píng)論留言，希望能多多交流和學(xué)習(xí)。

標(biāo)簽：德州鶴崗內(nèi)蒙古蚌埠黃山辛集撫順楊凌

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5制作酷炫音頻播放器插件圖文教程》，本文關(guān)鍵詞 HTML5,制作,酷炫,音頻,播放器,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。