开发者社区> 技术小能手> 正文

HTML5+Ajax实现音乐播放器

简介: 本文播放器的音乐是通过豆瓣FM的API获取到的。Demo美观简单,可自行扩展其功能。
+关注继续查看

本文播放器的音乐是通过豆瓣FM的API获取到的。Demo美观简单,可自行扩展其功能。

播放器的音乐是通过豆瓣FM的API获取到的,我们可以随机的听到豆瓣FM的任何音乐。(这些API是饥人谷的老师整理的),音乐播放器美观如图:

image

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();//播放
               }
           })
       };

注意:豆瓣会限制我们的访问,所以在

标签下一定要添加
代码三(进度条控制):
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())代码让浏览器预加载播放器。这里基本已经把播放器完成了,功能比较简单。有兴趣的同学可以自己再添加功能。

原文发布时间为:2018-07-19
本文作者:张新望zxw
本文来自云栖社区合作伙伴“Web项目聚集地”,了解相关信息可以关注“Web项目聚集地”。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
历上最强的音乐播放器(jetA…
原文地址:历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉化版)下载作者:盖世天星 历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉化版), 别不信,拥有它,你可以向你电脑中其他播放器拜拜了。
1625 0
仿酷狗音乐播放器开发日志十六——各个右键菜单的实现
转载请说明原出处,谢谢~~         整个软件主体做完了,现在就开始做各个零碎的部分了,首先拿各个菜单开刀。做这个菜单要比做前面的功能简单多,因为我已经写好了一个通用菜单可以直接拿来用。
997 0
Ajax实现跨域访问的三种方法
一、什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js       http:// (协议号)                www  (子域名)              google (主域名)                8080 (端口号) script/jquery.js (请求的地址) * 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。
868 0
Android第三方开源SeekBarCompat:音乐类播放器等APP进度条常用
 Android第三方开源SeekBarCompat:音乐类播放器等APP进度条常用 Android平台原生的SeekBar设计简单,然而,比如现在流行的一些音乐播放器的播放进度控制条,如果直接使用Android原生的SeekBar,当然可以work,但是在设计上未必能满足设计要求。
1135 0
仿酷狗音乐播放器开发日志十九——CTreeNodeUI的bug修复二(附源码)
转载请说明原出处,谢谢        今天本来打算把仿酷狗播放列表的子控件拖动插入功能做一下,但是仔细使用播放列表控件时发现了几个逻辑错误,由于我的播放 列表控件是基于CTreeViewUI和CTreeNodeUI做得,所以产生这几个bug的原因还在于他们两个,在《仿酷狗音乐播放器开发日志十一 ——CTreeNodeUI的bug修复》中已经修复过一个动态添加控件的相关bug,这属于第二次修复了。
1105 0
+关注
技术小能手
云栖运营小编~
7207
文章
9
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载