2019/0306/Javascript musicplay_really_end

JSmusicplay

跑馬燈顯示即時歌曲名稱

function ChangeMusic(index) {
            song.src = music.options[index].value;
            music.options[index].selected = true;
            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;
        }

每個標籤都有 title 屬性

inner text ( tag 夾著的中間值 )

將 inner text 餵給 title

不知道為啥不是新增變數

將原本撥放中換歌繼續撥放的判別文本值改為判別按鈕狀態

  function ChangeMusic(index) {
            song.src = music.options[index].value;
            song.title = music.options[index].innerText;
            console.log(song.title);
            music.options[index].selected = true;
            audio.load();
            
            if (play.innerText == ";") {
                audio.play();
                ShowStatus(1);
            }
                //PlayMusic();
        }

        function ShowStatus(status) {
            var strStatus = "";

            switch (status) {
                case 1:
                    strStatus = "現正播放：" + song.title;
                    break;
                case 2:
                    strStatus = "音樂暫停";
                    break;
                case 3:
                    strStatus = "音樂停止";
                    break;
            }

            info.innerText = strStatus;
        }

不同瀏覽器相容性問題

細項設定不同，造成問題

瀏覽器偵測 key 兩種版本的代碼

每個瀏覽器使用的核心不一樣

瀏覽器其實是雲端程式伺服器端只是一個介面，而每個使用者都只是agent

以下範例為操作input這個動作的時候才作判別而不是瀏覽器一執行就做判別

vol.addEventListener("input", function () { VolumeChange("c"); });

vol.addEventListener(BrowserTest(), function () { VolumeChange("c"); });

 //瀏覽器偵測
        function BrowserTest() {
            if (navigator.userAgent.search("Chrome") != -1)
                return "input";
            else if (navigator.userAgent.search("Opera") != -1)
                return "input";
            else if (navigator.userAgent.search("Firefox") != -1)
                return "input";
            else
                return "change";
         
        }

歌本撥放清單與列表清單功能

拖拉 html5 方法 drag and drop

目的區塊來源區塊

什麼物件都可以

程式結構調整將歌串移至歌本清單

最好利用物件擁有的屬性放東西將value改為title

     <div id="Sbook">
            <div title="music/nothing.mp3">Nothing Gonna Change My Love For You</div>
            <div title="music/nomouth.mp3">真的不想嘴</div>
            <div title="music/travel.mp3">帶你去旅行</div>
            <div title="music/tearshining.mp3">夏川里美-淚光閃閃</div>
            <div title="music/airball.mp3">周杰倫-告白汽球</div>
            <div title="music/sweety.mp3">汪蘇瀧&By2-有點甜</div>
            <div title="music/careyou.mp3">鄧麗君-我只在乎你</div>
            <div title="music/elysees.mp3">Champs-Elyees</div>
            <div title="music/little.mp3">田馥甄-小幸運</div>
            <div title="music/MV.mp3">旺福-咖啡戀曲</div>
            <div title="music/Right.mp3">Keren Ann-Right Now & Right Here</div>
            <div title="music\prettyboy.mp3">M2M-Pretty Boy</div>
            <div title="music\moon.mp3">五月天-私奔到月球</div>
            <div title="music\PartyAnimal.mp3">五月天-派對動物</div>
            <div title="music\warmheart.mp3">郁可唯-暖心</div>
            <div title="music\lovegood.mp3">蘇永康&陳潔儀-愛的正好</div>
            <div title="music\oldclock.mp3">平井堅-古老的大鐘</div>
            <div title="music\yoursmile.mp3">FIR-你的微笑</div>
            <div title="music\onion.mp3">丁噹-洋蔥</div>
            <div title="music\iamfly.mp3">FIR飛兒樂團-我要飛</div>
            <div title="music\notlove.mp3">張韶涵 - 親愛的那不是愛情</div>
            <div title="music\always.mp3">SHE-Always on my mind</div>
            <div title="music\years.mp3">胡夏-那些年</div>
            <div title="music\sliverdragon.mp3">中島美雪-騎在銀龍的背上</div>
            <div title="music\onlyflower.mp3">SMAP-世界唯一僅有的花 </div>
            <div title="music\lovehim.mp3">李聖傑&林隆旋-你那麼愛他</div>
            <div title="music\remember.mp3">張惠妹-記得</div>
            <div title="music\couple.mp3">曹格-兩隻戀人</div>
            <div title="music\myangle.mp3">Tank-專屬天使</div>
        </div>
        <div id="Tbook"></div>

歌本 CSS

overflow:auto 自動卷軸 ( 上面歌單列表超出div

cursor:copy 自訂鼠標

#Sbook,#Tbook{
            width:294px;
            border:3px solid;
            float:left;
            height:200px;
            overflow:auto;
            cursor:copy;
        }

清單交換功能

並把原程式結構對應的 value 與innertext做更改

動操作文件物件模型的樹結點跟結點之間去更動

抓div到另一個div 且沒設id

可以用數第幾個

一抓觸發ondragstart 放下時觸發ondragover

ev.preventDefault(); 停止物件預設行為

  var Sbook = document.getElementById("Sbook");
  var Tbook = document.getElementById("Tbook");
  
     //抓預設歌曲
        function getDefaultSong() {
            for (i = 0; i < Sbook.children.length; i++) {
                var option = document.createElement("option");
                option.value = Sbook.children[i].title;
                option.innerText = Sbook.children[i].innerText;

            }
        }

拜訪結點移動結點複製刪除結點

