使用Web打造自己專屬的音樂播放器
目前為止我在勞動力發展署高屏澎東分署上課差不多兩個多月了，課程進度其實挺緊湊的。同時要學網頁設計、行動裝置APP、資料庫管理、系統分析，真的很不容易！這督促我要趕緊跟上老師上課的節奏，才不會跟不上進度。最近在上前端網頁設計時老師帶領大家用設計一個音樂撥放器，可以放自己喜歡的歌曲（我選擇小時候喜歡聽的Wide Eye系列兒童歌曲），並且有播放/暫停、停止、上一首、快退、快進、下一首、靜音、單曲循環、全曲循環、隨意播放、調整音量等功能。其畫面如下：
設計畫面
00:00/00:00
這個音樂播放器的外觀是用HTML和CSS設計的，功能則是用JavaScript設計的。以下是我的製作過程：
音樂和圖片
程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Player</title>
<style>
/*CSS*/
#conPanel {
width: 60%;
border: 10px solid #5c5c5c;
box-shadow: 8px 8px 8px black;
text-align: center;
margin: auto;
border-radius: 10px;
}
#conPanel > span {
font-family: Webdings;
font-size: 24pt;
cursor: pointer;
box-shadow: 3px 3px 2px black;
border: 2px groove;
}
#vol {
width: 300px;
}
#progress {
background-color: #4800ff;
height: 5px;
width: 0;
}
#settime {
background-color: lightgray;
height: 5px;
cursor: pointer;
}
#bottom {
background-color: black;
}
#info {
color: yellow;
}
#duration, #info2 {
color: #00ff21;
}
#music {
width: 100%;
background-color: black;
color: #00ff21;
font-size: 14pt;
}
#volume {
color: yellow;
background-color: darkslategrey;
}
.line {
width: 100%;
}
</style>
</head>
<body>
<!--HTML-->
<audio id="audio">
<source id="s" src="Music/AVSEQ01.mp3" type="audio/mpeg" title="Little Hoot Theme Song" />
</audio>
<div id="conPanel">
<select id="music">
<option value="Music/AVSEQ01.mp3">Wide Eye Theme Song</option>
<option value="Music/AVSEQ02.mp3">Hunt the Egg</option>
<option value="Music/AVSEQ03.mp3">My Bits</option>
<option value="Music/AVSEQ04.mp3">Dawn Chorus</option>
<option value="Music/AVSEQ05.mp3">Comic Colours</option>
<option value="Music/AVSEQ07.mp3">Follow My Leader</option>
<option value="Music/AVSEQ09.mp3">Lullaby</option>
<option value="Music/AVSEQ011.mp3">Friends</option>
</select>
<img class="line" src="images/line1.gif" />
<br /><br />
<span id="play">4</span>
<span id="stop"><</span>
<span id="prevsong">9</span>
<span id="prevtime">7</span>
<span id="nexttime">8</span>
<span id="nextsong">:</span>
<span id="muted">V</span>
<span id="loop">q</span>
<span id="allloop">`</span>
<span id="random">s</span>
<br /><br />
<div id="settime">
<div id="progress"></div>
</div>
<img class="line" src="images/line2.gif" />
<div id="volume">
<label for="vol">Volume：</label>
<input id="vol" type="range" max="100" min="0" value="50" />
</div>
<img class="line" src="images/line1.gif" />
<div id="bottom">
<div id="duration">
00:00/00:00
</div>
<span id="info2"></span>
<marquee id="info" width="100%">請按播放鍵~!!</marquee>
</div>
</div>
<script>
//JavaScript
var play = document.getElementById("play");
var stop = document.getElementById("stop");
var vol = document.getElementById("vol");
var audio = document.getElementById("audio");
var s = document.getElementById("s");
var info = document.getElementById("info");
var music = document.getElementById("music");
var prevtime = document.getElementById("prevtime");
var nexttime = document.getElementById("nexttime");
var prevsong = document.getElementById("prevsong");
var nextsong = document.getElementById("nextsong");
var muted = document.getElementById("muted");
var duration = document.getElementById("duration");
var progress = document.getElementById("progress");
var settime = document.getElementById("settime");
var loop = document.getElementById("loop");
var info2 = document.getElementById("info2");
var random = document.getElementById("random");
var allloop = document.getElementById("allloop");
audio.volume = vol.value / 100;
play.addEventListener("click", PlaySong);
vol.addEventListener('change', VolumeChange);
stop.addEventListener('click', StopSong);
music.addEventListener('change', SongSelect);
prevtime.addEventListener('click', function () { TimeChange(false) });
nexttime.addEventListener('click', function () { TimeChange(true) });
prevsong.addEventListener('click', function () { SongChange(false) });
nextsong.addEventListener('click', function () { SongChange(true) });
muted.addEventListener('click', SetMuted);
audio.addEventListener("play", getDuration);
loop.addEventListener("click", loopSong);
random.addEventListener("click", randomSong);
allloop.addEventListener("click", allloopSong);
//全曲循環
function allloopSong() {
if (info2.innerText != "全曲循環") {
audio.loop = false;
info2.innerText = "全曲循環";
}
else {
info2.innerText = "";
}
}
//隨機播放
function randomSong() {
if (info2.innerText != "隨機播放") {
audio.loop = false;
info2.innerText = "隨機播放"
}
else {
info2.innerText = ""
}
}
//單曲循環播放
function loopSong() {
if (info2.innerText != "單曲循環") {
audio.loop = true;
info2.innerText = "單曲循環"
}
else {
audio.loop = false;
info2.innerText = ""
}
}
//用進度bar跳至指定時間
settime.addEventListener("click", function (evnt) {
var a = evnt.offsetX / 400;
audio.currentTime = audio.duration * a;
});
//取得播放時間進度
function getDuration() {
durationTime = formatSecond(audio.duration);
currentTime = formatSecond(audio.currentTime);
duration.innerText = currentTime + "/" + durationTime;
progress.style.width = Math.floor(audio.currentTime / audio.duration * 100) + "%";
if (audio.currentTime <= audio.duration)
setTimeout("getDuration()", "1000");
if (audio.duration == audio.currentTime) {
if (info2.innerText == "隨機播放") {
var r = Math.floor(Math.random() * music.options.length)
s.src = music.options[r].value;
s.title = music.options[r].text;
music.options[r].selected = true;
audio.load();
btnDicision();
}
else {
if (music.selectedIndex == music.options.length - 1) {
if (info2.innerText == "全曲循環") {
music.selectedIndex = 0;
btnDicision();
}
else
StopSong();
}
else {
SongChange(true);
}
}
}
}
//將秒轉成時分秒
function formatSecond(secs) {
var h = Math.floor(secs / 3600);
var min = Math.floor((secs - (h * 3600)) / 60);
var sec = parseInt(secs - (h * 3600) - (min * 60));
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;
return min + ":" + sec;
}
//靜音功能
function SetMuted() {
if (muted.innerText == "V") {
audio.muted = true;
muted.innerText = "U";
}
else {
audio.muted = false;
muted.innerText = "V";
}
}
//上一曲下一曲
function SongChange(boolNextPrev) {
if (boolNextPrev) {
index = music.selectedIndex + 1;
}
else {
index = music.selectedIndex - 1;
}
s.src = music.options[index].value;
s.title = music.options[index].text;
music.options[index].selected = true;
audio.load();
btnDicision();
}
//快轉鈕
function TimeChange(boolNextPrev) {
if (boolNextPrev)
audio.currentTime += 10;
else
audio.currentTime -= 10;
}
//音樂選擇
function SongSelect() {
s.src = music.options[music.selectedIndex].value;
s.title = music.options[music.selectedIndex].text;
audio.load();
btnDicision();
}
//判斷換歌曲時是否直接播放
function btnDicision() {
if (play.innerText == ";") {
play.innerText = "4";
PlaySong();
}
}
//音樂播放
function PlaySong() {
if (play.innerText == "4") {
audio.play();
info.innerText = "現正播放:" + s.title;
play.innerText = ";";
}
else {
audio.pause();
info.innerText = "音樂暫停";
play.innerText = "4";
}
}
//調整音量
function VolumeChange() {
audio.volume = vol.value / 100;
}
//音樂停止播放
function StopSong() {
audio.pause();
audio.currentTime = 0;
play.innerText = "4";
info.innerText = "音樂停止播放~~~~";
}
</script>
</body>
</html>