☞ 公 告 ☜

有一陣子似乎很流行讓家族、自己個人網頁下面嵌入一個音樂播放器,
這樣一來,當網頁換頁的時候,音樂不會隨之ㄎㄚ(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
其語法為:
<html>
<head><META
HTTP-EQUIV="content-type" CONTENT="text/html;
charset=big5">
 <title>網頁名稱
</title>
</head>
<FRAME
MARGINWIDTH=0px>
<body topmargin=0px bgcolor="#ffffff"
text="#000000">

<IFRAME style="WIDTH=100%; HEIGHT=100%"
framborder=0px align=left src="http://你的網頁空間或是家族網址"
scrolling=yes></IFRAME></div></td>

</body>
</frame></html>

另一個有你的主頁跟你的撥放器的網頁是利用框架的方式作
成的, 需要把你要的網頁跟撥放器嵌在一起, 圖片如下:


其語法為:

<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=big5">
<title>個人網頁名稱/家族名稱
</title>
</head>
<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">
</frameset>
</html>

 

其中的

29是指撥放器的高度

src="top.html" 指的是剛剛設定的top網頁

exobud.htm網頁即是你剛剛在exobud_1裡面上傳的
exobud.htm, 找到他的網址貼上即可,


不過, 想要聽音樂. 也只能到你所作好的有主頁
跟有撥放器的網頁才可以邊聽音樂邊瀏覽網頁唷! 若是由原本的連結連的話, 就聽不到
音樂囉!

如果嫌棄網頁連結有點過長不美觀, 可以利用縮
短網址來美化一下


教學完畢,下臺一鞠躬! 有問題請直接留言或是
寫信給我。

By Tiffy©2006 All Rights
Reserved


-----
創作者介紹

Shalalalala

Tiffy 發表在 痞客邦 PIXNET 留言(0) 人氣()