主要解释一下实现图中的音量进度条效果。
仅供大家参考，勿喷。
查阅了很多资料看了挺多人的代码，但是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:#000;}/*input[type=range]:focus::-webkit-slider-runnable-track{background:#00F;}/*滑动轨道*/#mm{-webkit-appearance:none;width:300px;height:10px;display:block;}#mm::-webkit-progress-bar{background-color:#CCC;}/*设置progress进度条的背景样式*/#mm::-webkit-progress-value{background-color:#09F;}/*设置progress已完成部分的颜色*
js
var music=document.getElementById("music");//audiovar butto=document.getElementById("img3");//暂停播放控制按钮var context=document.getElementById("context");//歌名显示控制var ali=context.getElementsByTagName("li");//用于保存歌曲的路径的字符数组var string="file:///C:/Users/asus/Desktop/HTML5/%E5%AE%9E%E9%AA%8C6/";var mu=document.getElementById("mu");//音量设置function play(){//中间暂停播放控制按钮if(music.paused){music.play();//播放butto.src="image/pause.png";}else{music.pause();//暂停butto.src="image/play.png";}}//前一首function pre(){var i=0;for(i=0;i<ali.length;i++)//i为歌曲在list中的位置以0为起始值方便定位歌曲在数组中的第i位{/*alert(i);*/if(string+ali[i].innerHTML==music.src)//寻找匹配的歌曲，以得到i{/* alert('great');*/break;}}if(i==4)i--;if(i==0)alert('已经是列表第一首歌');else{music.src=ali[i-1].innerHTML;//将ali字符数组中的文字赋值给music的链接以得到新歌曲的路径/* alert(ali[i-1].innerHTML);*/one(i-1);play();}}//后一首function next(){var i=0;for(i=0;i<ali.length;i++){/*alert(i);*/if(string+ali[i].innerHTML==music.src){/* alert('great');*/break;}}console.log(i);if(i==4)i--;if(i==ali.length-1)alert('已经是最后一首歌');else{music.src=ali[i+1].innerHTML;one(i+1);play();}}function one(i){var ss=ali[i].innerHTML;/* alert(ss);*/ss=ss.substring(6);//从第六个字符开始截取/*alert(ss);*/mu.innerHTML='当前正在播放：'+ss;}//音量控制条function vo(){var r=document.getElementById("volume").value;var met=document.getElementById("mm");var s=r/100;music.volume=s.toFixed(2);//获取当前的range值赋予给播放器音量实现调节//调试console.log(r/100);console.log(music.volume);met.value=r;//将range赋予progress}//设置初始音量music.volume=0.6;
<body onLoad="one(0)"><h1>简单音乐播放器</h1><hr/><div ><img id="img1" src="image/sky.jpg"></div> <audio id="music" src="music/EndlessHorizon.mp3" >对不起，改浏览器不支持此音频格式</audio><!-- 音量控制滑动滑块--><!-- <div class="all"><p>当前位置</p><div class="bar"><div class="box"></div></div></div>--><p><input id="volume" type="range" min="0" max="100" value="60" oninput="vo()" ></p><!-- /* <meter id="mm" value="60" min="0" max="100"></meter>*/--><progress value="60" id="mm" min="0" max="100"></progress><br/><!-- 显示当前的播放曲目--><div id="mu">当前正在播放：</div> <br/> <!-- 控制暂停切换歌曲--><div id="im"><div><img id="img2" src="image/previous.png" onClick="pre()"> </div><div><img id="img3"src="image/play.png" onClick="play()"> </div><div><img id="img4" src="image/next.png" onClick="next()"></div></div><br/> <br/><div id="context"><ul><li>music/EndlessHorizon.mp3</li><li>music/Serenade.mp3</li><li>music/Serenade.ogg</li><li>music/月光下的云海.mp3</li></ul></div><!-- /*<script type="text/javascript" src="RangeSlider.js" ></script>这里可插入script文件*/--></body>
这里将html文件和图包，音乐列表放在同一个目录中：
若要在其他电脑上实现代码应该更改代码中的string字符串等等。
music文件目录：
写一个效果的方法千千万，有时候网络上很多的代码用的方法都很厉害，可我经常看不懂大神们写的方法，甚至还没接触过那些技术，那就干脆不完全照抄他们的方法，学习学习思路，再运用目前学习的知识，自己敲一敲代码，尽可能地多思考处理的方式，也会感觉很畅快的。
（仅供大家参考，勿喷）
