瀏覽器背景音樂播放方法

瀏覽器的背景音樂播放

如果只想在網頁中播放一段背景音樂並不困難，在你瀏覽這網頁的此刻，不管你用的 Explorer or Navigator ，只要是 4.0 版以上，系統中有正確播放 Midi 的設定，應該可以聽到我們正為你播送的曲目。不過要提醒 Explorer 使用者注意， <BODY> 標籤的 BGSOUND 屬性，Navigator 是不支援的，如果你要兩邊通用，就該改用 <EMBED> 標籤，正如本網頁，<EMBED>是這麼寫的：

<EMBED src="002.mid" autostart=true loop="100" HIDDEN>

EMBED 標籤屬性的意義

以本網頁 EMBED 標籤為例：

SRC:屬性值為字串，音樂檔 URL 位址。
AUTOSTART:屬性值為 ture or false ，表示是否網頁一載入完成就自動播放。
LOOP:屬性值為整數，表示要播放幾次才結束。
HIDDEN:嚴格說其值仍為 true or false ，但不像 AUTOSTART 使用等號，它是有出現表示 true ，沒寫表示 false ，表示是否顯示 EMBED 標籤操作面版。

由於我們要把 EMBED 做成像背景音樂一樣，當然要有 HIDDEN 屬性，把它那操作面版藏起來，並且讓它 Autostart 一下，就跟 Explorer BGSOUND 效果差不多了，而且 Navigator 和 Explorer 都可通用。

變自動為手動: 在網頁中播放背景音樂我一直看做小事一樁，直到有天有位網友問我：如果我的背景音樂不要 Autostart ，也不要 Embed 的操作面版，而是由我自己設的按鈕來開開關關該怎麼做？
這在 Explorer 中會複雜一些，但還是有辦法的；因為 Embed 物件在 Explorer 中是可動態操作的。借由 Embed 物件提供的 stop() 和 play() 方法，可以開關音樂檔案，而 Embed 有個 filename 屬性，則可以更換想要播放的音樂檔。但 Navigator 就麻煩了，因為 Embed 各屬性在 Navigator 中，只要一寫到 document 中就定型了，我還真不知道該如何在 Script 敘述中更改 Embed 的設定。(如果有這樣的辦法，請您來信告知，我不勝感激。)
也就是說我對 Navigator 的了解是如果你要開關音樂檔，你必須透過 Embed 面版操作，如果你讓它 Hidden ，就必須 Autostart ，否則如何開啟呢？

變通辦法: 就這麼被 Navigator 鬥敗了實在心有不甘，我轉念一想，如果 document 寫定後 Embed 屬性就沒得改了，那如果在 Script 中用 document.write() 方法動態的寫 Embed 標籤呢？經測試後果然成功。但 document.write() 有個很糟的後果，那就是它會破壞原有的網頁內容，如果我用 document.write() 重寫網頁，那只能執行一次，那又不可能把背景音樂開關多次了。最後我想到用頁框組 (Frameset) 啊！把按鈕和 Script 寫在甲頁框，用 document.write() 把 Embed 敘述寫到乙頁框，於是，我的作品網頁點唱機就這麼誕生了。接下來介紹一下網頁點唱機 大略的做法。

隱藏頁框

因為要偽裝成背景播放，所以只能給瀏覽者看到控制頁，而不能讓瀏覽者看到 Embed 輸出那一頁，所以我的 Frameset 是這麼寫的：

<frameset rows="0,100%">
    <frame src="sounda.htm" name="soundplayer" noresize scrolling=no BORDER="0" FRAMEBORDER="NO" FRAMESPACING="0">
    <frame src="soundb.htm" name="sounndcontroller" noresize scrolling=Auto BORDER="0" FRAMEBORDER="NO" FRAMESPACING="0">
</frameset>

Frame soundplayer 因為是供輸出 Embed 敘述用的，所以給它寬度 0 ，藏起來。 Frame soundcontroller 是瀏覽者操控頁，所以讓它 100 % 佔滿整個 window。

