前言
????上一篇講到了<audio>標(biāo)簽的一些屬性和事件折汞，下面我們就看看如何利用這些屬性來實(shí)現(xiàn)我們自己的播放器精钮，這里需要對(duì)前端知識(shí)有一定了解楣黍。
一吱韭、播放器界面的實(shí)現(xiàn)
????這里就利用html、css寫一個(gè)前端的音樂播放界面就好了鳍刷，這個(gè)沒什么好說的占遥，每個(gè)人都可以寫自己喜歡的風(fēng)格，根據(jù)自己的喜好來输瓜，寫自己風(fēng)格的播放器瓦胎，這里我把自己的代碼和效果放上來。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="referrer" content="never">
<script src="http://o7m41tvmg.bkt.clouddn.com/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/music.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/music.css">
<title></title>
</head>
<body>
<div class="music_player">
<div class="header">
<a href="javascript:;"><img src="img/music.png"></a>
<span>聽風(fēng)畫雨眠</span>
</div>
// 播放器面板
<div class="icon">
<a href="javascript:;"><img src="img/after.png"></a> 
<a href="javascript:;"><img src="img/player.png"></a> 
<a href="javascript:;"><img src="img/betton.png"></a> 
<a href="javascript:;"><img src="img/sound.png"></a>
<div class="strip"></div>
<div class="circle">
<span></span>
</div>
<div class="bar"></div>
</div>
<img id="img" style="width:70px;"
src="http://qukufile2.qianqian.com/data2/pic/0ce88c8cd9127e20ff576a6ad66fe870/576822355/576822355.jpg@s_1,w_90,h_90">
<input type="text" value="" id="info" placeholder="請(qǐng)輸入歌曲尤揣、歌手" />
<button id="btn">搜索</button>
<div>
<audio id="audio" preload="auto" style="width:274px;" src="http://music.163.com/song/media/outer/url?id=449818741.mp3">瀏覽器太垃圾不支持h5音樂標(biāo)簽</audio>
</div>
// 播放列表
<ul class="list" style="width:260px; heigth:30px;">
<li><span></span><a class="li" href="javascript:;">光年之外</a><div>鄧紫棋</div></li>
<li><span></span><a class="li" href="javascript:;">半壺紗</a><div>劉珂矣</div></li>
</ul>
</div>
</body>
</html>
css部分我就不發(fā)出來了搔啊，代碼太長了，需要整套源碼的可以去群里面下載（Q群：812307816）或者去github上面下載https://github.com/Guidozijef/music
我們直接到最關(guān)鍵的部分北戏，js部分
二负芋、js功能實(shí)現(xiàn)
Javascript
????js部分是里面最重要的部分，做了上面的html最欠、css后只是一個(gè)音樂播放器的殼子示罗，js才是整個(gè)播放器的核心內(nèi)容惩猫，我們先來屢屢思路
1芝硬、如何做到搜索取別的播放器數(shù)據(jù)的效果。
2轧房、得到數(shù)據(jù)后我們?nèi)绾伟迅枨畔@示到播放列表上面拌阴。
3、如何點(diǎn)擊列表上面不同的歌曲自動(dòng)獲取該播放地址和圖片奶镶。
4迟赃、如何實(shí)現(xiàn)本地的點(diǎn)擊功能（控制、暫停厂镇、靜音纤壁、上一曲、下一曲）捺信。
要實(shí)現(xiàn)索取別的播放器的音樂酌媒，我們需要用到AJAX發(fā)送跨域請(qǐng)求，首先需要找到一個(gè)音樂API，很多音樂播放器都是不可行的秒咨。而且我用的是jquery的ajax喇辽，只支持get請(qǐng)求方式的跨域。最后我也找到了一個(gè)雨席，各種嘗試最后請(qǐng)求成功菩咨。
$('#btn').click(function() {
var value = $('#info').val();
$.ajax({
type: 'get',
url: 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=' + value,
async: true,
dataType: 'jsonp',
success: function(data1) {
var songids = data1.song;
console.log(songids.length);
這部分代碼就是實(shí)現(xiàn)發(fā)送搜索歌曲的請(qǐng)求，并返回搜索信息陡厘。
for (var i = 0; i < songids.length; i++) {
var songid = songids[i].songid;
var artistname = songids[i].artistname;
var li = document.createElement('li');
var span = document.createElement('span');
var a = document.createElement('a');
var div = document.createElement('div');
div.innerText = artistname;
a.href = 'javascript:;';
a.src = songid;
var songname = songids[i].songname;
a.textContent = songname;
li.appendChild(span);
li.appendChild(a);
li.appendChild(div);
$('.music_player .list').append(li);
利用js將得到的歌曲信息顯示到歌曲列表中
$.ajax({
type: 'get',
url:'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=' +this.src,
async: true,
dataType: 'jsonp',
success: function(data2) {
var audio = document.getElementById('audio');
var img = document.getElementById('img');
audio.src = data2.bitrate.file_link;
img.src = data2.songinfo.pic_small;
這部分代碼是對(duì)單個(gè)歌曲發(fā)送請(qǐng)求抽米，得到本歌曲的相關(guān)信息。
// 點(diǎn)擊圖片控制播放和暫停
$('.icon a img').eq(1).click(function() {
if (audio.paused) {
audio.play();
$(this).attr({ src: 'img/pause.png' });
} else {
audio.pause();
$(this).attr({ src: 'img/player.png' });
}
});
// 點(diǎn)擊音量變成靜音并且改變圖標(biāo)
$('.icon a img').eq(3).click(function() {
if (audio.muted) {
audio.muted = false;
$(this).attr({ src: 'img/sound.png' });
} else {
audio.muted = true;
$(this).attr({ src: 'img/sound-off.png' });
}
});
// 點(diǎn)擊上一歌曲
$('.icon a img').eq(0).click(function() {
$('.list .present').parent().prev('li').children('span').addClass('present');
$('.list .present').parent().prev('li').children('a').click();
});
// 點(diǎn)擊下一歌曲
$('.icon a img').eq(2).click(function() {
$('.list .present').parent().next('li:first').children('span').addClass('present');
$('.list .present').parent().next('li:first').children('a').click();
});
// 控制音量
$('.icon .circle span').draggable({
axis: 'X',
containment: 'parent',
drag: function(ev, ui) {
// console.log(ui.position.left)
var noeleft = ui.position.left;
$('.icon .bar').css({ width: noeleft + 2 });
audio.volume = noeleft / 40; // 利用left轉(zhuǎn)化為音量糙置。
if (noeleft == 0) {
$('.icon a img').eq(3).attr({ src: 'img/sound-off.png' });
} else {
$('.icon a img').eq(3).attr({ src: 'img/sound.png' });
}
}
});
// 自動(dòng)播放下一首
if (audio) {
audio.loop = false;
audio.addEventListener(
'ended',
function() {
$('.icon a img').eq(2).click();
//在這個(gè)方法里寫相應(yīng)的邏輯就可以了
},
false
);
}
這部分就是控制歌曲的播放缨硝、暫停、上一曲罢低、下一曲等功能了查辩。
最后我自己做的效果如下demo（demo要用電腦端查看才會(huì)有）：
我這里沒做進(jìn)度條和歌詞效果，感興趣的可以自己加進(jìn)去网持，進(jìn)度條的做法應(yīng)該跟音量控制大同小異宜岛，需要用到j(luò)query-ui。對(duì)了功舀，給大家推薦一個(gè)圖標(biāo)下載的地方萍倡，是你馬云爸爸家的http://www.iconfont.cn/，我上面用到的圖標(biāo)也是在上面下載的辟汰。
好了列敲，播放器打造完成了，今天除了皮帖汞，又啥也沒干戴而。
