目前主要实现功能:
- 上一曲
- 下一曲
- 播放/暂停
- 进度条同步
- 缓存进度条同步
- 播放时间同步
- 音频静音
- 播放顺序切换[顺序循环、单曲循环、随机播放]
待实现功能:
- 播放列表
- 列表点歌
- 删除歌曲
- 下载歌曲
- 歌词同步
/** * Created by ShunFeng on 2017/5/12. */ $(function () { //获取元素 var $coat = $('#auto-id-SaC78nLIwnhNsThK'); //鼠标进入离开 显示隐藏 $coat.on({ mouseenter:function () { $(this).stop().animate({top:-53},500); }, mouseleave:function () { $(this).stop().animate({top:-7},500); } }) //锁定功能 $('.left.f-fl').on('click',function () { flag = $coat.hasClass('m-playbar-unlock'); if(flag){ $coat.removeClass('m-playbar-unlock').addClass('m-playbar-lock'); $coat.off('mouseleave'); }else{ $coat.removeClass('m-playbar-lock').addClass('m-playbar-unlock'); $coat.on('mouseleave',function () { $(this).stop().animate({top:-7},500); }) } }) //小锁功能 显示隐藏播放列表 $('.icn.icn-list.s-fc3').on('click',function () { var $g_playlist = $('#g_playlist'); if($g_playlist.css('display')=='none'){ $g_playlist.css('display','block'); }else{ $g_playlist.css('display','none'); } }) //播放列表 列表点击 $('.f-cb .z-sel').on('click',function () { }) //加载歌曲列表 var audioSrc = [{ title:'把酒倒满', singer:'李晓杰', src:'mp3/bjdm.mp3', duration:'04:26', sm_img:'img/bjdm.jpeg'}, { title:'咱们结婚吧', singer:'李晓杰', src:'mp3/zmjhb.mp3', duration:'03:48', sm_img:'img/zmjhb.jpeg'}, { title:'安琥-天使的翅膀', singer:'李晓杰', src:'mp3/tsdcb.mp3', duration:'03:40', sm_img:'img/tsdcb.jpeg'} ]; $.each(audioSrc,function (i,v) { $('<audio src="'+%20v.src%20+'" singer = "'+ v.singer +'" title="'+v.title+'" ism_img="'+v.sm_img+'" duration = "'+v.duration+'"></audio>').appendTo('#music_src'); }); //获取当前歌曲标题信息 f-thide name fc1 f-fl $('.f-thide.name.fc1.f-fl').text($('audio').attr('title')); //获取当前歌曲歌手信息 $('.by.f-thide.f-fl').find('a').text($('audio').attr('singer')); //获取当前歌曲图片信息 $('.head.j-flag').children('img').attr('src',($('audio').attr('ism_img'))); //当前播放歌曲 var index = 0; //创建一个对象 用来存储当前播放对象 var playMusic = $('#music_src').children().eq(index)[0]; //全局变量 当前时间 var currentTime = 0; //播放 暂停功能 $('.ply.j-flag').on('click',function () { //获取当前歌曲标题信息 f-thide name fc1 f-fl $('.f-thide.name.fc1.f-fl').text($(playMusic).attr('title')); //获取当前歌曲歌手信息 $('.by.f-thide.f-fl').find('a').text($(playMusic).attr('singer')); //获取当前歌曲图片信息 $('.head.j-flag').children('img').attr('src',($(playMusic).attr('ism_img'))); //进度条事件 $(playMusic).on('timeupdate',function () { var scales= playMusic.currentTime/playMusic.duration; $('.cur')[0].style.width = $('#auto-id-uC0qO1dVvechvZdl').width()*scales+'px'; //缓冲进度条 var scalesT = parseInt(playMusic.buffered.end(0))/playMusic.duration; $('.rdy').stop().animate({width:$('#auto-id-uC0qO1dVvechvZdl').width()*scalesT}); //给当前播放时间 赋值 $('.j-flag.time').html('<em>'+ timeJs(playMusic.currentTime) +'</em> / '+ timeJs(playMusic.duration) +''); }); //监听播放状态 实现连续播放 $(playMusic).on('ended',function () { var $icn = $('.ctrl.f-fl.f-pr.j-flag').children('a').eq(1); if(playMusic.ended){ if($icn.hasClass('icn-shuffle')){ //清空一些状态 $('.cur').css('width',0); $('.rdy').css('width',0); //生成随机数 var sj = parseInt(Math.random() * audioSrc.length); //赋值 playMusic = $('#music_src').children().eq(sj)[0]; //重新加载 playMusic.load(); //触发播放按钮事件 $('.ply.j-flag').trigger('click'); }else if($icn.hasClass('icn-loop')){ $('.nxt').trigger('click'); } } }) //检测当前播放状态 if(playMusic.paused){ $(this).addClass('pas'); playMusic.play(); }else{ $(this).removeClass('pas'); playMusic.pause(); } }) //下一曲 $('.nxt').on('click',function () { //清空一些状态 $('.cur').css('width',0); $('.rdy').css('width',0); //停止当前音乐 playMusic.pause(); //将当前音乐更改为下一个音乐 index++; //当index值大于等于数据长度 则返回0; index = index>=$('#music_src').children().length?0:index; //赋值 playMusic = $('#music_src').children().eq(index)[0]; //重新加载 playMusic.load(); //触发播放按钮事件 $('.ply.j-flag').trigger('click'); }) //上一曲 $('.prv').on('click',function () { //清空一些状态 $('.cur').css('width',0); $('.rdy').css('width',0); //停止当前音乐 playMusic.pause(); //将当前音乐更改为上一个音乐 index--; //当index值大于等于数据长度 则返回0; index = index<0?($('#music_src').children().length)-1:index; //赋值 playMusic = $('#music_src').children().eq(index)[0]; //重新加载 playMusic.load(); //触发播放按钮事件 $('.ply.j-flag').trigger('click'); }) //进度条拖拽 $('#auto-id-BLvQzO0DvcQAGZV4').on('mousedown',function () { //暂停当前音乐 playMusic.pause(); $(document).on({ //鼠标进入事件 mousemove:function (e) { var left = e.clientX - $('#auto-id-uC0qO1dVvechvZdl').offset().left; left = left>=$('#auto-id-uC0qO1dVvechvZdl').width()?$('#uto-id-uC0qO1dVvechvZdl').width():left; $('.cur').css('width',left); }, //鼠标抬起事件 mouseup:function () { var scales = $('.cur').width()/$('#auto-id-uC0qO1dVvechvZdl').width(); //获得当前播放时间 playMusic.currentTime = playMusic.duration*scales; //播放音乐 playMusic.play(); //重新赋值当前播放时间值 $('.j-flag.time').children('em').text(timeJs(playMusic.currentTime)); $(document).off(); } }) }) //计算时间 function timeJs(time) { var m = Math.floor(time/60); var s = Math.floor(time - m*60); m = m<10?('0'+m):m; s = s<10?('0'+s):s; var temp = m+':'+s; return temp; } //静音功能 muted 属性 $('.icn.icn-vol').on('click',function () { if(playMusic.muted){ playMusic.muted = false; }else{ playMusic.muted = true; } }); //设置循环模式 $('.ctrl.f-fl.f-pr.j-flag').children('a').eq(1).on('click',function () { //当类名为 icn-loop 时 if($(this).hasClass('icn-loop')){ //修改循环模式 $(this).removeClass('icn-loop').addClass('icn-shuffle').attr('title','随机'); $('.tip.tip-1').text('随机').show(); setTimeout(function () { $('.tip.tip-1').css('display','none'); },3000); }else if($(this).hasClass('icn-shuffle')){ //修改循环模式 $(playMusic).attr('loop','loop'); $(this).removeClass('icn-shuffle').addClass('icn-one').attr('title','单曲循环'); $('.tip.tip-1').text('单曲循环').show(); setTimeout(function () { $('.tip.tip-1').css('display','none'); },3000); }else if($(this).hasClass('icn-one')){ //修改循环模式 $(playMusic).removeAttr('loop'); $(this).removeClass('icn-one').addClass('icn-loop').attr('title','循环'); $('.tip.tip-1').text('循环').show(); setTimeout(function () { $('.tip.tip-1').css('display','none'); },3000); } }) })

我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
评论