<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#ControlPanel{
width:600px;
margin:auto;
border:5px solid
}
#FuncBtn > span {
border: 2px solid;
box-shadow: 3px 3px 3px black;
cursor: pointer;
font-family: Webdings;
font-size: 24pt;
}
</style>
</head>
<body>
<audio id="audio">
<source id="song" src="music/nothing.mp3" type="audio/mpeg" />
</audio>
<div id="ControlPanel">
<select id="music">
<option value="music/nothing.mp3">Nothing Gonna Change My Love For You</option>
<option value="music/nomouth.mp3">真的不想嘴</option>
<option value="music/travel.mp3">帶你去旅行</option>
</select>
<div id="FuncBtn">
<span id="play">4</span>
<span id="pause">;</span>
<span id="stop"><</span>
</div>
<div id="InfoPanel">
<marquee id="info">請按播放鈕~~~~~</marquee>
</div>
</div>
<script>
var audio = document.getElementById("audio");
var play = document.getElementById("play");
var pause = document.getElementById("pause");
var stop = document.getElementById("stop");
var info = document.getElementById("info");
var music = document.getElementById("music");
var song = document.getElementById("song");
play.addEventListener("click", PlayMusic);
pause.addEventListener("click", PauseMusic);
stop.addEventListener("click", StopMusic);
music.addEventListener("change", ChangeMusic);
function PlayMusic() {
audio.play();
ShowStatus(1);
}
function PauseMusic() {
audio.pause();
ShowStatus(2);
}
function StopMusic() {
audio.pause();
audio.load();
ShowStatus(3);
}
function ChangeMusic() {
song.src = music.options[music.selectedIndex].value;
audio.load();
if (info.innerText =="音樂播放中")
PlayMusic();
}
function ShowStatus(status) {
var strStatus = "";
switch (status) {
case 1:
strStatus = "音樂播放中";
break;
case 2:
strStatus = "音樂暫停";
break;
case 3:
strStatus = "音樂停止";
break;
}
info.innerText = strStatus;
}
</script>
</body>
</html>
