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