<body><h1>音乐播放器的实现</h1><hr - html5吧

level 3

<body>
<h1>音乐播放器的实现</h1>
<hr>
<audio id="audio" src="music/理想三旬.mp3" controls></audio>
<div id="CDimage">
< img src="image/封面2.jpg">
</div>
<div id="updown">
<input id="volume" type="range" min="0" max="1" step="0.1" onchange="setVolume()" />
</div>
<div id="name">
当前正在播放:<span id="title">理想三旬</span>
</div>
<div id="button"><center>
<button id="lastMusic" onclick="lastMusic()">< img src="image/previous.png" width="50" height="50" /></button>
<button id="toggleBtn" onclick="toggleMusic()">< img src="image/play.png" width="50" height="50" /></button>
<button id="nextMusic" onclick="nextMusic()">< img src="image/next.png" width="50" height="50" /></button>
</div>
<script>
var music = document.getElementById("audio");
var Btn = document.getElementById("toggleBtn");
var title=document.getElementById("title");
function toggleMusic() {
if (music.paused) {
music.play();
Btn.innerHTML = '< img src="image/pause.png"width="50" height="50"/>';
} else {
music.pause()
Btn.innerHTML = '< img src="image/play.png"width="50" height="50"/>';
}
}
var name = document.getElementById("title");
var musiclist = new Array("music/理想三旬.mp3","music/小半.mp3","music/虚拟.mp3");
var titlelist=new Array("理想三旬", "小半", "虚拟");
var volume=document.getElementById("volume");
var num = 0;
function lastMusic() {
num = (num + 2) % 3;
music.src = musiclist[num];
title.innerHTMl = titlelist[num];
music.play();
}
function nextMusic() {
num = (num + 1) % 3;
music.src = musiclist[num];
title.innerHTMl = titlelist[num];
music.play();
}
function setVolume() {
music.volume = volume.value;
}
</script>
</body>
</html>