【製帖幫助】如何在音樂快遞中發表xml多曲列表的音樂帖- by 左右開弓

 

【製帖幫助】如何在音樂快遞中發表xml多曲列表的音樂帖

有些朋友曾問我如何製作多曲目xml列表的音樂帖。一直想寫個簡單的說明，但一直未做到。今天終於下定決心，一定要把它完成。
其實，從技術上講，這並不太難。關鍵是需要一點HTML語言基礎，對HTML代碼有一定理解後便可依葫蘆畫瓢。下麵以麗班的一個實例來講解有關的代碼。

麗班曾發過一個靚帖，【馬頭琴專輯】[我從草原來]：
http://web.wenxuecity.com/BBSView.php?SubID=music&MsgID=524980。下麵就是此帖的有關代碼（感謝麗班的代碼）：

<STYLE>body{ background-image:url(); background-attachment:fixed; background-repeat:repeat;background-color:#ffffff; background-position:top left;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1,StartColorStr='#3f84c3', EndColorStr='#ffffff'); }table{ background-color:transparent; }td{ background-color:transparent; }A:link { FONT-SIZE: 10.5pt; COLOR: #275e91; TEXT-DECORATION: none }A:hover {text-decoration: underline; color: #275e91; background-color: #ffffcc;}A:visited { FONT-SIZE: 10.5pt; COLOR: #275e91; TEXT-DECORATION: none }A:active { TEXT-DECORATION: none }</STYLE><CENTER><table cellspacing="0" cellpadding="0" border=0><tr><td><TABLE cellSpacing=0 border=0 ><TBODY><TR><TD vAlign=center align=middle border="0" bgcolor="#d3e8cc" ><embed style="WIDTH: 960;HEIGHT: 622px"onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1263939407.swf" type="application/octet-stream" quality="high" wmode="transparent" ></embed></TD></TR></TBODY></TABLE><div style="LEFT: -150px; POSITION: relative; TOP: -470px"><div id="layer1" style="Z-INDEX: -1; LEFT:240px; WIDTH: 450px; POSITION: absolute; TOP: 325px; HEIGHT: 400px"><embed name="mp3player" pluginspage="http://www.macromedia.com/go/getflashplayer"onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1234581326.swf" width="460" height=80" type="application/x-shockwave-flash" border="0" wmode="transparent"flashvars="&config=http://space.wenxuecity.com/media/1234580943.xml&file=http://space.wenxuecity.com/media/1263865013.xml" quality="high" menu="false" /></div></div></TD></TR></TABLE></CENTER><CENTER><table bordercolor="#ffffff" cellspacing="0" cellpadding="0" align="center" border="0"><tbody><tr><td width="900"><font style="FONT-SIZE: 12.5pt; COLOR: #132b56; LINE-HEIGHT: 140%"> <br><br> 【專輯簡介】 <br><br> 唱片名稱：我從草原來<br> 出版公司：廣東音像出版社<br> 發行時間：2006年2月6日<br><br> 早晨，懷抱一夜悵惘，彎腰尋覓草葉上的珠鏈。莫名的繾綣，爬上溪邊的柳梢。 不遠處，牧羊人揚起鞭子，將一夜雨聲趕進你的花園。隱約傳來一陣陣馬頭琴的樂曲聲。 繚繞在空氣中，如泣如訴。雖然緩慢、低沉，卻很清晰、細膩， 寬廣之中透著孤獨、哀怨和思戀...... <br> 這張音樂專輯，獨具創新地將流行音樂 與民族音樂完美結合， 給馬頭琴帶來了前所未有的激情，令人心動。 演奏者那高超技巧更是一絕， 時而委婉低回，時而激越高亢， 時而深沉憂鬱。音色準確鮮明， 空氣感與分隔度表現一絕， 加上出色的錄音效果，速度感十足， 妙韻悠長，給愛樂者們帶來一種全新的時代感， 讓人忘卻煩惱，盡情地享 受這無與倫比的馬頭琴聲。<br><br> 【專輯曲目】 <br><br> 01. 美麗的草原我的家<br> 02. 千紙鶴<br> 03. 蒙古人<br> 04. 天堂<br> 05. 在水一方<br> 06. 我從草原來<br> 07. 走西口<br> 08. 家鄉<br> 09. 翻身農奴把歌唱<br> 10. 大海啊故鄉<br> 11. 北國之春<br> 12. 北京的金山上 <br></CENTER>

上述代碼可劃分為五部分。第五部分的專輯簡介文字說明在此就忽略不講了。第一部分為:<STYLE>body{ background-image:url(); background-attachment:fixed; background-repeat:repeat;background-color:#ffffff; background-position:top left;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1,StartColorStr='#3f84c3', EndColorStr='#ffffff'); }table{ background-color:transparent; }td{ background-color:transparent; }A:link { FONT-SIZE: 10.5pt; COLOR: #275e91; TEXT-DECORATION: none }A:hover {text-decoration: underline; color: #275e91; background-color: #ffffcc;}A:visited { FONT-SIZE: 10.5pt; COLOR: #275e91; TEXT-DECORATION: none }A:active { TEXT-DECORATION: none }</STYLE>
這段代碼用來說明整個頁麵的風格樣式。其中，是風格樣式標簽，作用是統一整個頁麵的風格。其中，代碼td和body用來控製表格中和不在表格中的文字表現形式。font－size定義了文字大小，而line－height用於控製行距。以A開頭的幾句控製鏈接文字的風格：使其在鏈接、正在被點擊過程和點擊後都呈現不同的樣式，更主要的是消除了鏈接文字的下劃線，效果試試就知道啦。另外，在color後的顏色也可用black、blue、white限定詞等來代替顏色的16進製碼，例如可寫成color:blue的形式。

第二部分為:
<embed style="WIDTH: 960;HEIGHT: 622px"onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1263939407.swf" type="application/octet-stream" quality="high" wmode="transparent" ></embed>
這一塊是作者（麗麗）的主要(Flash)畫麵。它標明了Flash畫麵的尺寸和Flash畫麵的源:

http://space.wenxuecity.com/media/1263939407.swf。

第三部分為:
<div style="LEFT: -150px; POSITION: relative; TOP: -470px"><div id="layer1" style="Z-INDEX: -1; LEFT:240px; WIDTH: 450px; POSITION: absolute; TOP: 325px; HEIGHT: 400px">
這段代碼是說明下麵的Flash Media播放器的相對/絕對位置和尺寸。這個位置是相對當前位置而言，"LEFT： -150px; POSITION: relative; TOP: -470px;"是指播放器的左邊界從當前位置向左150pixels，播放器上邊界向上470pixels。後同此理。屏幕的左上角是絕對坐標(0,0)。最終的位置還得根據自己的預覽作調整。在麗班的此例中，Flash MP3 播放器是設在了主畫麵的左下角上，也就是深綠的草地上。

第四部分緊接著第三部分下麵，即<embed ... />所包含部分:
<embed name="mp3player" pluginspage="http://www.macromedia.com/go/getflashplayer"onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1234581326.swf" width="460" height=80" type="application/x-shockwave-flash" border="0" wmode="transparent"flashvars="&config=http://space.wenxuecity.com/media/1234580943.xml&file=http://space.wenxuecity.com/media/1263865013.xml" quality="high" menu="false" />
這也就是真正的Flash MP3播放器說明部分。它定義了播放器的顯示尺寸(Width and Height in pixels);它定義了Flash MP3播放器的源，即onload="javascript:if(this.width>450) this.width=450" src="
http://space.wenxuecity.com/media/1234581326.swf"（你可以直接套用這個源，也可Mouse右擊另存至Local，然後再上傳取得一新的路徑）；它還定義了此播放器所需的配置文件(Config xml file)： config=http://space.wenxuecity.com/media/1234580943.xml(可Mouse右擊另存至Local)。麗班在此運用了淺色，因為背景是深綠的草地。如果你想選用其它顏色，你可修改你的Local copy。注意，你隻需修改其中COLOR有關的部分，如下所示：
<backcolor>ffffaa</backcolor> (這裏有個小錯，"ffffaa"前missing"0x")<frontcolor>0xC1E1EC</frontcolor><lightcolor>0xC1E1EC</lightcolor>
其中，0x後麵的6個數字或字母是HTML色彩十六進製編碼，可參考
http://html-color-codes.info/。修改完畢後，再上傳至WXC的UPLOAD SITE，用你的QQH中得到的URL地址替換上述代碼中的CONFIG部分，即config=http://space.wenxuecity.com/media/1234580943.xml中的桔黃色背景部分。實在想偷懶，也可直接替換成別人已上傳的CONFIG xml，如我的：
http://space.wenxuecity.com/media/1260390027.xml（深藍為主色調）。

好，現在再講最關鍵的部分，即xml的歌曲列表(xml playlist)。它在上述embed代碼中：file=http://space.wenxuecity.com/media/1263865013.xml部分(可Mouse右擊另存至Local)。這個FILE的內容如下（隻列出2首曲目，其餘忽略，可類推）：
<playlist version="1"><title>Sample PHP Generated Playlist</title><info>http://www.jeroenwijering.com/</info><trackList><track><location>http://space.wenxuecity.com/media/1263851276.mp3</location><annotation> 01. 美麗的草原我的家 </annotation><info>blank</info></track><track><location>http://space.wenxuecity.com/media/1263854002.mp3</location><annotation> 02. 千紙鶴</annotation><info>blank</info></track>...</trackList></playlist>
不難看出，每一首曲目由<track>開始，用</track>結束。在<location>...和</location>之間的是每一首歌曲mp3在WXC Upload的URL地址，可以是你上傳的，也可以是別人上傳的。<annotation>和</annotation>標誌的，則是你想讓Flash MP3播放器在播放該曲時顯示的曲名。<info>blank</info>可以忽略，不用考慮。當你修改完xml歌曲列表後，上傳至WXC，用你的QQH中得到的URL地址替換上述代碼中的file部分，即file=http://space.wenxuecity.com/media/1263865013.xml中的淺藍背景部分。

有一點特別注意的地方是，xml文件是純文本文件，一般用Notepad就能做。但是，保存時切記用"UTF-8"(Encoding)。否則，中文有可能顯示成亂碼。

上麵囉囉嗦嗦講解了如何用多曲目xml列表在WXC音樂快遞中發音樂帖、如何製作xml列表。可能還是會有朋友不太明白具體怎麽做xml曲目列表。為此，我為大家做了一個小工具：文學城xml曲目列表生成器（文學城XML Playlist Generator):http://www.freewebtown.com/zykg/tools/playlistgenerator/index.html。具體如下所示：

文學城 XML Playlist Generator Title Info Location (URL) Annotation This is a 樣板 左右開弓 編製 http://space.wenxuecity.com/media/0123456789.mp3 Track 01: 樣板曲 1. + - Your playlist code (e.g. save it to "playlist.xml"): <?xml version="1.0" encoding="UTF-8"?><playlist version="1" xmlns="http://xspf.org/ns/0/"><title>This is a 樣板</title><info>左右開弓 編製</info><trackList><track><location>http://space.wenxuecity.com/media/0123456789.mp3</location><annotation>Track 01: 樣板曲 1.</annotation><info>blank</info></track></trackList></playlist>

上麵，"Title"欄和"Info"欄內隨你喜歡，想填啥就填啥。"Location (URL)"欄內就是你所上傳至WXC的MP3曲目的URL（上傳完在你的QQH中提示）。"Annotation"欄內是你想讓MP3播放器在播放該曲時顯示的曲名。Click最右端的"+"/"-"符號，可增加或減少曲目。最後，生成的XML曲目列表在下半部分顯示。你可Copy-Paste/Save至Local，然後再上傳至WXC。用QQH中的到的URL替換下麵代碼中的file=http://space.wenxuecity.com/media/1267026923.xml中的淺藍背景部分。
<div style="LEFT: -0px; POSITION: relative; TOP: -400px"> <div style="Z-INDEX: 6; LEFT: 220px; TOP: 815px; WIDTH: 720px; POSITION: absolute; HEIGHT: 935px"> <EMBED style="WIDTH: 580px; HEIGHT: 80px" pluginspage=http://www.macromedia.com/go/getflashplayer onload="javascript:if(this.width>450) this.width=450" src=http://space.wenxuecity.com/media/1234508437.swf width=600 height=255 type="application/octet-stream" flashvars="&config=http://space.wenxuecity.com/media/1267252205.xml&file=http://space.wenxuecity.com/media/1267026923.xml" menu="false" quality="high" wmode="transparent" border="0"></embed></div></div>

最後，在你的LOCAL，或你的博客中測試、調整，將最滿意的結果發表。祝大家發帖、賞帖、灌水愉快！

[打印]