首页 / 知识

用最简单的前端技术制作一个简洁的音乐播放器

2023-04-11 15:12:00

　　这个播放器的音乐是通过豆瓣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>

　　<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>

　　这里就不写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标签本身提供进度条功能，以及音量控制功能的，这里我为了界面的好看自己设置了进度条，音量控制还没有加，大家可以自行添加。

本文转载自中文网

音乐音乐播放最简单简洁制作技术

首页 / 知识

用最简单的前端技术制作一个简洁的音乐播放器

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