input加progress组合写进度条的简单音乐播放器实现

主要解释一下实现图中的音量进度条效果。
仅供大家参考，勿喷。
查阅了很多资料看了挺多人的代码，但是ajax对于我这个新手小白来说，可能还难以理解，因此分享一个本小白的方法。

本人编程小白，分享实现的方法可能很蠢，如有大神路过，勿见怪。

在html部分
首先，先写标签导入音频文件。
html

<audio src="">

再写样式。
方法一：
可直接用ie默认的input设置type=“range”。ie默认就是这个样式。
方法二：
使用三个div块分别设置css并进行监听div进行编写这个进度条（这个方法在其他博客里有很多人用，这里就不一一赘述）
方法三：
适用谷歌浏览器。
谷歌浏览器的默认样式就比较简单，因此这时候input设置type="range"需要通过css调整，设置thumb滑块和track轨道，但也无法将已完成的进度填充成蓝色。
为了实现这个效果，我使用input加progress组合写进度条那么在不使用addeventlistern或者ajax等等的监听效果的情况下，叠加使用一个progress标签，将input.value的值赋值给progress进行效果填充。然后将input隐藏，在页面仅仅显示progress进度条。
接着，必须让进度条实现调节更新。
这里使用的方法是，控件音量调节可以先使用οninput=“某函数（）"实时获取input的value值，然后将他赋值给audio.volume达到调节效果，值得注意的是音量调节值一般是0到1之间。因此，应该吧该value缩小100倍赋值否则会出错。
最后完善图中实现前一首和后一首的操作函数。
实现这个效果需要先获取目录，在利用onclick和js函数获取歌名实现跳转。因为改效果不是本文重点要说的，代码中我只简单写了一个ul目录进行实现这个效果。
话不多说，代码奉上：
css

#img1{
   width:300px;height:300px;overflow:hidden;border-radius:100%;}
#im div{
   position:relative;float:left;left:50px;cursor:pointer;}
#im img{
   height:50px;height:50px;}
#context{
   display:none;}/*隐藏播放列表*/
/*.all{width:300px;height:50px;position:relative;}
.bar{width:300px;height:10px;border-radius:10%;background-color:#CCC;cursor:posinter;}
.box{width:10px;height:10px;background-color:#000;cursor:posinter;transition:left 0.1s linear 0s;}
*/input[type=range]{
   -webkit-appearance:none;width:300px;height:10px;cursor:pointer;/*将鼠标图标改变*/
/*background:-webkit-linear-gradient(left,black,gray);*//*渐变条颜色*/}
input[type=range]::-webkit-slider-thumb{
   -webkit-appearance:none;}
input[type=range]::-webkit-slider-runnable-track{
   height:10px;background-color:#FFF;/*将input轨道设置为白色隐藏于页面中*//*opacity:0;*/}/*滑动轨道*/
input[type=range]:focus{
   outline:none;}/*取消原始边框*/
input[type=range]::-webkit-slider-thumb{
   -webkit-appearance:none;margin-top:30px;/*使滑块偏移量到达progress轨道*/
height:10px;width:10px;background