js简单开发的音乐播放器

1.此项以js为基础，开发的一个简单的音乐播放器

（1）首先根据下面的文件创建一个文件夹

 （2）css里面是main.css

img{
	width: 790px;
	height: 400px;
}
ul{
	margin-top: -170px;
	z-index: 2;
	margin-left: 300px;
}
.musicBox {
	font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
	background-color: #212121;
    /*设置边框的弧度值，为3px*/
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
    /*阴影*/
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	-webkit-box-shadow: 10px 10px 25px #ccc;
	-moz-box-shadow: 10px 10px 25px #ccc;
	box-shadow: 10px 10px 25px #ccc;
    /*透明度*/
	opacity: 0.9;
    /*基本性质*/
	padding: 2px 5px;
	position: absolute;
	z-index: 9;
	border-width: 1px;
	border-style: solid;
	border-color: #488BF0 #488BF0 #488BF0 #488BF0;
	width: 775px;
	height: 40px;
}

.leftControl {
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) left 2px no-repeat;
	margin-right: 8px;
	margin-left: 10px;
}

.leftControl:hover {
	background: url(../images/sk-dark.png) left -30px no-repeat;
}

.mainControl {
	width: 25px;
	padding: 10px 15px 5px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) -80px -130px no-repeat;
}

.mainControl:hover {
	background: url(../images/sk-dark.png) -80px -166px no-repeat;
}

.rightControl {
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) left -62px no-repeat;
	margin-right: 8px;
}

.rightControl:hover {
	background: url(../images/sk-dark.png) left -93px no-repeat;
}

.processControl {
	width: 500px;
	padding: 5px 10px 10px 10px;
	float: left;
	height: 20px;
	margin-right: 12px;
	color: #ffffff;
}

.processControl .songName {
	float: left;
}

.processControl .songTime {
	float: right;
}

.processControl .process {
	width: 500px;
	float: left;
	height: 2px;
	cursor: pointer;
	background-color: #000000;
	margin-top: 7px;
}

.processControl .processYet {
	width: 0px;
	position: absolute;
	height: 2px;
	left: 131px;
	top: 30px;
	cursor: pointer;
	background-color: #7A8093;
}

.voiceEmp {
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 17px;
	background: url(../images/sk-dark.png) -28px -180px no-repeat;
	margin-right: 2px;
}

.voiceEmp:hover {
	background: url(../images/sk-dark.png) -28px -212px no-repeat;
}

.voidProcess {
	width: 66px;
	height: 2px;
	cursor: pointer;
	background-color: #000;
	float: left;
	margin-top: 19px;
	margin-right: 6px;
}

.voidProcessYet {
	width: 66px;
	position: absolute;
	height: 2px;
	left: 675px;
	top: 21px;
	cursor: pointer;
	background-color: #7A8093;
}

.voiceFull {
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 17px;
	background: url(../images/sk-dark.png) -28px -116px no-repeat;
}

.voiceFull:hover {
	background: url(../images/sk-dark.png) -28px -148px no-repeat;
}

.stopControl {
	width: 14px;
	padding: 10px 10px 5px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) -50px -130px no-repeat;
	margin-right: 16px;
}

.stopControl:hover {
	background: url(../images/sk-dark.png) -50px -165px no-repeat;
}

(3)images里面有两张图，分别是

 

 （4）js文件夹内容

//判断是否有音频元素
let mysong;
if(window.HTMLAudioElement){
    //获取音频元素
    mysong = document.querySelector("#mysong")
}

let mainControl = document.querySelector("#mainControl");//播放
let stopControl = document.querySelector("#stopControl");//暂停
let leftControl = document.querySelector(".leftControl");//快退
let rightControl = document.querySelector(".rightControl");//快进
let voiceEmp = document.querySelector(".voiceEmp")//静音
let voiceFull = document.querySelector(".voiceFull")//最大音量


