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

## JSMUSICPLAY

理出大概脈絡怎寫、堆疊寫上去，也不是想到寫什麼寫什麼

很多時候無語法錯誤，但有邏輯錯誤，或是其他行影響另一行造成錯誤

問題 : 按開始後換歌可以播放，但暫停或停止時換歌后不可播放

原因 : 功能耦合率太高(我們把播放跟暫停寫在一起，造成下拉式選單功能連動錯誤)

### 第三次 解決耦合率太高&#x20;

呼叫的不是另一個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 為快轉符號

### 第四次 加入快轉功能

&#x20;(其實快轉/倒轉跟暫停/停止方式很像所以可以考慮和體function)

屬性currentTime取得按下去時的秒數，指定時則為指定播放時的時間&#x20;

快轉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();
        }
```

####

####

####

####

#### google chrome console 很方便會即時修改值

### 第五次 音量調整功能

音量調整是另用input button type range&#x20;

audio.volume = volValue.value/100;&#x20;

為何要除100看以下跟要求值要在0\~1之間有關係

{% embed url="<https://www.w3schools.com/tags/av_prop_volume.asp>" %}

```
<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>
```

### 第九次 outofrange&#x20;

陣列讀值發生錯誤後會歸零

一種方式為 如果是第一首就不能 - -&#x20;

二種方式是 做 第一首跟最後一首的 環狀結構 捲動式

```
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();
        }
```

##

## 伺服器權限

### 資料夾/不同使用者NTFS權限

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIukWPKNUow8QLinwM%2F-LZIumtK8uUAE03nLbf4%2Fimage.png?alt=media\&token=520a783a-0436-4f64-964a-95f5f67bfeb4)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIukWPKNUow8QLinwM%2F-LZIv7JzrudaJPqkmOV0%2Fimage.png?alt=media\&token=6baac32f-c1db-41cd-9c33-c218896164e2)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIukWPKNUow8QLinwM%2F-LZIvQuHIlRKakSLgD1a%2Fimage.png?alt=media\&token=e462b612-5309-4c81-9d4f-3cafa848b834)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIukWPKNUow8QLinwM%2F-LZIvWh6G3vIYMxi7o6H%2Fimage.png?alt=media\&token=b4e3943f-2746-4b7f-8406-c76eced08900)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIukWPKNUow8QLinwM%2F-LZIvwfCn2meRQ3vHn8q%2Fimage.png?alt=media\&token=dac20d59-ec59-4370-b672-69441fddd981)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIukWPKNUow8QLinwM%2F-LZIw-cZIxgEobtuIRrO%2Fimage.png?alt=media\&token=2dea3795-dadd-476f-bfa4-afa992f58d8f)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIw7oA7xe3zPHa3Y0e%2F-LZIwZ5WfK7Y6P0xnZee%2Fimage.png?alt=media\&token=93259b58-f04d-44ee-bfd0-f8ded6672d46)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIw7oA7xe3zPHa3Y0e%2F-LZIzil1EnXcFhLI6MkY%2Fimage.png?alt=media\&token=35e92ff9-6ab6-4461-9eb4-e0d5cd320fd2)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIw7oA7xe3zPHa3Y0e%2F-LZJ--UpPm5Sbs1tZllm%2Fimage.png?alt=media\&token=377297b1-4869-47f1-a8fc-d64fdbd0ef24)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIw7oA7xe3zPHa3Y0e%2F-LZJ-1qWyqDeoBbW7AZw%2Fimage.png?alt=media\&token=ae080138-933a-43b4-97e7-cd197b7a5e02)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIw7oA7xe3zPHa3Y0e%2F-LZJ11DuX-jsWSmSBbvW%2Fimage.png?alt=media\&token=52a83084-06e2-4868-9e52-8a6e70134e96)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIw7oA7xe3zPHa3Y0e%2F-LZJ1DXS3ez8PS5ydh5Q%2Fimage.png?alt=media\&token=ebfb2720-316b-4b12-b640-536d153490c7)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIw7oA7xe3zPHa3Y0e%2F-LZJ1GoB_9iHMSIIVaoT%2Fimage.png?alt=media\&token=ebbc75bd-8b93-4318-9b09-b0e66decb9ae)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZIw7oA7xe3zPHa3Y0e%2F-LZJ1VW_OSNX22snhf7L%2Fimage.png?alt=media\&token=dd80f6b9-cc5c-43c1-957f-e76ea4627d77)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJ1aR7eRnGiugvJ98H%2F-LZJ2U0WZRTaL683OCHr%2Fimage.png?alt=media\&token=f5cdfa3c-1c9e-40e0-bbf5-08942c9fc12e)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJ1aR7eRnGiugvJ98H%2F-LZJ2kliMmHbgHB4klFl%2Fimage.png?alt=media\&token=8fda6fcb-6fa3-425b-912f-012444646cb9)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJ1aR7eRnGiugvJ98H%2F-LZJ2y_TNfwq6v3BgYWK%2Fimage.png?alt=media\&token=f6739f06-64ed-489e-9f3c-6810d0ebaa06)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJ1aR7eRnGiugvJ98H%2F-LZJ3RkRdVusP98ZL_9v%2Fimage.png?alt=media\&token=e2afd372-0b2f-4b60-b112-1f5471f16a0e)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJ1aR7eRnGiugvJ98H%2F-LZJ3WDr9Or6otbqkBQr%2Fimage.png?alt=media\&token=e5b9899a-3c9b-498c-b910-ff781e0459ad)

### 資料夾/群組NTFS權限

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJB2shOJMSxSPEC-V4%2F-LZJIC-qE50YpsbX1mjA%2Fimage.png?alt=media\&token=66da111c-253a-4983-a25a-9e50356e86ab)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJB2shOJMSxSPEC-V4%2F-LZJJ5bHrBiZT6oPwM_B%2Fimage.png?alt=media\&token=7e8a6a9f-7f92-4985-b83b-2d218f1ce01b)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJB2shOJMSxSPEC-V4%2F-LZJK-BpYIM-cBqo8HoJ%2Fimage.png?alt=media\&token=dee3dcf2-18e4-4f73-b089-458759a4d089)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LZJB2shOJMSxSPEC-V4%2F-LZJLXijdiX9Z7tQLmp_%2Fimage.png?alt=media\&token=3335828c-f53a-4a05-ac65-6992d629974e)
