C50108
Search…
2019/0222/前端Javascript musicplay、內聚力耦合率&伺服器權限

理出大概脈絡怎寫、堆疊寫上去,也不是想到寫什麼寫什麼
很多時候無語法錯誤,但有邏輯錯誤,或是其他行影響另一行造成錯誤
問題 : 按開始後換歌可以播放,但暫停或停止時換歌后不可播放
原因 : 功能耦合率太高(我們把播放跟暫停寫在一起,造成下拉式選單功能連動錯誤)

呼叫的不是另一個function而是直接呼叫瀏覽器audio功能
<!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);
if (play.innerText == "4")
play.innerText = ";";
else {
play.innerText = "4";
PauseMusic();
}
}
function PauseMusic() {
audio.pause();
ShowStatus(2);
}
function StopMusic() {
audio.pause();
audio.load();
play.innerText = "4";
ShowStatus(3);
}
function ChangeMusic() {
song.src = music.options[music.selectedIndex].value;
audio.load();
if (info.innerText == "音樂播放中")
audio.play();
//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>
Webdings 自行 7 8 為快轉符號

(其實快轉/倒轉跟暫停/停止方式很像所以可以考慮和體function)
屬性currentTime取得按下去時的秒數,指定時則為指定播放時的時間
快轉currentTime += 5 , 倒轉 currentTime -= 5
x += y 相當於 x = x + y
addEvebtListener 不能呼叫有參數的物件
nexttime.addEventListener("click", TimeChange); 正確
nexttime.addEventListener("click", TimeChange(false)); 錯誤
解決方式 - > 匿名函數 : 只被某一種特定區域內的事件執行時使用
nexttime.addEventListener("click", function(){audio.currentTime +=10 ;});
nexttime.addEventListener("click", function(){audio.currentTime -=10 ;});
第一種方式 直接呼叫匿名函式,結構不明確
nexttime.addEventListener("click", function(){TimeChange(fasle);});
nexttime.addEventListener("click", function(){TimeChange(true);});
function TimeChange(boolFlag)
{
if (boolFlag)
audio.currentTime += 10;
else
audio.currentTime -= 10;
}
第二種方式 利用匿名函式間接呼叫函式,結構較為明確 ((其實也差不多...
上一首 9 下一手 :
抓物件存入變數
製作事件監聽器
循環播放 隨機播放 ( 這次就發現function會牽扯再一起 , 需要思考完整架構,不然整個會亂掉 )
上一首跟下一首歌其實是兩個獨立的物件
function SongChange(boolFlag) {
if (boolFlag)
music.selectedIndex++;
else
music.selectedIndex--;
ChangeMusic();
}

音量調整是另用input button type range
audio.volume = volValue.value/100;
為何要除100看以下跟要求值要在0~1之間有關係
HTML Audio/Video DOM volume Property
<div id="volume">
<input id="vol" type="range" min="0" max="100" value="80" />
<input id="volM" type="button" value="-" />
<input id="volP" type="button" value="+" />
<input id="volValue" type="text" value="80" readonly="readonly" />
</div>
<script>
var vol = document.getElementById("vol");
var volM = document.getElementById("volM");
var volP = document.getElementById("volP");
var volValue = document.getElementById("volValue");
vol.addEventListener("change", function () { VolumeChange("c"); });
volM.addEventListener("click", function () { VolumeChange("m"); });
volP.addEventListener("click", function () { VolumeChange("p"); });
function VolumeChange(sound) {
switch (sound) {
case "c":
break;
case "m":
vol.value--;
break;
case "p":
vol.value++;
break;
}
volValue.value = vol.value;
audio.volume = volValue.value/100;
}
</script>

不同瀏覽器對不同事件不同定義
change ie 隨時都在 change
chrome 放開滑鼠or結束事件才抓值
ie 不支援input
vol.addEventListener("input", function () { VolumeChange("c"); });
volM.addEventListener("click", function () { VolumeChange("m"); });
volP.addEventListener("click", function () { VolumeChange("p"); });

audio屬性muted
<span id="muted">V</span>
<scrip>
var muted = document.getElementById("muted");
muted.addEventListener("click", SetMuted);
function SetMuted() {
if (muted.innerText == "V") {
audio.muted = true;
muted.innerText = "U";
}
else {
audio.muted = false;
muted.innerText = "V";
}
}
</scrip>

<!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;
}
#volValue {
width: 25px;
background-color: black;
color: yellow;
text-align: center;
}
</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>
<option value="music/tearshining.mp3">夏川里美-淚光閃閃</option>
<option value="music/airball.mp3">周杰倫-告白汽球</option>
<option value="music/sweety.mp3">汪蘇瀧&By2-有點甜</option>
<option value="music/careyou.mp3">鄧麗君-我只在乎你</option>
</select>
<div id="FuncBtn">
<span id="play">4</span>
<!--<span id="pause">;</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>
</div>
<div id="volume">
<input id="vol" type="range" min="0" max="100" value="70" />
<input id="volM" type="button" value="-" />
<input id="volP" type="button" value="+" />
<input id="volValue" type="text" readonly="readonly" />
</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");
var prevtime = document.getElementById("prevtime");
var nexttime = document.getElementById("nexttime");
var prevsong = document.getElementById("prevsong");
var nextsong = document.getElementById("nextsong");
var vol = document.getElementById("vol");
var volM = document.getElementById("volM");
var volP = document.getElementById("volP");
var volValue = document.getElementById("volValue");
var muted = document.getElementById("muted");
play.addEventListener("click", PlayMusic);
//pause.addEventListener("click", PauseMusic);
stop.addEventListener("click", StopMusic);
music.addEventListener("change", ChangeMusic);
prevtime.addEventListener("click", function () { TimeChange(false); });
nexttime.addEventListener(MouseEvent.do, function () { TimeChange(true); });
prevsong.addEventListener("click", function () { SongChange(false); });
nextsong.addEventListener("click", function () { SongChange(true); });
vol.addEventListener("input", function () { VolumeChange("c"); });
volM.addEventListener("click", function () { VolumeChange("m"); });
volP.addEventListener("click", function () { VolumeChange("p"); });
muted.addEventListener("click", SetMuted);
VolumeChange("c");
function SetMuted() {
if (muted.innerText == "V") {
audio.muted = true;
muted.innerText = "U";
}
else {
audio.muted = false;
muted.innerText = "V";
}
}
function VolumeChange(sound) {
switch (sound) {
case "m":
vol.value--;
break;
case "p":
vol.value++;
break;
}
volValue.value = vol.value;
audio.volume = volValue.value/100;
}
function SongChange(boolFlag) {
if (boolFlag)
music.selectedIndex++;
else
music.selectedIndex--;
console.log(music.selectedIndex);
ChangeMusic();
}
function TimeChange(boolFlag) {
if (boolFlag)
audio.currentTime += 10;
else
audio.currentTime -= 10;
}
function PlayMusic() {
audio.play();
ShowStatus(1);
if (play.innerText == "4")
play.innerText = ";";
else {
play.innerText = "4";
PauseMusic();
}
}
function PauseMusic() {
audio.pause();
ShowStatus(2);
}
function StopMusic() {
audio.pause();
audio.load();
play.innerText = "4";
ShowStatus(3);
}
function ChangeMusic() {
song.src = music.options[music.selectedIndex].value;
audio.load();
if (info.innerText == "音樂播放中")
audio.play();
//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>

陣列讀值發生錯誤後會歸零
一種方式為 如果是第一首就不能 - -
二種方式是 做 第一首跟最後一首的 環狀結構 捲動式
function SongChange(boolFlag) {
music.options.length
if (boolFlag) {
if (music.selectedIndex < music.options.length - 1)
music.selectedIndex++;
else
music.selectedIndex = 0;
}
else {
if (music.selectedIndex == 0)
music.selectedIndex = music.options.length - 1;
else
music.selectedIndex--;
}
console.log(music.selectedIndex);
ChangeMusic();
}

Copy link
On this page
JSMUSICPLAY
第三次 解決耦合率太高
第四次 加入快轉功能
第五次 音量調整功能
第六次 不同瀏覽器 細節處理
第七次 靜音功能
第八次 注意所有物件屬性的預設值
第九次 outofrange
伺服器權限
資料夾/不同使用者NTFS權限
資料夾/群組NTFS權限