網站媒體撥放程式製作教學

2014040312:13

ExoBUD MP(II) v4.1tc+ 網站媒體撥放程式製作教學

歡 迎 進 入

　

智慧型的播放程式，無法播放的歌曲會自動跳過，

也會根據音樂網址，自己找尋音樂訊息

 

 

 

 

播放程式 範例觀看：

ttp://sunny666.myweb.hinet.net/A.htm

http://www.chjhs.tpc.edu.tw/~94214/1.htm

播放程式 面板 下載：

ExoBUD MP(II) v4.1tc+網站媒體撥放程式-藍黑小面板.exe

ExoBUD MP(II) v4.1tc+網站媒體撥放程式-長條型銀黃面板.exe

更多面板下載：

http://tw.myblog.yahoo.com/jw!zo1RlCmfHxlEo2UTXCcDzads5GkC/article?mid=17702

 

提供 撥放程式 語法 方便測試使用：

延伸資訊：

播放程式 語法 框架 內嵌 部落格 放置 圖解教學網：

http://sunny666.myweb.hinet.net/5-2.htm

　

放置 奇摩部落格 文章 自定欄位 語法：

放置在文章中及自定欄位的語法：

小型MP3播放模式

<embed src="http://sunny666.myweb.hinet.net/mp3/exobud.htm"   width="150" height="180"></embed>

長條型播放模式

<embed src="http://www.chjhs.tpc.edu.tw/~94214/314/exobud.htm"   width="500" height="100"></embed>

可以自定尺寸=width="550"  ←寬    height="550" ←高

放置 奇摩部落格 文章 自定欄位 語法教學：

http://tw.myblog.yahoo.com/monkey_014148/article?mid=17176&prev=17612&next=17149&l=f&fid=48

　

放置 天空部落格 語法教學：編輯測試中

放置 xuite部落格語 法教學：編輯測試中

　

放置 框架網內 的 播放程式 範例觀看：

http://www.chjhs.tpc.edu.tw/~94214/1.htm

放置 4個框架網內 的 播放程式 語法：

4個框架

　

　

<frameset rows="64,*,30">
<frame name="top" scrolling="no" noresize target="contents">
<frameset cols="150,*">
<frame name="contents" target="main">
<frame name="main">
</frameset>
<frame name="bottom" scrolling="no" noresize target="contents" src="http://sunny666.myweb.hinet.net/314/exobud.htm">
<noframes>

</noframes>
</frameset>

　

放置 4個框架網內 長條型 的 播音程式 語法說明：

　 　

<frameset rows="64,*,30"> -播放程式網 寬 高像素尺寸-照自己需求調整
<frame name="top" scrolling="no" noresize target="contents"> -上框架
<frameset cols="150,*">
<frame name="contents" target="main">-左框架
<frame name="main">-主網框架
</frameset>
<frame name="bottom" scrolling="no" noresize target="contents" src="http://播放程式網址.htm">-下框架
<noframes>

</noframes>
</frameset>

　

放置 2個框架網內 長條型 的 播放程式 語法：

2個框架

　

　

<frameset rows="30,*">
<frame name="header" scrolling="no" noresize target="main" src="http://sunny666.myweb.hinet.net/314/exobud.htm">
<frame name="main">
<noframes>

</noframes>
</frameset>

　

放置 2個 框架網內 長條型 的 播音程式 語法說明：

　

　

<frameset rows="30,*">-播放程式網  高 像素尺寸-照自己需求調整
<frame name="header" scrolling="no" noresize target="main" src="http://播放程式網址.htm">-上框架
<frame name="main">-主網框架
<noframes>

</noframes>
</frameset>

　

語法 放置法：

使用 Microsoft FrontPage 網頁編輯

-開新網頁-點選 程式碼-在 </head> 下貼上 播音程式語法 

貼上語法前：

　 　

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新增網頁</title>
</head>

<body>

</body>

</html>

　

貼上語法後：

　 　

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新增網頁</title>
</head>
<frameset rows="64,*,30">
<frame name="top" scrolling="no" noresize target="contents">
<frameset cols="150,*">
<frame name="contents" target="main">
<frame name="main">
</frameset>
<frame name="bottom" scrolling="no" noresize target="contents" src="http://sunny666.myweb.hinet.net/314/exobud.htm">
<noframes>

