实现原理
使用html写出界面，css装饰，js实现音乐播放和控制，音乐从data.js中读取相对路径，在js中使用player播放存在项目中的音乐。
主界面（index）
<!DOCTYPE html><html lang="en"><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/reset.css"><link href="css/index.css" rel="stylesheet"></head><body><!-- 顶部logo和搜索 --><div class="top"><div class="container"><div class="logo"><h1><a href=""></a></h1></div><div class="search"><i class="icono-search"></i><input type="text" placeholder="输入查询关键字"></div></div></div><div class="play-main"><div class="container main-wrap"><!-- 左侧功能栏 --><div class="left-side"><ul class="side-menu"><li><a href="" class="active"><i class="icon-font icon-recommend"></i> 今日推荐</a></li><li><a href=""><i class="icon-font icon-rank"></i> 排行榜</a></li><li><a href=""><i class="icon-font icon-playing"></i> 正在播放</a></li><li><a href=""><i class="icon-font icon-history"></i> 播放历史</a></li><li><a href=""><i class="icon-font icon-fav"></i> 我的收藏</a></li></ul></div><!-- 歌曲列表 --><div class="list"><table><!-- 列表头 --><thead><tr class="tb-head"><th class="tb-space"></th><th>歌曲</th><th>演唱者</th><th>专辑</th><th>大小</th><th class="tb-space"></th></tr></thead><!-- 列表项 --><tbody id="tbody"> </tbody></table></div><!-- 歌曲信息 --><div class="right-side"><!-- 专辑封面 --><div class="album-cover"><a href=""><img src="imgs/校长 - 带你去旅行.jpg" alt="专辑封面"></a></div><!-- 歌词 --><div class="album-lrc"><ul><li class="lrc-line">带你去旅行 - 校长</li><li class="lrc-line">作词：朱贺</li><li class="lrc-line">作曲：朱贺</li><li class="lrc-line">编曲：王柏鸿</li><li class="lrc-line">今天妆令人特别着迷</li><li class="lrc-line">Oh 我说 baby</li><li class="lrc-line">出门前换上新的心情</li><li class="lrc-line">Oh 我的 lady</li><li class="lrc-line">你喜欢有小情绪</li><li class="lrc-line">像晴天的乌云</li><li class="lrc-line">头发长见识短的惊奇</li><li class="lrc-line">表情丰富令人着迷</li><li class="lrc-line">你的一切我都好奇像秘密</li><li class="lrc-line">安全带系好带你去旅行</li><li class="lrc-line">穿过风和雨</li><li class="lrc-line">我想要带你去浪漫的土耳其</li><li class="lrc-line">然后一起去东京和巴黎</li><li class="lrc-line">其实我特别喜欢迈阿密</li><li class="lrc-line">和有黑人的洛杉矶</li><li class="lrc-line">其实亲爱的你不必太过惊奇</li><li class="lrc-line">一起去繁华的上海和北京</li><li class="lrc-line">还有云南的大理保留着回忆</li><li class="lrc-line">这样才有意义</li><li class="lrc-line">今天妆令人特别着迷</li><li class="lrc-line">Oh 我说 baby</li><li class="lrc-line">出门前换上新的心情</li><li class="lrc-line">Oh 我的 lady</li><li class="lrc-line">你喜欢有小情绪</li><li class="lrc-line">像晴天的乌云</li><li class="lrc-line">头发长见识短的惊奇</li><li class="lrc-line">表情丰富令人着迷</li><li class="lrc-line">你的一切我都好奇像秘密</li><li class="lrc-line">安全带系好带你去旅行</li><li class="lrc-line">穿过风和雨</li><li class="lrc-line">我想要带你去浪漫的土耳其</li><li class="lrc-line">然后一起去东京和巴黎</li><li class="lrc-line">其实我特别喜欢迈阿密</li><li class="lrc-line">和有黑人的洛杉矶</li><li class="lrc-line">其实亲爱的你不必太过惊奇</li><li class="lrc-line">一起去繁华的上海和北京</li><li class="lrc-line">还有云南的大理保留着回忆</li><li class="lrc-line">这样才有意义</li><li class="lrc-line">我想要带你去浪漫的土耳其</li><li class="lrc-line">然后一起去东京和巴黎</li><li class="lrc-line">其实我特别喜欢迈阿密</li><li class="lrc-line">和有黑人的洛杉矶</li><li class="lrc-line">其实亲爱的你不必太过惊奇</li><li class="lrc-line">一起去繁华的上海和北京</li><li class="lrc-line">还有云南的大理保留着回忆</li><li class="lrc-line">这样才有意义</li></li></ul></div></div></div></div><!-- 底部歌曲播放控制，音量，进度等 --><div class="play-bottom"><!-- 播放控制 --><div class="play-control"><a href="javascript:;" class="btn-pre" id="btn-pre"></a><a href="javascript:;" class="btn-play" id="btnPlay"></a><a href="javascript:;" class="btn-next" id="btn-next"></a></div><!-- 进度条 --><div class="progress-info"><div class="play-info"><a href="javascript:;" id="playingName"> </a></div><div class="play-length"><div class="play-current">00:00</div><div class="play-progress" id="jdt"><div class="play-panel"></div><div class="progress-control"><a href="javascript:;" class="dot"></a></div></div><div class="play-duration">00:00</div></div></div><!-- 声音控制 --><div class="play-volume"><div class="volume-icon"></div><div class="volume-wrap"><div class="volume-panel"></div><div class="volume-control"><a href="javascript:;" class="dot"></a></div></div> </div><div class="play-state" id="play-state"><img src="imgs/0.png" alt=""></div></div><!-- 引入数据文件--><script src="js/data.js"></script><!-- 引入核心文件--><script src="js/index.js"></script></body></html>
javascript
Date.js
var musics = [{"ablum":"晴天","artist":"周杰伦","id":1,"name":"晴天","path":"musics/1592373302464.mp3","size":4147913,"style":"怀旧","uptime":1592373302000},{"ablum":"xxx","artist":"毛不易 ","id":2,"name":"消愁","path":"musics/1592373330188.mp3","size":8357216,"style":"民谣","uptime":1592373330000},{"ablum":"123","artist":"陈奕迅","id":3,"name":"十年","path":"musics/1592373363687.mp3","size":12050851,"style":"伤感","uptime":1592373363000},{"ablum":"xxx","artist":"校长","id":4,"name":"带你去旅行","path":"musics/1592383891287.mp3","size":3602925,"style":"民谣","uptime":1592383891000},{"ablum":"xxx","artist":"陈奕迅","id":4,"name":"淘汰","path":"musics/1592383891289.mp3","size":3602925,"style":"民谣","uptime":1592383891000}]
index.js
//创建一个音频播放器对象var player = document.createElement('audio');//记录当前正在播放的歌曲的索引var currentIndex = 0;//声明一个标记，记录歌曲的播放状态var isplay = false;(function f() {//绑定数据到页面中var html = '';//循环遍历歌曲列表，根据歌曲数目在页面中生成对应的html代码for (var i = 0; i < musics.length; i++) {var m = musics[i];html +=`<tr class="music-item" id="music-item" data-index="${i}"><td class="tb-space"></td><td class="tb-space"></td><td><a href="javascript:;">${m.name}</a></td><td><a href="javascript:;">${m.artist}</a></td><td><a href="javascript:;">${m.ablum}</a></td><td>${fmtSize(m.size)}</td><td class="tb-space"></td></tr>`;}//将生成的html插入指定位置document.getElementById('tbody').innerHTML=html;//初始化播放源player.src = musics[currentIndex].path;})()function fmtSize(size) {size = size/(1024*1024);size = size.toFixed(1);return size +'MB';}//为列表触发点击事件中var trs = document.querySelectorAll('.music-item');for (var i=0 ;i < trs.length ;i++) {trs[i].addEventListener('click',function () {clearStatus();//获取元素上data-index属性的属性值（获取需要播放的歌曲列表项）var index = this.dataset.index;//记录当前正在播放的歌曲currentIndex = index;//需要获取播放的歌曲对象var m = musics[index];//为播放设置播放器player.src = m.path;//播放startPlay();})}function startPlay() {//将状态标记为正在播放isplay = true;//播放player.play();//设置颜色trs[currentIndex].style.backgroundColor='#f0f0f0';//设置播放图标trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="imgs/playing-list.gif" alt="">';//将播放按钮的背景图片设置为暂停图标document.getElementById('btnPlay').className = 'btn-pause';//将正在播放的歌曲名显示到底部控制区域document.getElementById('playingName').innerText = musics[currentIndex].name;}function clearStatus() {//还原上一首正在播放的歌曲列表背景项背景色trs[currentIndex].style.backgroundColor = '';//清除当前行下的第一个单元格的内容（清除图标）trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="" alt="">';}function pausePlay(){//将播放状态标记为falseisplay = false;//暂停播放player.pause();document.getElementById('btnPlay').className='btn-play';}//播放控制document.getElementById('btnPlay').addEventListener('click',function () {if(isplay){pausePlay();}else {startPlay();}})//记录歌曲的当前播放时间var now = 0;//记录歌曲的总播放时间var total = 0;//当播放器数据被加载时触发player.addEventListener('loadeddata',function () {//获取当前播放器的播放位置和总播放时长now = player.currentTime;total = player.duration;//将歌曲的播放时间显示在控制区域document.querySelector('.play-current').innerText = fmtTime(now);document.querySelector('.play-duration').innerText = fmtTime(total);});//为播放器绑定播放进度改变事件player.addEventListener("timeupdate",updateProgress);function updateProgress () {//获取最新的播放进度now = player.currentTime;//计算进度的百分比var p = now/total * 100 +'%';//为进度条元素设置宽度：document.querySelector('.progress-control').style.width = p;//更新最新播放时间document.querySelector('.play-current').innerHTML = fmtTime(now);}//格式化歌曲的播放时间function fmtTime(time) {//秒转化为毫秒time *= 1000;//使用毫秒数构建一个日期对象time = new Date(time);var min = time.getMinutes();var sec = time.getSeconds();min = min < 10? '0'+ min:min;sec = sec < 10? '0'+ sec:sec;return min+':'+sec;}//初始化播放状态为列表循环var ps=0;var played = new Array();document.getElementById('play-state').addEventListener('click',function () {ps = ps +1;if(ps%3==0){ps = 0;}document.getElementById('play-state').innerHTML = '<img src="imgs/'+ps+'.png" alt="">';})//设置切到下一首歌事件function nextMusic() {//记录播放的歌曲played[played.length++] = currentIndex;//将状态清空clearStatus();if(ps==0){currentIndex++;if(currentIndex >= musics.length){currentIndex = 0;}}if(ps==1){var ran = parseInt(Math.random()*musics.length);while(currentIndex==ran){ran = parseInt(Math.random()*musics.length);}currentIndex = ran;}if(ps==2){}//重新为播放器设置播放源player.src = musics[currentIndex].path;//继续播放startPlay();}//设置切到上一首歌事件function lastMusic() {//将状态清空clearStatus();if(played.length>0){currentIndex = played[played.length-1];played.pop();}//重新为播放器设置播放源player.src = musics[currentIndex].path;//继续播放startPlay();}//设置当歌结束时事件player.addEventListener('ended',nextMusic)//切换到上一首歌document.getElementById('btn-pre').addEventListener('click',lastMusic);//切换到下一首歌document.getElementById('btn-next').addEventListener('click',nextMusic);var now = 0;var total = 0;player.addEventListener('loadeddata',function () {now = player.duration;total = player.duration;console.log(now,total);});//设置进度条拖动(function(boxArea,bar) {var press = false;//鼠标按下监听(设置进度条区域)document.querySelector(boxArea,bar).addEventListener('mousedown',function (e) {//解除播放器的移动player.removeEventListener('timeupdate',updateProgress);//设置按下事件move(e);});//鼠标松开监听(设置进度条区域)document.querySelector(boxArea,bar).addEventListener('mouseup',function () {player.currentTime = now;player.addEventListener('timeupdate',updateProgress);press = false;});//鼠标拖动事件document.querySelector(boxArea,bar).addEventListener('mousemove',function (e) {if(press){move(e);}});//设置按下事件时改变位置事件function move(e) {//点击事件和左边缘的距离var eventLeft = e.offsetX;document.querySelector(bar).style.width = eventLeft+'px';//进度条的长度var w = window.getComputedStyle(document.getElementById('jdt')).width;//设置百分比now = eventLeft/parseInt(w) * total;press = true;}})('.play-length','.progress-control')
css
index.css
.top{position: fixed;top: 0;left: 0;right: 0;height: 60px;background-color: #22425a;}.play-bottom{position: absolute;left: 0;right: 0;bottom: 0;height: 80px;background-color: #22425a;}.play-main{position: absolute;top:60px;left: 0;right: 0;bottom: 80px;background-color: #fff;}.container{position: relative;height: 100%;}.logo{float:left;width: 180px;height: 100%;padding-left:16px;}.logo h1{width: 164px;height: 100%;background: url('../imgs/xiami.png') no-repeat 0 50%;}.logo h1 a{display: block;width:100%;height: 100%;}.search{position: absolute;top:15px;left:240px;float: left;height: 30px;width:230px;border-radius: 15px;background-color: #aaaaaa;overflow: hidden;}.icono-search{position: absolute;top:8px;left:9px;display: block;width: 16px;height:16px;background: url('../imgs/search.png');}.search input{position: absolute;left: 35px;height: 100%;width:180px;border:0;color:#fff;background: transparent;}.main-wrap{display: flex;}.left-side,.right-side{position: relative;float:left;flex: 1;min-width: 190px;}.list{float:left;flex: 6;padding:10px;min-width: 380px;}.list table{width: 100%;border-collapse: collapse;}.tb-head{color:rgba(0,0,0,0.3);}.tb-space{width:100px;}.tb-head th{border-color: rgba(0,0,0,0.1) !important;}.list{overflow: auto;}::-webkit-scrollbar{width: 5px;height: 5px;background-color: transparent;}::-webkit-scrollbar-thumb{width: 5px;background-color: rgba(0,0,0,0.1);border-radius:5px;}.list table tr th,.list table tr td{position: relative;padding: 10px 0;margin:0;border-bottom: 1px solid rgba(0,0,0,0.05);font-family: "微软雅黑";font-size: 10pt;text-align: left;white-space: nowrap;overflow: hidden;}.music-item a{color:#000;text-decoration: none;}.music-item a:hover{text-decoration: underline;}.music-item:hover{background-color: #eee;}/* 左侧菜单部分 */.icon-font{position: absolute;top:9px;display: inline-block;width: 18px;height: 18px;background-size: 100% 100%;}.icon-playing{background: url('../imgs/icon-playing.png') no-repeat;}.icon-recommend{background: url('../imgs/icon-recommend.png') no-repeat;}.icon-history{background: url('../imgs/icon-history.png') no-repeat;}.icon-rank{background: url('../imgs/icon-rank.png') no-repeat;}.icon-fav{background: url('../imgs/icon-fav.png') no-repeat;}.side-menu{position: absolute;top:10px;left: 10px;right:10px;bottom: 10px;}.side-menu a{position: relative;height: 36px;padding-left:10px;border-radius: 5px;line-height: 36px;}.side-menu a:hover{background-color: #eee;}.active{background-color: #ddd;}/* 右侧歌曲信息样式 */.album-cover{position: relative;top:20px;bottom: 20px;text-align: center;}.album-lrc{position: absolute;left: 0;right: 0;top:225px;bottom: 0;overflow: auto;}.album-lrc ul{text-align: center;font-size: 12px;}.lrc-line{padding: 4px;text-align: center;}/*底部歌曲控制部分*/.play-control{position: absolute;left: 0;height: 100%;width: 290px;text-align: center;}.play-control a{position: relative;display: inline-block;top:24px;width:32px;height: 32px;margin-left:32px;background-color: transparent;}.btn-play{background: url('../imgs/play-default.png') no-repeat;cursor: pointer;}.btn-play:hover{background: url('../imgs/play-active.png') no-repeat;}.btn-pause{background: url('../imgs/pause-default.png') no-repeat;cursor: pointer;}.btn-pause:hover{background: url('../imgs/pause-active.png') no-repeat;}.btn-pre{background: url('../imgs/pre-default.png') no-repeat;cursor: pointer;}.btn-pre:hover{background: url('../imgs/pre-active.png') no-repeat;}.btn-next{background: url('../imgs/next-default.png') no-repeat;cursor: pointer;}.btn-next:hover{background: url('../imgs/next-active.png') no-repeat;}/*播放方式*/.play-state{position: absolute;right: 30px;top:15px;bottom: 20px;height: 40px;width: 40px;}/* 声音控制 */.play-volume{position: absolute;right: 0;top:0;bottom: 0;height: 100%;width: 290px;text-align: center;}.volume-icon{position: absolute;left:50px;top: 30px;width: 20px;height: 20px;background: url('../imgs/volume-default.png') no-repeat;cursor: pointer;}.volume-icon:hover{background: url('../imgs/volume-active.png') no-repeat;}.volume-wrap{position: absolute;top: 38px;left:75px;width:100px;height: 3px;cursor:pointer;}.volume-panel{position: absolute;top: 0;left: 0;right:0;bottom:0;background: rgba(255,255,255,0.2);}.volume-control{position: absolute;top: 0;left:0;width:30px;height: 3px;background: #fff;}.dot{position: absolute;display: inline-block;right: 0;top: -3px;height: 10px;width: 10px;border-radius: 5px;background: #fff;}/* 进度控制 */.progress-info{position: absolute;left:290px;right: 290px;top: 0;bottom: 0;min-width:330px;}.play-info{position: absolute;top:20px;width: 100%;height: 18px;line-height: 18px;}.play-info a{color:#fff;}.play-info a:hover{text-decoration: underline;}.play-length{position: absolute;top: 43px;width: 100%;height: 20px;font-size:10px;color:rgba(255,255,255,0.4);}.play-current{position: absolute;left:0;width: 40px;}.play-duration{position: absolute;right: 0;width: 40px;text-align: right;}.play-progress{position: absolute;top:5px;left: 40px;right: 40px;height: 3px;cursor:pointer;}.play-panel{position: absolute;z-index: 1;top: 0;left: 0;right:0;bottom:0;width: 100%;background: rgba(255,255,255,0.2);}.progress-control{position: absolute;z-index: 2;top: 0;left:0;width:0%;height: 3px;background: aqua;}
reset.css
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding: 0;}body {font-family: Arial, sans-serif;}input,a,textarea{outline: none;}ul,ol{list-style: none;}a{display: block;color:rgb(152,152,152);text-decoration: none;font-size: 14px;}
最后实现样式：
（实现自动切歌，进度条拖动，切歌，停歌，循环播放和随机循环）
