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

JSMUSICPLAY

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

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

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

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

第三次解決耦合率太高

呼叫的不是另一個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();
        }

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

第五次音量調整功能

音量調整是另用input button type range

audio.volume = volValue.value/100;

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

W3Schools.comwww.w3schools.com

<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

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

一種方式為如果是第一首就不能 - -

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

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