draggable=true 必須擁有此屬性才能被搬動

        function getDefaultSong() {
            for (i = 0; i < Sbook.children.length; i++) {
                var option = document.createElement("option");
                var Snode = Sbook.children[i];
                option.value = Snode.title;
                option.innerText = Snode.innerText;
                music.appendChild(option);

                Snode.draggable = true;
            }

問題來了如何餵一首首的歌曲事件監聽器

event事件的物件

target 觸發

event.target.id 觸發這個事件的id

Sbook.addEventListener("dragstart", function () { drag(event); });

 function drag(evt) {
            evt.dataTransfer.setData("text", evt.target.id);
            //alert(evt.target.id);
        }

氣泡式

拖移功能

dragover 事件

drop 事件

左拖到右

Sbook.addEventListener("dragstart", function () { drag(event); });
Tbook.addEventListener("dragover", function () { allowDrop(event); });
Tbook.addEventListener("drop", function () { drop(event); });
        
         function drop(evt) {
            evt.preventDefault();
            var data = evt.dataTransfer.getData("text");
            evt.target.appendChild(document.getElementById(data));
        }

        function allowDrop(evt) {
            evt.preventDefault();
        }


        function drag(evt) {
            evt.dataTransfer.setData("text", evt.target.id);
            //alert(evt.target.id);
        }

右拖到左

Tbook.addEventListener("dragstart", function () { drag(event); });
Sbook.addEventListener("dragover", function () { allowDrop(event); });
Sbook.addEventListener("drop", function () { drop(event); });

更新自選歌單

 
<div id="btnUpdateMusic">更新歌單</div>
 
 btnUpdateMusic.addEventListener("click", UpdateMusic);
   
   //更新歌單
        function UpdateMusic() {

            //清掉所有歌
            for (i = music.children.length-1; i >= 0; i--) {

                music.removeChild(music.children[i]);


            }


            for (i = 0; i < Tbook.children.length; i++) {
                var option = document.createElement("option");
                var Snode = Tbook.children[i];
                option.value = Snode.title;
                option.innerText = Snode.innerText;
                music.appendChild(option);

           
            }
        }

索引值改變所以要倒過來寫

因為迴圈是一次刪一首

從前面刪第一首刪掉第二首會變第一首所以第二次刪是刪第三首

bug 修正 audio 裡面還是在撥第一首歌

   //更新歌單
        function UpdateMusic() {
            //清掉所有歌
            for (i = music.children.length-1; i >= 0; i--) {
                music.removeChild(music.children[i]);
            }


            for (i = 0; i < Tbook.children.length; i++) {
                var option = document.createElement("option");
                var Snode = Tbook.children[i];
                option.value = Snode.title;
                option.innerText = Snode.innerText;
                music.appendChild(option);
          
            }

            SongChange("a");
        }
        
        
        //抓預設歌曲
        function getDefaultSong() {
            for (i = 0; i < Sbook.children.length; i++) {
                var option = document.createElement("option");
                var Snode = Sbook.children[i];
                option.value = Snode.title;
                option.innerText = Snode.innerText;
                music.appendChild(option);

                Snode.draggable = true;
                Snode.id = "song" + (i + 1);
            }

            SongChange("a");
        }

呼叫 song change ("a") 寫成獨立函數的好處需要做那件事情時呼叫

改掉audio預設屬性

細節修正

歌本按鈕隱藏顯示歌本控制旗標

display:none 不留空位

vsiblte 不顯示留空位

title="hide" 點一下 title 改成 show 判斷是show or hide

  
css
  
  .hide{
            display:none;
        }
        .show {
            display: block;
        }
        
html
  
  <span id="songbook">@</span>
  
  <div id="book" class="hide">
            <div id="Sbook">
                <div title="music/nothing.mp3">Nothing Gonna Change My Love For You</div>
                <div title="music/nomouth.mp3">真的不想嘴</div>
                <div title="music/travel.mp3">帶你去旅行</div>
                .
                .
                .
                
javascript

        function displayBook(displayFlag) {
            if (displayFlag == "hide") {
                book.title = "show";
               
            }
            else {
                book.title = "hide";
                
            }
            book.className = book.title;
        }

css 標籤固定藉由改變class title 的值造成css樣態改變

細節修正

audio.currentTime = audio.duration * (evt.offsetX / 600);


<div id="ControlPanel" style="width:600px;">
audio.currentTime = audio.duration * (evt.offsetX / parseInt(ControlPanel.style.width);

樣式表&JS檔案抽離

關注點分離

 <link href="PlayerStyle.css" rel="stylesheet" />
 <script src="Player.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <link href="PlayerStyle.css" rel="stylesheet" />

</head>
<body>

    <audio id="audio">
        <source id="song" type="audio/mpeg" />

    </audio>

    <div id="ControlPanel" style="width:600px;">
        <select id="music">
           
        </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>
            <span id="loop">q</span>
            <span id="random">s</span>
            <span id="allloop">`</span>
            <span id="songbook">@</span>
        </div>
        <div id="volume">
            <input id="vol" type="range" min="0" max="100" value="10" />
            <input id="volM" type="button" value="-" />
            <input id="volP" type="button" value="+" />
            <input id="volValue" type="text" readonly="readonly" />
        </div>
        <div id="settime">
            <div id="progress"></div>
        </div>

        <div id="InfoPanel">
            <div id="duration">00:00 / 00:00</div>
            <marquee id="info">請按播放鈕~~~~~</marquee>
            <div id="info2"></div>
        </div>
        <hr />
        <div id="book" class="hide" title="hide">
            <div id="Sbook">
                <div title="music/nothing.mp3">Nothing Gonna Change My Love For You</div>
               .
               .
               .
            </div>
            <div id="Tbook">

            </div>
            <div id="btnUpdateMusic">
                更新歌單
            </div>
        </div>
    </div>
    <script src="Player.js"></script>
</body>
</html>