今天我们要实现的这个播放页面主要是通过audio标来实现，然后上一首、暂停等按钮时通过字体图标来实现的。
先看一下最终的效果：
HTML部分：
这里最外层用来两个盒子photo和words，分别用来存放图片和歌词。然后左边盒子里面放了两个div标记，分别用来存放图片和图标。这里图标是用的子图图标来实现的。然后歌词部分是直接放在div里面的。
<body><!-- 图片 --><div id="photo"><center><div id="photo2"><i class="fa fa-angle-double-right" aria-hidden="true" id='point' οnclick="move()"></i></div><div id="logo1"><audio src="music/1.mp3" autoplay="autoplay" id="music">当前浏览器不支持audio</audio><!-- 4个按钮 --><button type="button"><i class="fa fa-heart" aria-hidden="true"></i>喜欢</button><button type="button"><i class="fa fa-bookmark-o" aria-hidden="true"></i>收藏</button><button type="button"><i class="fa fa-download" aria-hidden="true"></i>下载</button><button type="button"><i class="fa fa-share-square-o" aria-hidden="true"></i>分享</button><br><br><!-- 进度条 --><input type="range" value="10"/><br><!-- 播放按钮图标 --><i class="fa fa-random" id="volume" aria-hidden="true"></i> <i class="fa fa-step-forward" id="forward" aria-hidden="true" οnclick="last()"></i> <!-- fa fa-play-circle --><i class="fa fa-play-circle" id="playing" aria-hidden="true" οnclick="playing()"></i> <i class="fa fa-step-backward" id="backward" aria-hidden="true" οnclick="next()"></i> <i class="fa fa-volume-up" id="random" aria-hidden="true"></i> </div></center></div><!-- 歌词 --><div id="words">歌词……div><!-- 引入Js --><script type="text/javascript" src="player.js"></script></body>CSS部分：
这一部分主要是设置了盒子的宽高、位置及字体。背景等。
#photo{width: 550px;height: 600px;background-color: #191970;
}
#words{width: 450px;height: 600px;background-color: #191970;text-align: center;color: white;line-height: 25px;
}
#photo,#words{float: left;}
#photo2{width: 350px;height: 350px;margin-top: 50px;background-image: url(img/1.jpg);background-size: contain;border: black 10px solid;border-radius: 50%;}
button{width: 80px;height: 30px;margin-top: 30px;margin-left: 20px;border: darkgray 1px solid;border-radius: 5px;color: dimgray;
}
button:hover{color: black;}
#backward,#forward,#random,#volume{font-size: 30px;color: white;
}
#playing{font-size: 45px;color: white;
}
#point{font-size:50px;margin-top:140px;margin-left:380px;
}JS部分：
这里主要是实现了播放、暂停、下一首、上一首和歌词的显示隐藏等效果。
播放/暂停：
//先获取播放按钮
var Play=window.document.getElementById('music');function playing(){var Pause=document.getElementById('playing');//判断是否在播放，如果在播放则点击时暂停，并且该图标的类名变为暂停样式。反之亦然。if(Play.paused){Play.play();Pause.className='fa fa-pause-circle';}else{Play.pause();Pause.className='fa fa-play-circle';}}上一首/下一首：
这里是通过数组以及索引 i来实现他的路径的赋值，实现切换的效果。
let root="music/";let songs=['1.mp3','2.mp3','3.mp3'];let i=0;var Pic=document.getElementById('photo2');//上一首function last(){let song;i>0?--i:i=songs.length-1;Play.src = root+songs[i];Play.play();}//下一首function next(){if (++i>songs.length-1) {i=0}let song=songs[i];Play.src=root+song;Play.play();}歌词显示/隐藏：
这里的效果是通过点击图标是盒子隐藏，再点击时盒子你隐藏，主要是通过display属性来实现的。
//歌词显示隐藏function move(){var Odiv=document.getElementById('words');var Point=document.getElementById('point');//通过类名来判断隐藏还是显示的效果if(Point.className=='fa fa-angle-double-right'){Odiv.style.display='none';Point.className='fa fa-angle-double-left';}else if(Point.className=='fa fa-angle-double-left'){Odiv.style.display='block';Point.className='fa fa-angle-double-right';}}
