C50108
Search…
2019/0306/Javascript musicplay_really_end

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>

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

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);
}
氣泡式

左拖到右
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);
}
}
索引值改變所以要倒過來寫
因為迴圈是一次刪一首
從前面刪第一首刪掉第二首會變第一首所以第二次刪是刪第三首

//更新歌單
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);

關注點分離
<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>

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

進階設定 實體路徑
Copy link
On this page
JSmusicplay
跑馬燈顯示即時歌曲名稱
不同瀏覽器相容性問題
歌本撥放清單與列表清單功能
歌本 CSS
清單交換功能
拖移功能
更新自選歌單
bug 修正 audio 裡面還是在撥第一首歌
細節修正
樣式表&JS檔案抽離
IIS部屬
設定路徑