本人大专生一枚，这个也是本人作业之一，打算从此开始记录自己的成长
本播放器功能主要有：
播放暂停，音乐进度，音乐进度计时，音量调节，快进退，重播，切换歌曲（本地歌曲）
拖拉进度条播放（有时需要点多两次目标位置，问题未知，猜测是定时调用冲突）
主用函数：
play(); pause(); paused() ; currentTime属性 duration属性 函数属性功能都在注释中有，
本主就不再赘述
更多关于audio组件的方法及函数
PS：本播放器尚有bug ，在win10 Edge 及火狐中功能皆可实现；
在ie浏览器中音量不可调，谷歌浏览器播放器进度不可调，且歌曲无法切换；
暂时只发现这些bug，如有其它bug欢迎提出
另外本主不懂如何上传音乐文件及代码文件只好贴出来，较长----所以音乐资源也需要各位自己下载啦
图图：
目录：
Css代码
#border{height: auto;width: 60%;border: solid 2px;margin: auto 20% ;text-align: center;padding: 3%;}
HTML代码
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>music</title><link rel="stylesheet" href="css/music.css" /></head><body><!--作者：lin时间：-03-19描述：第一博--><!--显示播放器选择文件1网络文件（暂未实现）2本地文件点击播放进度条读秒点击重新开始初始化文件、进度条、读秒滑动进度条播放点击暂停停止暂停文件、进度条、读秒+--><!--bug:无法调整进度，浏览器,使用source会出错，js使用全局变量出错--><!--播放暂停--><!--选择文件-->
<aside id="border">选择播放文件<br />
<ul id="music"><li> <input type="button" value="Here with you" id="here" οnclick="here()"/> </li><audio id="srchere" src="music/HereWithYou.mp3"></audio><li> <input type="button" value="Far away from home" id="far" οnclick="far()"/> </li><audio id="srcfar" src="music/FarAwayFromHome.mp3" ></audio><li> <input type="button" value="New Divide" id="far" οnclick="divide()"/> </li><audio id="srcDivide" src="music/NewDivide.mp3"></audio></ul></aside><aside id="border"><input type="button" value="重播" id="restart" οnclick="restart();" /><input type="button" value="后退10s" οnclick="retreat()"/><input type="range" id="progress" min="0" step="1" οnclick="progress(this.value)" /><input type="button" value="快进10s" οnclick="advance()"/><!--音量 --><input type="button" id="lowish" value="音量-" οnclick="lowish()" /><input type="range" id="sound" οninput="sound(this.value)" min="0" max="100" value="30" /><label id="volume">30</label><input type="button" id="loud" value="音量+" οnclick="loud()" /><label id="hint"></label><!--音量 --><label id="minute"></label>:<label id="second"></label> Time<input type="button" id="isOk" value="播放" οnclick="play()" /></aside><script type="text/javascript" src="js/music.js"></script></body></html>JS代码
var mVa = 1;var orderary = [0, 1, 2]; //<!--数组创建方法2 var arry = new Array(1,3); var arr = new Array(3); arr[0] = 1;-->var idary = ["srchere", "srcfar", "srcDivide"];//document.getElementById()只能得到或使用而不能反向设置它的值;//audio.duration 获取总时长//setInterval定时调用var s = setInterval("myProgress()", 1000); //每秒调用一次，myProgress//重新开始function restart() {document.getElementById(idCheck()).currentTime = 0.0; //设置音频位置，初始化}//快进function advance() {var t = document.getElementById(idCheck()).currentTime + 10;if( t > document.getElementById(idCheck()).duration ) {alert("超过最大值无法前进");} else {document.getElementById(idCheck()).currentTime = document.getElementById(idCheck()).currentTime + 10;}}//后退function retreat() {var t = document.getElementById(idCheck()).currentTime - 10;if( t < 0 ) {alert("超过最小值无法前进");} else {document.getElementById(idCheck()).currentTime = t;}}//改变播放时间function progress(pVal){document.getElementById(idCheck()).currentTime = pVal; //根据range返回值改变进度}//进度条function myProgress() {var cTime = document.getElementById(idCheck()).currentTime; //获取当前播放时间document.getElementById("minute").innerHTML = parseInt(parseInt(cTime) / 60); //根据CTime进行读秒document.getElementById("second").innerHTML = parseInt(parseInt(cTime) % 60);document.getElementById("progress").value = parseInt(cTime); //设置html进度条返回值}//播放暂停function play() {if(document.getElementById(idCheck()).paused) { //判断是否暂停document.getElementById(idCheck()).play(); //audio.play 原生播放方法document.getElementById("isOk").value = "暂停";} else {document.getElementById(idCheck()).pause(); //audio.pause 原生暂停方法document.getElementById("isOk").value = "播放";}document.getElementById("progress").max = document.getElementById(idCheck()).duration; //设置最大值myProgress();//将一个方法放到一个onclick方法里即则说明点击之后执行click再执行这个myProgress，即myProgress只能再click之后执行//如果再歌曲audio初始化前调用则出错}//音乐文件function here() {document.getElementById(idCheck()).pause(); //使用var id 时会出错，原因未知mVa = 0play();}function far() {document.getElementById(idCheck()).pause();mVa = 1;play();}function divide() {document.getElementById(idCheck()).pause();mVa = 2;play();}//音量function sound(vol) {document.getElementById(idCheck()).volume = (vol / 100); //audio.volume 音量，值在0-1之间//用value值调节音量document.getElementById("volume").innerHTML = vol; //显示}function loud() {var v = parseInt(document.getElementById(idCheck()).volume * 100) + 1;if(v <= 100) {sound(v); //将改变volu的值并传给sound} else {document.getElementById("volume").innerHTML = "最大音量"; //提示}}function lowish() {var v = parseInt(document.getElementById(idCheck()).volume * 100) - 1;if(v >= 0) {sound(v);} else {document.getElementById("volume").innerHTML = "最小音量";}}//切换歌曲function idCheck() {for(var i = 0; i < orderary.length; i++) {if(mVa == orderary[i]) {return idary[i];}}}
第一次发博，知识浅薄、质量不良、出错难免，各位见谅
