☞ 公 告 ☜
有一陣子似乎很流行讓家族、自己個人網頁下面嵌入一個音樂播放器, 這樣一來,當網頁換頁的時候,音樂不會隨之ㄎㄚ(Cut)掉,而這也是很多人所希望的 ,很多人不希望音樂隨著更新網頁或是按某個指令而停止。 所以Tiffy現在要來寫 這一個教學,如何在你的個人網頁下也放一個撥放器, 其實做法很簡單, 而且Tiffy也 在奇摩知識上寫過不下十次, 可是還是有人跨無… 不知道是因為純文字寫法讓人看到 眼花, 還是.. 懶惰病發作…不管事實如何,要知道, 不可能請求別人作每一件事情, 而且自己若沒有親身體驗,或是嘗試過,對你來講, 他總是個大難題,所以,…呵呵~ 不多說, 我們來玩玩吧
首先,請去網路上找.. 各式各樣的音樂撥放器, 以Exobud播放器為主 好了,我以一個撥放器為例 連結請點..咖啡杯觀看 我們要先去下載音樂撥放器的面板,通常是個壓縮包,解壓縮後,你會 發現資料夾裡面有一個資料夾、四個js文件、兩個CSS樣式檔案、兩個htm網頁及兩個 readme的文字檔。
若是您沒有壓縮檔RAR請到 幻象馬雅 BBS下載
若是您還沒找到理想的撥放器, 這裡有個播放器可以試試看:請按此 下載
安裝程序: 首先你要先去你的網頁空間裡面建立一個 資料夾,為了方便我們的解說, 我們把這個資料夾稱為exobud_1, 在建立了這個exobud_1資料夾後,我們還要在裡面再新增一個資料 夾稱之為img,請不要命名其他名稱,因為這是為了配合裡面的js, css, 跟html檔案內的指令而取的。 新增完成這兩個資料夾後, 請把剛剛解壓縮好 的資料夾,其中裡面的img圖片檔案通通上傳到你的網頁空間裡面的 img資料夾。
第二個步驟: 再來把以下的文件上傳至 exobud_1資料夾內;
- exobbud.html→exobud MP 播放面板HTML頁面檔案
- exobud.css→exobud MP播放面板CSS樣式表
- exobudpl.html→exobud MP播放清單HTML頁面檔案
- exobudpl.css→exobud MP撥放清單CSS樣式表
- exobud.js→exobud MP撥放程式主程式
(javascript)
- exobudpl.js→exobud MP播放清單設定檔
(javascript)
- exobudset.js→exobud MP撥放程式基本設定檔
(javascript)
- imgchg.js→動態按鈕圖檔切換動作的程式檔(javascript)
你會在壓縮檔案中看到如上的八個文件,而這八個文件當 中主要有修改的項目有如下幾個︰ exobud.html: 主要的呼叫HTML執行檔, 在網頁端呼叫各個JS指令檔以及CSS樣式表,進而讓播放器產生作用,這個文件可修改 在播放器所出現的文字訊息,例如按鈕的輔助說明 exobudpl.html: 配合播放器主文件使用 的歌曲列表清單,裡面崁入了一個js程式,這個程式主要修改在播放清單中所指示的訊 息,此程式位於程式資訊及版權宣告項目之下,請自行開啟exobudpl.html,查看,基 本上市無須修改,如有必要,請依照您當時所編輯的網頁環境作適當的修改即可
exobud.css/exobudpl.css: ExoBUD MP 播放面板 CSS 樣式表,此樣式表主要在修改背景圖以及 顯示文字的顏色、大小,到訪以及未到訪的文字顏色標記 exobudset.js: ExoBUD MP 播放程式基 本設定檔,可設定一進入頁面是否自動播放,是否跳出顯示媒體資訊的對話方塊,當所 有曲目播放完畢是否在自動重新播放,一開始是否要設定隨機播放或按照順序沿路播放 下去 exobudpl.js: 歌曲載入的設定檔,不支援 RA~RM~RAM的音樂格式,其餘皆可
這些檔案真正需要修改的只有exobudset.js跟exobudpl.js, 打開exobudpl.js的時候, 捲軸往下拉, 其實你會發現裡面都有中文註解了, 其 中裡面有幾句話是
// [T1] 下面這一行是使用一般的設定格式來設定播放清單 項目 (是項設定只能在本機正常顯示字幕,在正式使用時請參考上述第2點之說明 ) mkList(“./sample/seattle.wmv”,”Great Reasons to Visit Seattle (含字幕 )”);
// [T2] 下面這一行同樣使用了一般設定格式,但是媒體檔 案位置並不是位於程式所在的主機 mkList(“http://tjap.bugsmusic.co.kr/japmusic/cha/0F/cha0F176370.asf”,”F4 – 流星雨”);
// [T3] 下面這一行使用了最精簡的設定格式,媒體的標題 將會自動從媒體檔案本身直接讀取
mkList(“./sample/seattle.wmv”);
// [T4] 下面這一行使用了完整的設定格式,在第四個設定 值中的 “f” 表示這個媒體檔案並不會預設播放,但使用者仍可以在播放清單上選擇是 否播放 mkList(“http://tjap.bugsmusic.co.kr/japmusic/cha/0F/cha0F176375.asf”,”F4 – 第一時間”,””,”f”);
// [T5~T10] 下面提供的幾首都是驚直喜愛的『新世紀音樂 』,做為樣本播放清單的額外曲目^^ mkList(“http://web0.puckii.net/puckii/118/118534.tm$”,”Yuichi Watanabe – Last Kiss”); mkList(“http://web0.puckii.net/puckii/118/118535.tm$”,”Yuichi Watanabe – Raindrops”); mkList(“http://tpop.bugsmusic.co.kr/popmusic/pop/0B/pop0B74619.asf”,”Brian Crain – Butterfly Waltz”); mkList(“http://tpop.bugsmusic.co.kr/popmusic/pop/0B/pop0B86787.asf”,”Brian Crain – Northern Lights”); mkList(“http://web0.puckii.net/puckii/16/16970.tm$”,”Kevin Kern – Bittersweet”); mkList(“http://web0.puckii.net/puckii/16/16973.tm$”,”Kevin Kern – Passages”);
// 以上所有開頭為 http:// 的串流音樂檔案連結,都是由 韓國的一些網路音樂分享社區免費提供的。 // 當您播放這些曲目的時候,並不一 定保證上列的串流音樂檔案連結,全部都能夠正常連線,亦不排除檔案位置已變更。
// ══════════════════
這邊就是你修改音樂的地方, 把你找到的音樂網址, 替代上 面的http:// 音樂網址, 若是怕太混亂不清楚, 可以把上面這幾段裡面的//[T1]跟中文 等字樣刪除並儲存, 只留下mkList(“http://音樂網址”,”歌名”);即可。
如果想要讓音樂連續撥放或是隨機撥放亦或是自動撥放, 請 打開exobudset.js,內有詳細說明. 設定完請記得存檔

