開始想要學習如何在部落格放音樂~ 感謝Tiffy網友的教學~

引述

嵌在網頁底下的音樂播放器
☞ 公　告 ☜

有一陣子似乎很流行讓家族、自己個人網頁下面嵌入一個音樂播放器，這樣一來，當網頁換頁的時候，音樂不會隨之ㄎㄚ(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

arrow
arrow
    全站熱搜

    kathy508 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