Javascript: 隨機背景音樂

STEP1:【前言】隨機數和Array的配合可以做出不少好用的功能，最常見的就是簡易的背景音樂播放機，讓我們一步一步開始做吧。

STEP2:【原始碼】阿得先從最簡單的隨機array開始講:

<SCRIPT Language="JavaScript">
midi = new Array(3);
midi[0] = "您好";
midi[1] = "歡迎來到酷必網";
midi[2] = "有空可以一起研究喔";

index = Math.floor(Math.random() * midi.length);
document.write(midi[index]);
</SCRIPT>

阿得針對以上的原始碼簡單講解一下:

midi= new Array(3);，這個是產生陣列的語法，詳細的資料請參考我們先前的教學。
midi[0] = "您好";，這句和之後的幾個midi[x]都是陣列的內容，詳細的資料請參考我們先前的教學。
midi[index]，很簡單，也就是midi這個陣列是利用index裡面的數值來決定使用哪一個陣列。
index = Math.floor(Math.random() * midi.length);，解釋起來也很複雜，Math.Floor()的功用是回傳一個最大但是又符合需求的數值，像是在這裡index數值不能夠大於2，因為我們的陣列只有0,1,2三個而已。
Math.random()，隨機產生數字。
midi.length，midi陣列的長度。

其實這只是一種方法，因為他是利用陣列的長度來做運算，所以有時候(機率很小)會一直跳不出某一個陣列，呵呵，如果您聽的不是很懂下面隨機數的部分，沒關係，只要記得用這個方法可以隨機挑選陣列。

跑跑看這個程式，您會發現他每次會隨機顯示三個陣列中的其中一個(因為我們用document.write)，這個可以做簡單的隨機提示功能喔。

STEP3:【音樂撥放機】這個一個簡單的音樂撥放機:

<SCRIPT Language="JavaScript">
midi = new Array(7);
midi[0] = "beetles_letitbe.mid";
midi[1] = "soundsil.mid";
midi[2] = "greatestloveofall.mid";
midi[3] = "howdeepisyourlove.mid";
midi[4] = "laputa5.mid";
midi[5] = "brigeovr.mid";
midi[6] = "right.mid";

index = Math.floor(Math.random() * midi.length);
document.write("<embed src=" + midi[index] + " autostart=true hidden=true loop=true name=midis volume=100%>");
</SCRIPT>

<b>背景音樂:</b>
<a href="javascript:document.midis.play()" target=_self>撥放音樂</a>
<a href="javascript:document.midis.stop()" target=_self>停止音樂</a>
<a href="javascript:location.reload()" target=_self>更換音樂</a>

音樂播放機範例

阿得大概講解一下原理，撥放和停止音樂上次我們教過了，其實這個和上面是同一個程式，只是這邊每一個陣列都是midi檔案的名稱或是路徑，如果將這些陣列內容利用document.write寫入成embed物件的路徑，那就能夠隨機撥放音樂了。
每次載入頁面都會隨機挑選，不同的路徑當然就會撥放不同的音樂了...更換音樂的原理也很簡單，因為每次載入都會隨機跳音樂，所以，只要reload本網頁就ok了，這個範例適合用在框架中，才不會整個網頁都重新讀取。

STEP4:【結語】這次的這個範例可以說是集合了以前很多很多的技巧一起用才做出來的，您可以自己加一點想像力，做做看自己的功能喔。

最後更新日期: 12/17/2001 4:40:48 PM