再來我們要做兩個網頁, 一個是你想呈現的主頁, 一個 是有你的主頁跟撥放器在一起的網頁; 請先在你的網頁空間新增一個html的網頁命名 為top.html 其語法為:
<META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=big5″> 網頁名稱
<FRAME MARGINWIDTH=0px> <body topmargin=0px bgcolor="#ffffff" text=”#000000″>
<IFRAME style="WIDTH=100%; HEIGHT=100%" framborder=0px align=left src=”http://你的網頁空間或是家族網址” scrolling=yes>
|
另一個有你的主頁跟你的撥放器的網頁是利用框架的方式作
成的, 需要把你要的網頁跟撥放器嵌在一起, 圖片如下:

其語法為:
<meta
http-equiv=”Content-Type” content=”text/html;
charset=big5″>
個人網頁名稱/家族名稱
<frameset framespacing="0" border="0"
rows=”*,29″ frameborder=”0″>
<frame name="top" src="top.html"
target=”_self”>
<frame name="bottom" src="http://下面所顯示的exobud網址exobud.htm” scrolling=”auto”
target=”_self”>
其中的
29是指撥放器的高度
src=”top.html” 指的是剛剛設定的top網頁
exobud.htm網頁即是你剛剛在exobud_1裡面上傳的
exobud.htm, 找到他的網址貼上即可,

不過, 想要聽音樂. 也只能到你所作好的有主頁
跟有撥放器的網頁才可以邊聽音樂邊瀏覽網頁唷! 若是由原本的連結連的話, 就聽不到
音樂囉!
如果嫌棄網頁連結有點過長不美觀, 可以利用縮
短網址來美化一下
教學完畢,下臺一鞠躬! 有問題請直接留言或是
寫信給我。
By Tiffy©2006 All Rights
Reserved