音樂開關按鈕的設計

這是音樂開關按鈕使用的圖片：

開啟圖片
關閉圖片

這是 HTML CODE 敘述：

<!-- ChooseSound() 是網頁點唱機執行 document.write() 的自訂函數 -->
<td><A HREF="" onclick="return ChooseSound(1)"><img src="mbut1b.gif" 
  width="136" height="39" NAME="mimg1" BORDER="0"></A></td>

至於用 <A> 標籤包覆 <IMG> 標籤，是為了適應 Navigator 的物件特性，因為解釋起來又是一大篇，這裏不再贅述，請自行參考隨滑鼠變換的圖形連結按鈕範例。

document 輸出 Script 的設計

宣告變數參照

/* player 指的是輸出 soundplayer 的那個 frame，
   oldno 是前一個被按下的曲目按鈕的編號。 */
var player,oldno=1;

/* 網頁變數初始化 */
function BodyLoadEvent()
{
    /* 用變數參照播放 midi 的頁框 */
    player=parent.frames.soundplayer.document;

    /* 先按下關閉曲目按鈕 */
    ChooseSound(4);
}

播放曲目判斷

/* 播放選擇曲目 */
function ChooseSound(no)
{
    /* 參照前一個及現一個被按下的曲目按鈕 */
    var oldimg=document.images["mimg"+oldno];
    var newimg=document.images["mimg"+no];

    /* 改變曲目按鈕的圖片 */
    oldimg.src=eval("mbut"+oldno+"b.src");
    newimg.src=eval("mbut"+no+"a.src");
    /* 記錄這次的按鈕 */
    oldno=no;

    /* no==4 是關閉曲目，其他依曲目編號播放。 */
    if (no==4) {CloseSound();}
    else {WriteToPlayarea("00"+no+".mid");}

    return false;
}

關閉音樂的敘述

/* 關閉曲目 */
function CloseSound()
{
    player.open();
    player.write("<HTML><HEAD><TITLE></TITLE></HEAD>");
    player.write('<BODY bgcolor="#000000" TEXT="#000000">');
    /* BODY 區段中沒有 Embed 敘述 */
    player.write("</BODY></HTML>");
    player.close();
}

播放音樂的敘述

/* 把曲目寫到 soundplayer 播放頁框播放 */
function WriteToPlayarea(sname)
{
    player.open();
    player.write("<HTML><HEAD><TITLE></TITLE></HEAD>");
    player.write('<BODY bgcolor="#000000" TEXT="#000000">');
    /* BODY 區段中輸出 Embed 各屬性敘述 */
    player.write('<EMBED src="'+sname+'" autostart="true" loop="100" HIDDEN>');
    player.write("</BODY></HTML>");
    player.close();
}

其他注意事項

雖然 Frameset 中 soundplayer 頁只是 Script 敘述區，並不需要真正的在實體網頁中顯示什麼訊息，但你卻一定要在 soundplayer 中載入一份實體網頁，否則 Navigator 會有物件參照不到的錯誤，詳情請見抓不到的頁框。
網頁點唱機雖然以網頁音樂檔播放為主，但 Script 區段中有大量有關動態圖片變換的 Script 敘述，如果那些令你迷惑，請參考隨滑鼠變換的圖形連結按鈕範例。
因為一共要隨網頁下載三首 mid ，時間會拖的久些，再加上 何處塵埃 以文字網頁為主，為免被人看扁了，所以請容許我酷炫一下，多加了幾張圖片，擔誤您寶貴時間，在此先致歉。好了，這就是我比較費心的一份網頁網頁點唱機。
如果你想更詳細了解 網頁點唱機 所有細節，為了感謝你有耐心把這又臭又長的網頁看到現在，這是我的一點小禮物，打包下載，離線閱讀。

何處塵埃分類導覽 HTML 文件索引