(本文系作者原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出自
T-Eye 第三只眼 http://bobotalk.blogbus.com)
在此之前，風(fēng)曾專(zhuān)門(mén)寫(xiě)過(guò)一篇日志——
《系列教程之三：關(guān)于PP播放器》——專(zhuān)門(mén)討論網(wǎng)頁(yè)中插入播放器的問(wèn)題。但由于時(shí)間的關(guān)系，那篇日志介紹的過(guò)于簡(jiǎn)陋了，以至于許多朋友看過(guò)以后心理仍然沒(méi)什么概念。特此，就如何在博客中插入漂亮的播放器這一專(zhuān)題，
T-Eye在此作進(jìn)一步的討論，也順便跟大家共享一下在自己博客中插入播放器的經(jīng)驗(yàn)。
首先需要聲明的幾點(diǎn)是：
1、本文中提及的網(wǎng)頁(yè)播放器均為ExoBUD MP(II)。其原創(chuàng)作者為韓國(guó)作者庾珍雄(Jinwoong Yu)，簡(jiǎn)體中文化作者為
雨網(wǎng)國(guó)際的liyu(yune_lee)。在此向他們的辛勤勞動(dòng)表示感謝！如有使用簡(jiǎn)體中文版的ExoBUD MP(II)，請(qǐng)盡可能保留這兩位作者的信息。
2、本文僅探討在博客（BloG）中，如何插入網(wǎng)頁(yè)播放器。與個(gè)人網(wǎng)站不同的是，目前大部分國(guó)內(nèi)BloG托管商都不提供完全的首頁(yè)定制上傳，而只是提供模板讓你修改——因此，以頁(yè)面框架方式插入播放器變得不可行（如果有朋友找到此種插入方法，請(qǐng)不吝共享）；所以，本文所討論的插入網(wǎng)頁(yè)播放器的辦法是以?xún)?nèi)嵌框架機(jī)制（iframe）實(shí)現(xiàn)的
3、為了方便朋友們，
T-Eye在此提供5種風(fēng)格的播放器下載——前四種是橫條方式的，主要應(yīng)用于頁(yè)面頂部或者底部以橫條方式插入；第五種是在RUBY面版的基礎(chǔ)上，風(fēng)修改成的折疊式，便于在側(cè)欄狹小的空間插入。需要說(shuō)明的是，在此只是為了方便大家才提供下載；如由此而涉及版權(quán)問(wèn)題，敬請(qǐng)告知。下表為網(wǎng)頁(yè)播放器下載地址和效果演示地址：
名稱(chēng)
下載地址
效果演示
Exobud MP的標(biāo)準(zhǔn)版本
點(diǎn)擊下載演示地址Exobud MP II 蘋(píng)果Mac版
點(diǎn)擊下載演示地址Exobud MP II CSS自由創(chuàng)作版
點(diǎn)擊下載演示地址Exobud MP II RUBY版
點(diǎn)擊下載演示地址Exobud MP II
T-Eye修改版
點(diǎn)擊下載演示地址咋看起來(lái)在博客中插入播放器蠻復(fù)雜的，其實(shí)不會(huì)的，只要稍微懂些基本的html知識(shí)就行（不懂也沒(méi)關(guān)系，碰上了上
Google搜索就是了）。但最初因找不到簡(jiǎn)易的教程，倒也走了不少?gòu)澛?。因此，為了給大家提供借鑒，讓更多的人能夠順利的在自己的博上插入漂亮的播放器，風(fēng)把自己摸索出來(lái)的經(jīng)驗(yàn)總結(jié)如下：
一、做好前提工作
（一）下載播放器
本文已經(jīng)提供了播放器的下載及演示地址。大家下載之前，可以先行點(diǎn)擊演示地址預(yù)覽各種風(fēng)格的播放器效果。選擇你需要的那一款，點(diǎn)擊下載地址Down到你自己的硬盤(pán)上就是了。下載下來(lái)后看看，這個(gè)壓縮文件的名字是一串?dāng)?shù)字吧？把它名字改成exobud_mp 。然后解壓縮，產(chǎn)生一個(gè)名為exobud_mp的文件夾，里邊有多個(gè)文件，找到這個(gè)文件——exobud.htm——雙擊它，就可以在瀏覽器中預(yù)覽效果了呵呵。
（二）申請(qǐng)好放置播放器的空間
目前國(guó)內(nèi)比較穩(wěn)定的是中聯(lián)，有100M的免費(fèi)空間，而且沒(méi)有任何廣告，支持ftp，大家可以到
中聯(lián)免費(fèi)主頁(yè)空間這個(gè)申請(qǐng)頁(yè)面去申請(qǐng)。申請(qǐng)后要注意記住自己的用戶(hù)名密碼。它審核挺快的，但是根據(jù)我的經(jīng)驗(yàn)好像審核完畢后不會(huì)主動(dòng)給你發(fā)郵件通知，所以你要主動(dòng)的上去查看是否已經(jīng)申請(qǐng)通過(guò)了。如果通過(guò)了，請(qǐng)牢記它提供給你的主頁(yè)空間的訪(fǎng)問(wèn)地址，比如我申請(qǐng)下來(lái)的主頁(yè)地址是：http://lamble.go3.icpcn.com/ ——后面就派上用場(chǎng)啦
二、個(gè)性化播放器
（一）播放參數(shù)設(shè)置
在你剛才解壓的那個(gè)文件夾里找到exobudset.js這個(gè)文件，用記事本打開(kāi)。打開(kāi)之后有一大堆文字對(duì)吧，不要慌。從上往下仔細(xì)看，它是按照各個(gè)功能條目進(jìn)行解釋的。因?yàn)榫唧w的各個(gè)功能條目已經(jīng)在里邊解釋的非常清楚了，在此就不再贅言。
需要提醒的是，只有形如“var blnAutoStart = true;”之類(lèi)的語(yǔ)句才會(huì)起作用，你需要做的只是按照上面的解釋修改“＝”號(hào)后面的值——“true” 或者是“false”——就這么簡(jiǎn)單。
還有點(diǎn)需要指出的是，smi的歌詞并不普及，若非特殊需要，可將字幕功能那一行值設(shè)為“false”。
（二）播放清單設(shè)置
在你剛才解壓的那個(gè)文件夾里找到exobudpl.js這個(gè)文件，用記事本打開(kāi)。老實(shí)說(shuō)，這個(gè)文件里邊作者的解釋寫(xiě)的有些亂，風(fēng)當(dāng)時(shí)費(fèi)老勁才搞明白。其實(shí)沒(méi)那么復(fù)雜。因?yàn)橹安煌扑]大家使用字幕功能，因此，在這里就省了許多事。大家按照那里邊的一般設(shè)定格式設(shè)定播放清單就行了。
舉個(gè)例子：mkList("http://88ba.nease.net/dandan/sg.mp3","Secret Garden－半生緣");
這條語(yǔ)句的意思就是說(shuō)：這首歌的標(biāo)題是“Secret Garden－半生緣”；播放這首歌時(shí)，播放器會(huì)到你指定的歌曲存放地址“http://88ba.nease.net/dandan/sg.mp3”去讀取——如此設(shè)定，你的播放清單里就有“Secret Garden－半生緣”這首歌了。
因此，相應(yīng)的，把你想要設(shè)定的歌曲網(wǎng)址和名字放在mklist后括號(hào)里邊引號(hào)里的對(duì)應(yīng)位置就行了。歌曲的網(wǎng)址在
百度、sogua.com上都可以搜索到（選取地址的原則是，在不影響音質(zhì)的情況下，盡量選容量比較小的，wmv的一般會(huì)更適合；midi也行）。
現(xiàn)在就動(dòng)手做你自己的清單罷：用記事本打開(kāi)exobudpl.js這個(gè)文件，把原來(lái)文檔里的文字從“<!--”后的第二行起全部刪除，然后按照“mkList("http://88ba.nease.net/dandan/sg.mp3","Secret Garden－半生緣");”這種格式逐一添加你要的歌曲。所有的歌曲（mklist行）添加完畢之后，你在最底下一行加上“//-->”表示結(jié)束——注意，我這里為了強(qiáng)調(diào)，都打上了后色引號(hào)（“”），實(shí)際操作的時(shí)候要把這對(duì)紅引號(hào)去掉。
注：后來(lái)風(fēng)重新做了一個(gè)播放清單樣本文件，已經(jīng)整合到在日志中提供下載的播放器壓縮包中了，修改后的樣本清單（exobudpl.js）條理很清楚，相信大家一看就明白了！照那個(gè)格式寫(xiě)就錯(cuò)不了的呵呵
附：一般免費(fèi)空間都不讓你上傳容量較大的文件，而一般的mp3都有3m左右，所以最好是在網(wǎng)上找地址放進(jìn)去；當(dāng)然，如果你有比較小的音樂(lè)文件，那可以把它放入解壓文件夾下的music文件夾。假設(shè)你放入music里的是一首標(biāo)題為“Only Time”，文件名稱(chēng)為“onlytime .wmv”的歌，那么它的調(diào)用格式是：mkList("./music/onlytime.wmv ","Only Time"); 其他依此類(lèi)推。
（三）修改播放器及播放清單面板（這一步僅針對(duì)熟悉HtmL源代碼的朋友，不熟悉者可跳過(guò)不看）
如果你覺(jué)得此處提供下載的播放器面板仍然不符合你自己的頁(yè)面要求——比如播放器太長(zhǎng)或者太短、顏色太暗或者太艷等無(wú)法跟博客風(fēng)格合一，或者說(shuō)你自己有更好的面板配色方案。那么你可以自行動(dòng)手修改播放器面板——你可以用網(wǎng)頁(yè)編輯器打開(kāi)剛才解壓的那個(gè)文件夾里的exobud.htm這個(gè)文件，進(jìn)行細(xì)細(xì)的修改。這個(gè)文件引用的圖片都放在解壓文件夾下的img文件夾里邊。播放器面板——無(wú)論是圖案還是顏色或者大小，都是可以調(diào)整的——但操作起來(lái)比較麻煩，修改的時(shí)候要注意隨時(shí)預(yù)覽并保存。因此建議對(duì)代碼不熟悉的朋友采取現(xiàn)成的播放器面板。
同理，你也可以修改播放清單的面板布局——用網(wǎng)頁(yè)編輯器打開(kāi)剛才解壓的那個(gè)文件夾里的exobudpl.htm這個(gè)文件。還是那個(gè)建議，對(duì)代碼不熟悉的朋友最好采取現(xiàn)成的播放器清單面板。
三、如何在博客中插入網(wǎng)頁(yè)播放器
當(dāng)你前面的工作已經(jīng)全部做好之后，那么先雙擊exobud.htm在瀏覽器中預(yù)覽一下，如果沒(méi)有問(wèn)題，那么就可以進(jìn)行這關(guān)鍵的最后一步了；如果出現(xiàn)網(wǎng)頁(yè)錯(cuò)誤之類(lèi)的提示，那請(qǐng)?jiān)僮屑?xì)檢查一下哪一步出現(xiàn)了問(wèn)題，把問(wèn)題找出來(lái)消滅掉。一般而言，如果沒(méi)有去修改播放器面板，即第二部分第三步涉及的問(wèn)題，預(yù)覽都是不會(huì)出現(xiàn)問(wèn)題的。好了，檢查完畢，我們就進(jìn)行下一步：
（一）上傳到已經(jīng)申請(qǐng)好的主頁(yè)空間
如果該空間能夠允許你用ftp上傳，那么最好不過(guò)了。用服務(wù)商提供給你的ftp用戶(hù)名和密碼，把剛才解壓并修改好文件的那個(gè)文件夾（exobud_mp）整個(gè)上傳上去。因?yàn)槲募己苄?，很快就可以傳完。傳完之后，我們需要預(yù)覽一下在遠(yuǎn)程的效果如何。如果遠(yuǎn)程能夠預(yù)覽，那么就可以進(jìn)行下一步了。
預(yù)覽的方式是這樣子的：在瀏覽器地址欄里輸入你所申請(qǐng)的主頁(yè)空間訪(fǎng)問(wèn)地址，比如我的是http://lamble.go3.icpcn.com/ ，然后在最后面加上后面引號(hào)里的內(nèi)容“exobud_mp/exobud.htm”——這個(gè)用于定位你主頁(yè)空間里的網(wǎng)頁(yè)播放器文件位置——因此，完整的預(yù)覽地址就是 http://lamble.go3.icpcn.com/exobud_mp/exobud.htm ；如果在瀏覽器里，能夠順利的讀取出你自己的播放器頁(yè)面來(lái)，那么你距離成功僅有一步之遙了，記住該讀取地址，比如我的就是“http://lamble.go3.icpcn.com/exobud_mp/exobud.htm”
（二）在Blog中插入網(wǎng)頁(yè)播放器
這個(gè)地方需要你具有一些基礎(chǔ)的HtmL知識(shí)，不過(guò)不會(huì)也沒(méi)有非常大的關(guān)系，嘗試一下就都出來(lái)了呵呵
先在你的Blog里找準(zhǔn)你要將播放器插入的確切位置，對(duì)應(yīng)到該位置所在的源代碼。然后在這個(gè)位置為播放器頁(yè)面留出一定的空間，這個(gè)空間可以用層（div）或者表格形式來(lái)實(shí)現(xiàn)，一般而言，長(zhǎng)條形狀的播放器會(huì)需要你留出640~760px(像素) 的寬度（也就是width為640px～760px），20~25px(像素) 的高度（也就是說(shuō)height為20px到25px）。但不要死搬書(shū)，具體要依據(jù)你自己博客結(jié)構(gòu)自行調(diào)整。
內(nèi)嵌機(jī)制的源代碼如下：
<IFRAME id=iframe1 name=iframe1 marginWidth=0 marginHeight=0 src="http://lamble.go3.icpcn.com/exobud_mp/exobud.htm" frameBorder=0 width=195px scrolling=no height=90></IFRAME>
其中，綠色部分就改成你自己的網(wǎng)頁(yè)播放器所在的地址罷——就是前一步驟讓你記住的，在瀏覽器里調(diào)試過(guò)，能夠讀出播放器頁(yè)面來(lái)的那個(gè)地址；width和height的具體數(shù)值需要你自己依據(jù)實(shí)際情況自行調(diào)整。
（如果不懂這些基本的代碼涵義，你上搜索引擎去查一下罷。我就不在這里羅嗦了）
把這段代碼放在你博中已經(jīng)預(yù)留出來(lái)的那部分空間對(duì)應(yīng)的代碼區(qū)域里，保存后，重新打開(kāi)你自己的博（有些博需要重新發(fā)布才能看到效果，比如blogbus），看到BloG頁(yè)面上出現(xiàn)一個(gè)漂亮的網(wǎng)頁(yè)播放器了嗎，同時(shí)是不是聽(tīng)到音箱里一陣傳來(lái)悅耳的音樂(lè)聲了呢？
很激動(dòng)罷……祝賀你，成功了呵呵：）
