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

<div id="CDimage">
<h3>简单音乐播放器</h3>
<hr>
<br>
<img src="img/image.jpg" width="250" height="250">
<div id="voice">
<input id="volume" type="range"  min="0" max="1" step="0.1" onchange="setVolume()" />
</div>
<div id="music">
当前正在播放: <span id="title">月光下的云海</span>
<button id="lastMusic" onClick="lastMusic()"><img src="img/上一首.PNG" width="50" height="50"/></button>
<button id="toggleBtn" onclick="toggleMusic()"><img src="img/播放.PNG" width="50" height="50"/></button>
<button id="nextMusic" onClick="nextMusic()"><img src="img/下一首.PNG" width="50" height="50"/></button>

<audio id="audio" src="music/月光下的云海.mp3" preload>
</audio>
</div>
</div>

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();
	}

效果显示图

下一首的效果图