播放器的音乐通过豆瓣FM的API获取到的

我们可以随机的听到豆瓣FM任何音乐

DEMO

html自己制作音乐播放器前端htmlcssjq制造一个简练音乐播放器 RESTful API

http://book.jirengu.com/jirengu-inc/jrg-vip8/members/Zegendary/大设计/simple%20music%20player/Random%20music%20player/Random-music.html

html+js源代码

https://github.com/Zegendary/Garbage/blob/master/大设计/simple%20music%20player/Random%20music%20player/Random-music.html

css源代码

https://github.com/Zegendary/Garbage/blob/master/大设计/simple%20music%20player/Random%20music%20player/musicindex.css

html 代码

<div class=\"大众wrapper\"大众>

<!-- 背景图片 -->

<div class=\公众background\"大众></div>

<div class=\"大众content\公众>

<audio src=\"大众\公众></audio>

<div class=\公众music-massage\"大众>

<p class=\公众musicname\公众></p>

<p class=\"大众musicer\"大众></p>

</div>

<!-- 分享，收藏，喜好按钮 -->

<div class=\公众music-icon\公众>

<a class=\"大众m-icon m-fenxiang colored\"大众 href=\公众http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538\公众 target=\"大众new\"大众></a>

<span class=\"大众m-icon m-star colored\"大众></span>

<span class=\公众m-icon m-heart colored\公众></span>

</div>

</div>

<!-- 进度条 -->

<span class=\"大众basebar\公众>

<span class=\公众progressbar\公众></span>

</span>

<div class=\"大众controls\公众>

<!-- 音乐播放。
换频道，下一曲按钮 -->

<div class=\"大众play-control\"大众>

<span class=\公众m-icon m-play btn1\"大众 title=\公众播放/停息\公众></span>

<span class=\"大众m-icon m-change btn2\"大众 title=\"大众换频道\"大众></span>

<span class=\"大众m-icon m-next btn3\"大众 title=\"大众换曲\公众></span>

</div>

<!-- 循环播放，随机播放按钮 -->

<div class=\"大众music-control\"大众>

<span class=\公众m-icon m-xunhuan colored\"大众></span>

<span class=\"大众m-icon m-radom colored\"大众></span>

</div>

</div>

</div>

js部分

一（播放掌握）

//播放掌握

var myAudio = $(\"大众audio\"大众)[0];

// 播放/停息掌握

$(\"大众.btn1\"大众).click(function(){

if (myAudio.paused) {

play()

} else {

pause()

}

});

// 频道切换

$(\"大众.btn2\"大众).click(function(){

getChannel();

});

// 播放下一曲音乐

$(\"大众.btn3\公众).click(function(){

getmusic();

});

function play(){

myAudio.play();

$('.btn1').removeClass('m-play').addClass('m-pause');

}

function pause(){

myAudio.pause();

$('.btn1').removeClass('m-pause').addClass('m-play');

}

二（ajax获取豆瓣fm音乐）

//获取随机频道信息

function getChannel(){

$.ajax({

url: 'http://api.jirengu.com/fm/getChannels.php',

dataType: 'json',

Method: 'get',

success: function(response){

var channels = response.channels;

var num = Math.floor(Math.random()channels.length);

var channelname = channels[num].name;//获取随机频道的名称

var channelId = channels[num].channel_id;//获取随机频道ID

$('.record').text(channelname);

$('.record').attr('title',channelname);

$('.record').attr('data-id',channelId);//将频道ID计入data-id中

getmusic();

}

})

}

// 通过ajax获取歌曲

function getmusic(){

$.ajax({

url: 'http://api.jirengu.com/fm/getSong.php',

dataType: 'json',

Method: 'get',

data:{

'channel': $('.record').attr('data-id')

},

success: function (ret) {

var resource = ret.song[0],

url = resource.url,

bgPic = resource.picture,

sid = resource.sid,//获取歌词的参数

ssid = resource.ssid,//获取歌词的参数

title = resource.title,

author = resource.artist;

$('audio').attr('src',url);

$('.musicname').text(title);

$('.musicname').attr('title',title)

$('.musicer').text(author);

$('.musicer').attr('title',author)

$(\公众.background\"大众).css({

'background':'url('+bgPic+')',

'background-repeat': 'no-repeat',

'background-position': 'center',

'background-size': 'cover',

});

play();//播放

}

})

};

把稳

豆瓣可能会限定我们的访问，在<head>标签下要添加<meta name=\"大众referrer\"大众 content=\公众no-referrer\公众>

三（进度条掌握）

setInterval(present,500) //每0.5秒打算进度条长度

$(\"大众.basebar\公众).mousedown(function(ev){ //拖拽进度条掌握进度

var posX = ev.clientX;

var targetLeft = $(this).offset().left;

var percentage = (posX - targetLeft)/400100;

myAudio.currentTime = myAudio.duration percentage/100;

});

function present(){

var length = myAudio.currentTime/myAudio.duration100;

$('.progressbar').width(length+'%');//设置进度条长度

//自动下一曲

if(myAudio.currentTime == myAudio.duration){

getmusic()

}

}

歌词获取办法：

http://jirenguapi.applinzi.com/fm/getLyric.php?ssid=4f86&sid=1451876

学习过程中碰着什么问题或者想获取学习资源的话，欢迎加入学习互换群

343599877，我们一起学Web