如何从零打造web音乐播放器

该demo注释齐全,拥有列表循环,控制进度,控制音量,快进音乐等功能,案例非常完整,希望能帮助到你!

源码下载:http://uquhu.cn/fmusic-demo.zip

源码演示:http://uquhu.cn/demo/


  1. /** 
  2.  *  作者:lovefc 
  3.  *  本课知识点: 
  4.  *        1. 如何使用audio进行播放,暂停 
  5.  *        2. 如果控制音乐列表循环 
  6.  *        3. 如何控制音乐播放进度 
  7.  *        4. 如何去控制音量 
  8.  *        5. 如何去控制播放快慢 
  9.  */  
  10.   
  11. // 先来生成一个audio对象  
  12. var musicfc = document.createElement('audio');  
  13.     musicfc.controls = false;  
  14.     musicfc.src = '';  
  15.     document.body.appendChild(musicfc);  
  16. // 判断一下音乐播放状态  
  17. var playStatus = 0,  
  18.     //当前音乐播放总时长,记录一下总时长  
  19.     allTime = 0,  
  20.     // 当前音乐播放时长,记录一下当前进度的时长  
  21.     currentTime = 0,  
  22.     // 存储一下播放列表  
  23.     arrMusic = new Array(),  
  24.     // 当前播放计数, 默认从零开始  
  25.     nowPlayNum = 0,  
  26.     // 播放列表数量计数  
  27.     arrMusicNum = 0;  
  28. // 重新赋予音乐属性  
  29. function attrMusic(arr) {  
  30.     // 检测是不是有url这个值,没有就滚蛋  
  31.     if (arr && arr.hasOwnProperty('url')) {  
  32.         musicfc.src = arr['url']; // 改变当前的music的值  
  33.         $('#round_icon').attr("src", arr['pic']); // 改变封面的图片  
  34.         $('.songname').html(arr['title']); // 改变标题  
  35.         allTime = musicfc.duration; // 重新获取总时长  
  36.         currentTime = musicfc.currentTime; // 重新获取当前进度时长  
  37.     }  
  38. }  
  39. // JSON 转成数组  
  40. function jsonToArray(json) {  
  41.     // 重复调用该函数的时候,清空数组  
  42.     arrMusic = new Array();   
  43.     // 如果传入的json为空的话,直接返回false  
  44.     if (json == null && json.toString() == '') {  
  45.         console.log('json error');  
  46.         return false;  
  47.     }  
  48.     // 很好,现在来循环这个json,把它变成一个数组,这样比较好操作  
  49.     for (var item in json) {  
  50.         arrMusic[item] = json[item];  
  51.     }  
  52.     // 调用函数,重新开始赋值  
  53.     attrMusic(arrMusic[nowPlayNum]);  
  54.     // 记录一下一共有几首歌  
  55.     arrMusicNum = arrMusic.length;   
  56. }  
  57. // 将json转换成数组并且将当前的元素值赋值到audio的元素中  
  58. jsonToArray(musicJson);  
  59. // 播放音乐  
  60. function autoPlay() {  
  61.     playStatus = 1;   
  62.     musicfc.play(); // 播放音乐  
  63.     // 这里是改图标  
  64.     $(".play").attr("class", 'fa fa-stop-circle play fa-2x');  
  65. }  
  66. // 暂停  
  67. function stopPlay() {  
  68.     playStatus = 0;  
  69.     musicfc.pause(); // 暂停音乐  
  70.     // 这里同样是改图标  
  71.     $(".play").attr("class", 'fa fa-play-circle play fa-2x');  
  72. }  
  73. // 进度判断  
  74. // ontimeupdate 在当前播放位置改变时执行函数  
  75. // 参考资料:http://www.runoob.com/jsref/event-ontimeupdate.html  
  76. musicfc.ontimeupdate = function() {  
  77.     allTime = musicfc.duration; // 总时长  
  78.     // 如果没有总时长,就说明这个音乐文件不存在,那么就不执行  
  79.     if(allTime){  
  80.         // 正在播放的时长,这里不能读取全局变量里面的,因为这个值总是在更新,所以要取最新的  
  81.         currentTime = musicfc.currentTime;  
  82.         // 计算一下当前的报进度,当前时长/总时长  
  83.         var PlayProgress = Math.round(currentTime / allTime * 100);  
  84.         // 改变当前进度条的值,用于实时监听当前的播放进度  
  85.         $('#PlayProgress').val(PlayProgress);  
  86.     }  
  87. };  
  88. // 切换上一首音乐  
  89. function prevMusic() {  
  90.     // 先把值减去1  
  91.     nowPlayNum--;  
  92.     // 判断值是否小于0.如果小于0,就说明列表已全部循环完毕,那么重新开始吧  
  93.     // 如果小于0,就把当前的播放数组数量减去1,因为数组是从零开始的  
  94.     if (nowPlayNum < 0) {  
  95.         nowPlayNum = arrMusicNum - 1;  
  96.     }  
  97.     // 很好,那么开始赋值吧  
  98.     attrMusic(arrMusic[nowPlayNum]);  
  99. }  
  100. // 切换下一首音乐  
  101. function nextMusic() {  
  102.     // 加 加 加   
  103.     nowPlayNum++;  
  104.     // 判断当前播放的列表数量是不是大于了总列表的数量,大于,就重零开始吧  
  105.     if (nowPlayNum > arrMusicNum) {  
  106.         nowPlayNum = 0;  
  107.     }  
  108.     // 赋值  
  109.     attrMusic(arrMusic[nowPlayNum]);  
  110. }  
  111. // 监听播放结束,然后来搞点事情  
  112. musicfc.addEventListener('ended',  
  113. function() {  
  114.     // 如果此时状态还是在播放,那么就切换到下一首  
  115.     if (playStatus == 1) {  
  116.         nextMusic(); // 把数组移到下一个,赋值元素  
  117.         autoPlay(); // 重新开始播放,初始化属性值  
  118.     } else {  
  119.         // 这里就是停止了  
  120.         playStatus = 0;  
  121.         musicfc.pause();  
  122.         $(".play").attr("class", 'fa fa-play-circle play fa-2x');  
  123.     }  
  124. },  
  125. false);  
  126. // 控制播放进度,val是选择的进度  
  127. function PlayProgress(val) {  
  128.     if(allTime && val){  
  129.         // 这里进行一下数值处理  
  130.         musicfc.currentTime = Math.round(allTime * val / 100);   
  131.         $('#PlayProgress').val(PlayProgress);  
  132.     }  
  133. }  
  134. // 控制播放速度  
  135. function PlayRate(val) {  
  136.     // 这里是加快,最大值为2  
  137.     val = val/100+1;  
  138.     musicfc.playbackRate = val;  
  139. }  
  140. // 播放与暂停--事件监听  
  141. $('.play').click(function() {  
  142.     if (playStatus == 0) {  
  143.         autoPlay();  
  144.     } else {  
  145.         stopPlay();  
  146.     }  
  147. });  
  148. // 切换上一首--事件监听  
  149. $('.play-left').click(function() {  
  150.     prevMusic();  
  151.     // 如果此时状态还是播放,那么就调用播放  
  152.     if (playStatus == 1) {  
  153.         autoPlay();  
  154.     }  
  155. });  
  156. // 切换下一首--事件监听  
  157. $('.play-right').click(function() {  
  158.     nextMusic();  
  159.     if (playStatus == 1) {  
  160.         autoPlay();  
  161.     }  
  162. });  
11 条评论
gravatar头像