用最简单的前端技术制作一个简洁的音乐播放器
2019年11月30日
作者：佚名
这个播放器的音乐是通过豆瓣FM的API获取到的，我们可以随机的听到豆瓣FM的任何音乐。
html部分
代码：
<divclass="wrapper">
<divclass="background"></div>
<divclass="content">
<audiosrc=""></audio>
<divclass="music-massage">
<pclass="musicname"></p>
<pclass="musicer"></p>
</div>
<divclass="music-icon">
<aclass="m-iconm-fenxiangcolored"href="http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538"target="new"></a>
<spanclass="m-iconm-starcolored"></span>
<spanclass="m-iconm-heartcolored"></span>
</div>
</div>
<spanclass="basebar">
<spanclass="progressbar"></span>
</span>
<divclass="controls">
<divclass="play-control">
<spanclass="m-iconm-playbtn1"title="播放/暂停"></span>
<spanclass="m-iconm-changebtn2"title="换频道"></span>
<spanclass="m-iconm-nextbtn3"title="换曲"></span>
</div>
<divclass="music-control">
<spanclass="m-iconm-xunhuancolored"></span>
<spanclass="m-iconm-radomcolored"></span>
</div>
</div>
</div>
这里就不写css的代码了，大家可以直接看源文件或者从开发者工具中去看。如果有问题可以私聊我。
js部分
代码一（播放控制）：
//播放控制
varmyAudio=$("audio")[0];
//播放/暂停控制
$(".btn1").click(function(){
if(myAudio.paused){
play()
}else{
pause()
}
});
//频道切换
$(".btn2").click(function(){
getChannel();
});
//播放下一曲音乐
$(".btn3").click(function(){
getmusic();
});
functionplay(){
myAudio.play();
$('.btn1').removeClass('m-play').addClass('m-pause');
}
functionpause(){
myAudio.pause();
$('.btn1').removeClass('m-pause').addClass('m-play');
}
代码二（ajax获取豆瓣fm音乐）：
//获取随机频道信息
functiongetChannel(){
$.ajax({
url:'http://api.jirengu.com/fm/getChannels.php',
dataType:'json',
Method:'get',
success:function(response){
varchannels=response.channels;
varnum=Math.floor(Math.random()*channels.length);
varchannelname=channels[num].name;//获取随机频道的名称
varchannelId=channels[num].channel_id;//获取随机频道ID
$('.record').text(channelname);
$('.record').attr('title',channelname);
$('.record').attr('data-id',channelId);//将频道ID计入data-id中
getmusic();
}
})
}
//通过ajax获取歌曲
functiongetmusic(){
$.ajax({
url:'http://api.jirengu.com/fm/getSong.php',
dataType:'json',
Method:'get',
data:{
'channel':$('.record').attr('data-id')
},
success:function(ret){
varresource=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>标签下一定要添加<metaname="referrer"content="no-referrer">
代码三（进度条控制）：
setInterval(present,500)//每0.5秒计算进度条长度
$(".basebar").mousedown(function(ev){//拖拽进度条控制进度
varposX=ev.clientX;
vartargetLeft=$(this).offset().left;
varpercentage=(posX-targetLeft)/400100;
myAudio.currentTime=myAudio.duration*percentage/100;
});
functionpresent(){
varlength=myAudio.currentTime/myAudio.duration100;
$('.progressbar').width(length+'%');//设置进度条长度
//自动下一曲
if(myAudio.currentTime==myAudio.duration){
getmusic()
}
}
html5中audio标签本身提供进度条功能，以及音量控制功能的，这里我为了界面的好看自己设置了进度条，音量控制还没有加，大家可以自行添加。
