音乐播放器
样式内容为以下图：
可以进行下一曲，上一曲，暂停播放以及单曲循环列表循环随机播放等功能
HTML的主要代码，如下：
<body><div id="app" class="column"><img class="music-img" src="img/06.jpg" alt="专辑封面"><div class="head center">不谓侠</div><!-- 歌曲列表的结构区域 --><div class="list"><div class="item row"><div class="item-icon center"><span class="fa fa-music"></span></div><div class="item-name">不谓侠</div><div class="item-size">4.5MB</div></div></div><!-- 底部歌曲播放状态显示以及控制区域 --><div class="foot column"><!-- 进度条可触发区域 --><div class="progress-box center"><!-- 进度条轨道 --><div class="progress-bg"><!-- 当前进度 --><div class="progress"> <div class="dot"></div></div></div></div><!-- 歌曲播放时间显示:当前时间，总时长--><div class="time-box row"><div class="time-now">01:12</div><div class="time-total">04:05</div></div><!-- 歌曲播放控制按钮 --><div class="btn-box row"><button class="btn-play-type"><span class="fa fa-list"></span></button><button class="btn-play-prov"><span class="fa fa-fast-backward fa-2x"></span></button><button class="btn-play-pause"><span class="fa fa-play-circle-o fa-4x"></span></button><button class="btn-play-next"><span class="fa fa-fast-forward fa-2x"></span></button><button></button></div></div></div></body>
以上代码为HTML5样式代码 即div等盒子代码
Js代码（利用Jquery实现）：
<script>//初始化当前正在播放的歌曲索引let nowIndex = 0;let player = $('<audio></audio>') ;let musics = [];let now = 0;let total = 0;let playType = 0;let url = "http://www.softeem.top:8080/music/";let urls = "http://www.softeem.top:8080/music/list";let isplay = false;$(function(){$.get(urls,function (data){data = JSON.parse(data);music(data);next(data);prev(data);datat(data);pauses(data);$('.item').each((i,e)=>{$(e).on('click','div',function(){if (nowIndex == i){return;}$('.item')[nowIndex].className = 'item row';$('.item-icon')[nowIndex].className = 'item-icon center';nowIndex = i;$(player).prop('src',url + data[i].path);/*player.src = url + musics[nowIndex].path;*/$(player).on('loadeddata',function(){total = this.duration;$('.time-total').text(fmtTime(total));})$(player).on('timeupdate',function(){now = this.currentTime;$('.time-now').text(fmtTime(now));let w = `${now/total * 100}%`;$('.progress').css('width',w);})startPlay(data);$('.btn-play-prov').on('click',function(){toast('上一曲');prev(data);})$('.btn-play-next').on('click',function(){toast('下一曲');next(data);})$(player).on('ended',function(){next(data);})$('.progress-box').on('click',function(e){let x = e.offsetX;let w = window.innerWidth;now = x / w * total;$(player).get(0).currentTime = now;})})})})function music(data){let html = '';$(data).each(function (i,e){html += `<div class="item row"><div class="item-icon center"><span class="fa fa-music"></span></div><div class="item-name">${e.name}</div><div class="item-size">${(e.size/1024/1024).toFixed(1)}MB</div></div>`;})$('.list').html(html)}function datat(data){$('.btn-play-pause').on('click',function(){if(isplay){toast('暂停');isplay = false;//设置图标为暂停图标$('.btn-play-pause>span').className = 'fa fa-play-circle-o fa-4x';pauses(data);}else{toast('播放');startPlay(data);}})}function startPlay(data){isplay = true;/*let flag = setInterval(function(){if (player != null && player.readyState >= 2){player.play();clearInterval(flag);}},50);*/player.get(0).play();$('.item')[nowIndex].className = 'item row playing-item';$('.item-icon')[nowIndex].className = 'item-icon center playing';$('.head').text(data[nowIndex].name);$('.btn-play-pause>span').className = 'fa fa-pause-circle-o fa-4x';}function pauses(data){player.get(0).pause();}function fmtTime(time){time = new Date(time * 1000);let m = time.getMinutes();let s = time.getSeconds();m = m < 10 ? `0${m}` : m;s = s < 10 ? `0${s}` : s;return `${m}:${s}`;}$('.btn-play-type').click(function(){if(playType === 0){playType = 1;toast('随机播放');$(this).className = 'fa fa-random';}else if(playType === 1){playType = 2;toast('单曲循环');$(this).className = 'fa fa-history';}else{playType = 0;toast('列表循环');$(this).className = 'fa fa-list';}})function next(data){$('.item')[nowIndex].className = 'item row';$('.item-icon')[nowIndex].className='item-icon center';if(playType === 0){nowIndex = ++nowIndex % data.length;}else if(playType === 1){//随机（随机数）:随机一个需要播放的歌曲索引 20首歌曲，索引范围：0~19（0~length-1）nowIndex = parseInt(Math.random() * data.length);}else{//单曲// nowIndex = nowIndex;}//为播放器对象重新设置需要播放的歌曲地址/*player.src = url + data[nowIndex].path;*/$(player).prop('src',url + data[nowIndex].path);//开始播放startPlay(data);}//上一曲function prev(data){//还原上一首歌曲列表项的样式$('.item')[nowIndex].className = 'item row';//还原上一首歌曲列表项的图标跳动动画$('.item-icon')[nowIndex].className='item-icon center';//判断循环方式 笔试题：== 和 === 区别？ 0 == "0" true 0 === "0" falseif(playType === 0){//列表nowIndex = Math.abs(--nowIndex % data.length);}else if(playType === 1){//随机（随机数）:随机一个需要播放的歌曲索引 20首歌曲，索引范围：0~19（0~length-1）nowIndex = parseInt(Math.random() * data.length);}else{//单曲// nowIndex = nowIndex;}//为播放器对象重新设置需要播放的歌曲地址(上一曲地址)/*player.src = url + data[nowIndex].path;*/$(player).prop('src',url + data[nowIndex].path);//开始播放startPlay(data);}function toast(msg){//设置文本为指定内容$('#toast').text(msg);//显示消息提示框$('#toast').css('visibility','visible');//1秒之后隐藏消息提示框let flag = setTimeout(function(){//隐藏提示框$('#toast').css('visibility','hidden');//清除定时器，防止内存泄露clearTimeout(flag);},1000);}})</script>
jquery有几个地方我说一下自己的思路，比如player设置音乐播放器那个地方，如果不进行对象转换，jquery里面是没有某些功能的
