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

互联网 18-3-8

这次给大家带来用最简单的前端技术制作一个简洁的音乐播放器，用前端技术制作一个简洁的音乐播放器的注意事项有哪些，下面就是实战案例，一起来看一下。

这个播放器的音乐是通过豆瓣FM的API获取到的，我们可以随机的听到豆瓣FM的任何音乐。

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');  }

//获取随机频道信息  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()  }  }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

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

相关资讯

标签推荐