Osheep

时光不回头,当下最重要。

【html、css、jq】制作一个简洁的音乐播放器

声明:本文章版权归饥人谷和张新望所有,转载需经作者同意

《【html、css、jq】制作一个简洁的音乐播放器》

DEMO

这个播放器的音乐是通过豆瓣FM的API获取到的,我们可以随机的听到豆瓣FM的任何音乐。(这些API是饥人谷的老师整理的)
DEMO
html+js源代码
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>

    这里就不写css的代码了,大家可以直接看源文件或者从开发者工具中去看。如果有问题可以私聊我。

  • 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)/400*100;
              myAudio.currentTime = myAudio.duration * percentage/100;
          });
          function present(){
              var length = myAudio.currentTime/myAudio.duration*100;
              $('.progressbar').width(length+'%');//设置进度条长度
              //自动下一曲
              if(myAudio.currentTime == myAudio.duration){
              getmusic()
              }            
          }

    html5中audio标签本身提供进度条功能,以及音量控制功能的,这里我为了界面的好看自己设置了进度条,音量控制还没有加,大家可以自行添加。歌词信息获取方式:
    http://jirenguapi.applinzi.com/fm/getLyric.php?ssid=4f86&sid=1451876
    这里的sid&ssid获取歌曲信息可以得到。
    然后我们需要在js文件结尾加上$(document).ready(getChannel())代码让浏览器预加载播放器。这里基本已经把播放器完成了,功能比较简单。有兴趣的同学可以自己再添加功能。

    PS:这个播放器最厉害的一点就是你永远猜不到下一首歌是什么,是不是很吊???哈哈哈

点赞