用H5和js技术实现一个音乐播放器

用H5和js技术实现一个音乐播放器

直接上代码吧，几乎都有备注，希望你们能看得懂

首先css的代码

#CDimage{
	width:260px;			
}
//3d的一个效果
#CDimage img{
	border-radius:50%;
}
#CDimage #voice{
	text-align:center;
	}
#CDimage #music{
	text-align:center;
	}

html代码

简单音乐播放器








当前正在播放: 月光下的云海

js代码

var music = document.getElementById("audio");
function toggleMusic() {
     if (music.paused) {
          music.play();//播放音乐
     } else {
          music.pause();//暂停音乐
     }
}
//设置音量
function setVolume() {
    music.volume = volume.value;
}
//歌单，把自己music文件夹下的歌曲名字对于放入这里就可以实现更新

var music1 = new Array();
	music1 = ["月光下的云海","無力P - Kyrie","Xeuphoria - Coda"];//歌单
	var num = 0;
	
	
	var name = document.getElementById("title");


//上一首
function lastMusic() {
			num = (num +2)%3;
		 	music.src ="music/"+music1[num]+".mp3";
			title.innerHTML = music1[num];
			music.play();
		
	}
//下一首

function nextMusic(){
			num = (num +1)%3;
		 	audio.src =  "music/"+music1[num]+".mp3";
			title.innerHTML = music1[num];
			music.play();
	}

效果显示图

下一首的效果图