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

氣泡式

![](/files/-L_G0XZ_mHoNKCAsNup2)

###

### 拖移功能

#### 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 不留空位&#x20;

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

## IIS部屬

![](/files/-L_GbMZLBOORoB7YAL_k)

![](/files/-L_GbXunqto83bN2kLFq)

![](/files/-L_GbqHuV4aVYcqsLqBu)

![](/files/-L_Gc1ip8DLdvUcZNHr_)

家用版跟伺服器版差別就是服務的網站數量

![](/files/-L_Gf1eqEqdaFw_GeSRy)

![](/files/-L_Gf8mFeOLZuGF2ytxe)

![](/files/-L_GfKxO9AGHmqsAHRAC)

### 設定路徑

進階設定 實體路徑

![](/files/-L_Gfo5_8BdsY11gs-Wc)

![](/files/-L_GflCBFGoxyDyNU4pK)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201903/2019-0306-jsmusicplay.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.