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

  这个播放器的音乐是通过豆瓣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标签本身提供进度条功能,以及音量控制功能的,这里我为了界面的好看自己设置了进度条,音量控制还没有加,大家可以自行添加。





本文转载自中文网

 

推荐阅读