用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();
}
效果显示图
下一首的效果图