</noframes>
</frameset>

<body>

</body>

</html>
　

　

再按 預覽 觀看效果微調 寬 高尺寸

<frameset rows="64,*,30"> 寬x高 像素尺寸

..................................

內嵌 播放程式 範例：

ttp://sunny666.myweb.hinet.net/A.htm

↑上面範例擺放在表格內

內嵌播放程式的語法 是用在沒框架的單獨網頁上

使用上比較靈活，可以隨自己需求任意放置

　

　

↑也可這樣隨意插入播放程式語法

內嵌 播放程式 語法：

　 　

<iframe name="exobud_mp" src="http://sunny666.myweb.hinet.net/mp3/exobud.htm"
width="110" height="200" marginwidth="0" marginheight="0"
border="0" frameborder="0" scrolling="no"></iframe>

　

內嵌 播放程式 語法說明：

　 　

<iframe name="exobud_mp" src="鍵入exobud.htm檔案的網址"
width="110" height="200" marginwidth="0" marginheight="0"
border="0" frameborder="0" scrolling="no"></iframe>

　

寬-width="110" 高height="200"

語法放置法：

使用 Microsoft FrontPage 網頁編輯

-開新網頁-點選 程式碼-在 你需求的地方貼上 播音程式語法 

貼上語法前：

　 　

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新增網頁</title>
</head>

<body>

</body>

</html>
　

貼上語法後：

　 　

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新增網頁1</title>
</head>

<body>

<iframe name="exobud_mp" src="http://sunny666.myweb.hinet.net/mp3/exobud.htm"
width="110" height="200" marginwidth="0" marginheight="0"
border="0" frameborder="0" scrolling="no"></iframe>
</body>

</html>

　

再按 預覽 觀看效果微調 寬 高尺寸

寬-width="110" 高height="200"

................

下載 面版程式 更改 編輯 修正 上傳 解說：

程式近乎完美，不需要額外修改

需調整部分為：

播放歌曲清單、

隨機 自動 播放方式

修正 連結到自己網站 或 部落格 的連結設定

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

播放程式 文字說明：

img：放置面板圖片資料夾

exobud.css : ExoBUD MP 播放面板 CSS 樣式表

exobudpl.css : ExoBUD MP 播放清單 CSS 樣式表

exobud.htm : ExoBUD MP 播放面板 HTML 頁面檔案

exobudpl.htm : ExoBUD MP 播放清單 HTML 頁面檔案

exobud.js : ExoBUD MP 播放程式主程式 (JavaScript)

exobudpl.js : ExoBUD MP 播放清單設定檔 (JavaScript)

exobudset.js : ExoBUD MP 播放程式基本設定檔 (JavaScript)

imgchg.js : 動態按鈕圖檔切換動作的程式檔 (JavaScript)

readme.txt：播放程式說明檔

readme_skin.txt：播放程式版權宣言

　

編輯 播放程式法：

 

 

請用 記事本 或 wordPad 編輯修改 播放程式

開啟法：點選檔案-按滑鼠右鍵-開啟檔案-選擇 記事本 或 wordPad 開啟

wordPad 位址：開始-程式集-附屬應用程式- 在開啟 wordPad

記事本 位址：C:\WINDOWS 資料匣內

  

 

.............................

編輯 播放歌單 說明：

開啟 播放程式資料夾-點選exobudpl.js : ExoBUD MP 播放清單設定檔 (JavaScript)

-按滑鼠右鍵-開啟檔案-選擇 記事本 或 wordPad 開啟編輯

　

歌單程式碼 內容：

　

//-->
//
mkList("http://218.108.234.106/new6/20070212/1/1.wma","盛噶仁波切-輪迴");
mkList("http://www.ku886.com/060409/km200611/01.wma","梁靜茹-暖暖");
mkList("http://218.28.80.170:8000/01/067.mp3","梁靜茹-戀著多喜歡");
mkList("音樂檔案的網址","歌手-曲名");
mkList("音樂檔案的網址");
//-->


注意：

1.不支援 .RA .RM .RV .RAM 這些檔案類型

　