mainControl.addEventListener("click",function(){
    //播放音频
    mysong.play();
    mainControl.style.display = "none";//隐藏暂停按钮
    stopControl.style.display = "";//显示我们的暂停按钮
    timeSpan()
});

stopControl.addEventListener("click",function(){
    //暂停音频
    mysong.pause();
    mainControl.style.display = "";//隐藏播放按钮
    stopControl.style.display = "none";//显示我们的播放按钮
    clearInterval(window.setInte)
});

leftControl.addEventListener("click",function(){
    mysong.currentTime -=10.0;//后退
})

rightControl.addEventListener("click",function(){
    mysong.currentTime +=10.0;
})

voiceEmp.addEventListener("click",function(){
    mysong.volume=0;
})

voiceFull.addEventListener("click",function(){
    mysong.volume=1;
})

function timeDispose(time){
    let minutes = parseInt( time/60);
    let seconds = parseInt( time%60);
    minutes = minutes>10?minutes:"0"+minutes;
    seconds =  seconds >10? seconds :"0"+ seconds ;
    return minutes + ":" + seconds;
}



function timeSpan(){
    window.setInte= setInterval(function(){
        //播放时间更新
        let currentTime = mysong.currentTime;
        let duration = mysong.duration;
        let songTime = document.querySelector("#songTime");
        songTime.innerHTML = timeDispose(currentTime)+"|"+timeDispose(duration);
        let process = getwidth("#process");
        let processYet =(currentTime/duration)*process//当前长度
        document.querySelector("#processYet").style.width = processYet+"px"
        console.log(1)
    },1000)
}

function getwidth(domId){
    let dom = document.querySelector(domId).style.width//总长度
    let domInt = dom.split('px')[0];
    return domInt
}

function audioProcess(){
    //音乐播放器
    let musicBoxOffset = document.querySelector("#musicBox").offsetLeft
    //进度条左偏移量
    let processOffset = document.querySelector("#process").offsetLeft;
    console.log("processOffset:"+processOffset)
    //进度条开始坐标
    let processStart = musicBoxOffset+processOffset;
    //已经播放的长度
    let processLength = event.clientX-processStart;
    //时间总长度
    let processAll=getwidth("#process")
    // let audio = document.querySelector("#mysong");
    let currentTime = (processLength/processAll)*mysong.duration;
    mysong.currentTime=currentTime;
    document.querySelector("#processYet").style.width=processLength+"px";
}

var music1=new Array();
    music1=['爱要坦荡荡','北京北京','感恩的心','离不开你','散场的拥抱','偷偷的爱'];
    var num = 0;
    var name = document.getElementById("songName");
   
//上一首
function lastMusic(){
    num=(num+5)%6;
    var mysong = document.getElementById("mysong")
    mysong.src="music/"+music1[num]+".mp3"
    var songName = document.getElementById("songName");
    songName.innerHTML=music1[num]
    document.getElementsByTagName("li")[(num+1)>5?0:(num+1)].style.color=""
    document.getElementsByTagName("li")[num].style.color="red"
    mysong.play()
    document.getElementById("mainControl").style.display="none"
    document.getElementById("stopControl").style.display=""
}
//下一首
function nextMusic(){
    num=(num+1)%6;
    var mysong = document.getElementById("mysong")
    mysong.src="music/"+music1[num]+".mp3"
    var songName = document.getElementById("songName");
    songName.innerHTML=music1[num]
    document.getElementsByTagName("li")[num].style.color="red"
    document.getElementsByTagName("li")[(num-1)<5?0:(num-1)].style.color=""
    mysong.play()
    document.getElementById("stopControl").style.display=""
    document.getElementById("mainControl").style.display="none"
}

（5）music中

(6)5-4.html

    
    
    
    
    



    
    

        
 爱要坦荡荡
        
北京北京
        
感恩的心
        
离不开你
        
散场的拥抱
        
偷偷的爱
    
    
    上一首
    下一首

    
    

    

    

    

    

        
爱要坦荡荡
        
00:00 | 00:00
        

        

    
    

    

    

    

最终结果