简易音乐播放器（js，html，css实现）

本人大专生一枚，这个也是本人作业之一，打算从此开始记录自己的成长

本播放器功能主要有：

播放暂停，音乐进度，音乐进度计时，音量调节，快进退，重播，切换歌曲（本地歌曲）

拖拉进度条播放（有时需要点多两次目标位置，问题未知，猜测是定时调用冲突）

主用函数：

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代码

                    

                      选择播放文件

30: Time

JS代码

var mVa = 1;
var orderary = [0, 1, 2]; //
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 = 0
	play();
}

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];
		}
	}
}

第一次发博，知识浅薄、质量不良、出错难免，各位见谅