2.加入新的音樂就在下方自行增加mkList("音樂檔案的網址","曲名");  

也可用mkList("音樂檔案的網址");程式會自己去抓音樂的資訊，

但是這樣容易造成音樂播放延遲

　

3.音樂網址 最好是選擇放置在自己網路空間的歌曲

xuite部落格的影音文章內的.mp3 .wma 音樂網址 可以播放

目前網路上大多數的音樂網址都禁止盜連需反覆測試

　

延伸訊息：

xuite申請法：http://myweb.hinet.net/home16/sunny666/1.htm

xuite 音樂網址尋找法：http://tw.myblog.yahoo.com/monkey_014148/article?mid=15852

推薦超優音樂搜尋網：http://www.mp3mv.com/

......................

隨機、自動播放 音樂播放程式基本設定法：

開啟播放程式資料夾-點選 exobudset.js : ExoBUD MP 播放程式基本設定檔 (JavaScript)

-按滑鼠右鍵-開啟檔案-選擇 記事本 或 wordPad 開啟設定

exobudset.js : ExoBUD MP 播放程式基本設定檔 (JavaScript)語法：

請隨自己的需求設定

　

<!--
//
// ■ 播放程式的基本設定
//
// ▽自動播放？
// 設定當播放器載入頁面時，是否自動播放(Auto Start)媒體檔案：
// true = 自動播放 (一般站長會選擇這個方式)
// false = 不要自動播放，等待使用者啟動播放器
var blnAutoStart = true;

// ▽隨機播放？
// 設定曲目的預設播放順序，是否隨機(亂數/Random Playing)播放媒體檔案：
// true = 隨機播放 (一般站長會選擇這個方式)
// false = 根據我所排列的順序，循序播放
var blnRndPlay = false;

// ▽在狀態列顯示文字訊息？
// 設定是否要在瀏覽器的狀態列(Status Bar)，顯示播放器的目前動作：
// true = 在狀態列顯示播放器文字訊息 (適合在隱藏媒體標題/時間長度方塊的情況下使用)
// false = 不要在狀態列顯示播放器文字訊息
// (如果您在設定播放清單項目時，使用了像 &#12345; 的『＆控制碼』，必須將此項設為 false)
var blnStatusBar = false;

// ▽顯示音量控制按鈕？
// 設定播放面板上是否要顯示音量控制(Volume Control-包括靜音模式)的按鈕：
// true = 顯示音量控制，容許使用者調校音量
// false = 不顯示音量控制，將按鈕隱藏起來
var blnShowVolCtrl = true;

// ▽顯示播放清單按鈕？
// 設定播放面板上是否要顯示播放清單(Playlist)按鈕：
// true = 顯示播放清單按鈕，讓使用者檢視播放清單內容及挑選曲目
// false = 不顯示播放清單按鈕，使用者無法檢視播放清單內容及挑選曲目
var blnShowPlist = true;

// ▽使用字幕功能，開啟字幕框？
// 設定是否使用SMIL字幕功能(Closed Captioning-須配合副檔名為"SMI"的純文字檔案使用)：
// true = 使用字幕功能，在字幕框中顯示同步歌詞或文字訊息(也可以包含圖片等資訊)
// false = 關閉字幕功能
var blnUseSmi = false;

// ▽循環播放？
// 設定當所有曲目播放完畢後，是否重新播放所有曲目(循環播放/Loop Tracks)：
// true = 使用循環播放功能 (一般站長會選擇這個方式)
// false = 不使用循環播放功能，當所有曲目播放完畢後停止播放
var blnLoopTrk = false;

// ▽彈出視窗顯示媒體檔案資訊？
// 設定在開始播放每一首曲目時，是否彈出視窗顯示媒體檔案資訊(Media Info)：
// true = 顯示媒體檔案資訊 (請認真考慮清楚，因為瀏覽者可能會感到厭煩的，此功能只適合測試用)
// false = 不顯示媒體檔案資訊
var blnShowMmInfo = false;

//-->

注意：

設定值只可設true (是) 或 false (否)，這兩個英文單字必須使用全小寫半形字母，不能寫錯。

...................

更改 播放程式 連結到 自己網站 或 部落格 說明：

按 播放程式面板 可以顯示 自己網站名稱 並連結到自己網站

開啟 播放程式資料夾-點選 exobud.js :ExoBUD MP 播放程式主程式 (JavaScript)

-按滑鼠右鍵-開啟檔案-選擇 記事本 或 wordPad 開啟編輯

在文件中最後一段語法中修改

　


// chkOnline() 函式: 檢查使用者的連線狀態 (不一定每款面板都會使用)
function chkOnline(){
// 傳回值: true(已連線到網際網路) false(沒有連線到網際網路)
return Exobud.isOnline;
}

// vizExobud() 函式: 點選連到 314素材迴廊
function vizExobud(){
// 使用範例: <span onClick="vizExobud()" style="cursor:hand" title="314素材迴廊">
window.open("http://tw.myblog.yahoo.com/monkey_014148","vizExobud");
}

　

..........................

上傳網站空間教學網：

申請hinet空間解說：

http://tw.myblog.yahoo.com/monkey_014148/article?mid=3253&prev=3532&next=3187&l=f&fid=48

香港奇摩個人網頁空間解說：

http://tw.myblog.yahoo.com/monkey_014148/article?mid=17093&prev=17106&l=a&fid=9

上傳 播放程式 說明：

資料夾名稱不能有中文，會無法判別上傳

請將 整個面板 資料夾 整個上傳到 網站空間上

利用FTP上傳  快速方便 不易遺漏

判別 播放程式 網址：http://你的首頁網址/播放程式資料夾名稱/exobud.htm

舉例-中華電信網址判別：

http://你的hinet網站帳號.myweb.hinet.net/播放程式資料夾名稱/exobud.htm

舉例-香港奇摩網址判別：

http://hk.geocities.com/奇摩帳號/播放程式資料夾名稱/exobud.htm

　

延伸教學：

多首音樂連播設置法：

http://tw.myblog.yahoo.com/jw!zo1RlCmfHxlEo2UTXCcDzads5GkC/article?mid=3187

音樂網設定教學：

http://tw.myblog.yahoo.com/monkey_014148/article?mid=3079&prev=3187&next=2288&l=f&fid=48

香港奇摩個人空間設置：

http://tw.myblog.yahoo.com/monkey_014148/article?mid=17093&prev=17106&next=17041&l=a&fid=9

中華電信hinet空間申請說明：

http://tw.myblog.yahoo.com/monkey_014148/searchblog?p=%E5%A5%87%E6%91%A9%E7%A9%BA%E9%96%93&my=1

　

延伸資訊：

ExoBUD MP(II) v4.1tc+網站媒體撥放程式

程式作者資訊：
─────
程式原作者: 韓國人-庾珍雄 (Jinwoong Yu)
個人網站: http://exobud.nayana.org
電子郵件: [email protected]
MSN 帳號: [email protected]
ICQ 帳號: 96138429

繁體中文化: 台灣人-黃奕恆/驚直 (Kendrick Wong, aka kiddiken)
個人網站: http://kiddiken.net
電子郵件: [email protected]
MSN 帳號: [email protected]
ICQ 帳號: 2947070
　

感謝設計此程式的韓國玩家，跟完美中文化的台灣朋友

因為他們的用心跟努力

各項程式設定都已趨近完美化不需更改

尤其是 黃奕恆/驚直 帥哥的完美中文化翻譯

讓大家開啟文件檔都能清楚明白

.....................................................

ExoBUD MP(II) v4.1tc+ 網站媒體撥放程式

只有 exobudpl.js  跟 exobudset.js  文件 內的設置

 exobudpl.js : ExoBUD MP 播放清單設定檔 (JavaScript)

exobudset.js : ExoBUD MP 播放程式基本設定檔 (JavaScript)語法

是可以也最需要來照自己需求  進行編輯修正

其他程式檔內 的細部微調 可以讓你打造專屬的播放程式

相關教學區參考：

http://myweb.hinet.net/home11/popo516/lost_heart/b/musicplayer/exobud.htm

 

　

<script type=

上一篇

最新X日誌貼音樂到部落格方法

下一篇

多款 初音 部落格小物

相關文章

我要留言