播放器代碼教程

小酷 · 發(fā)表于 2008-1-9 00:05

第一步，加播放器的代碼（不用別人做的JS播放器），我只要最簡單的。

其實要說最簡化的播放背景音樂的代碼，則下面的代碼是最簡單的了
<embed src="背景音樂網(wǎng)址">

呵呵，我用的是：

loop="-1" 表示無限次循環(huán)播放，可設置播放次數(shù)，用具體數(shù)字代替即可，比如我希望它播放兩次，則loop="2"
controls="ControlPanel"這個控制選項可省略
width="0" height="0"表示隱藏播放。想設置播放器的大小，設置值即可，比如width="480" height="25"

我是放在文章里的，所以直接把文章切換到代碼模式粘貼上剛才的代碼就可以了。

第二步，實現(xiàn)連續(xù)播放多首歌曲

播放器會弄了，用百度或者搜刮找到歌曲的地址，替換代碼中“背景音樂網(wǎng)址”就可以播放歌曲了。但是這樣只能是一首歌曲啊。沒關系，記得當初用winamp或者千千靜聽的時候不是有個播放列表嗎？對，用m3u格式。新建一個記事本文檔，在里面寫上如下代碼保存為“任意名.m3u”：

<ASX version ="3.0">
<Entry>
<Ref href = "以.mid.wma.mp3等結尾的音樂網(wǎng)址1"/>
</Entry>
<Entry>
<Ref href = "以.mid.wma.mp3等結尾的音樂網(wǎng)址2"/>
</Entry>
<Entry>
<Ref href = "以.mid.wma.mp3等結尾的音樂網(wǎng)址3"/>
</Entry>
需要更多歌曲可重復“<Entry>……</Entry>”代碼
</ASX>

嗯，然后？把保存的文件（例如musci.m3u）上傳到你的個人主頁或者隨便其他水木地方（我是傳到googlepage的）。再把m3u的IE地址放到第一步中的“背景音樂地址”處就可以實現(xiàn)連續(xù)播放的目的了。不信，試試看。

因為當你打開博客的時候，雖然不能自動播放，但是播放器首先要加載第一首歌曲，當遇到錯誤無法識別的歌曲地址時就會自動跳轉(zhuǎn)到第二首而播放第二首歌曲。

不過這里需要注意的是，第二首歌曲的地址里不能帶有漢字，否則跳轉(zhuǎn)到第二首歌曲的時候它也不會自動播放，第三首，第四首歌曲之后就沒限制了，只要歌曲地址對就行。

黑色播放器

棕色播放器

閃光播放器外加蒙朧化

<CENTER>
<TABLE style="BORDER-RIGHT: #f1dda1 2px ridge; BORDER-TOP:
#bdb76b 2px ridge; BORDER-LEFT: #f1dda1 2px ridge;
BORDER-BOTTOM: #bdb76b 2px ridge; BACKGROUND-COLOR: white"
borderColor=#ffffff cellPadding=0 width=300 align=center
background=http://bbs.muwen.com/fileuploaddir/4B2686448.4.gif
border=0><TBODY><TR><TD width=300 height=20 cellPadding="0"
cellSpacing="0"><TABLE align=center border=0><TBODY><TR><TD
style="FILTER: alpha(opacity=60,style=3)">
<

align=center><EMBED style="FILTER: invert(); WIDTH:
290px; HEIGHT: 28px" src=音樂連接地址 type=audio/x-ms-wma
autostart="true" loop="-1"
volume="0"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>

花播放器

<

align=center><TABLE style="BORDER-COLLAPSE: collapse"
height=24 cellSpacing=0 cellPadding=0 width=300 align=center
background=http://bbs.muwen.com/fileuploaddir/4B258184577.gif
border=1><TBODY><TR><TD style="FILTER:
Chroma(Color='#000000')"><

align=center><EMBED src=音樂連接地址
width=300 height=24 type=audio/mpeg Pausini--Volevo Dirti
Che Ti Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1"
volume="0" autostart="true" loop="-1" 32-01.wma Path Winding
The - Kern></P></TD></TR></TBODY></TABLE>
播放器蒙朧化

<P align=center><TABLE style="FILTER: Alpha(Opacity=100,
FinishOpacity=0, Style=3, StartX=20, StartY=40, FinishX=0,
FinishY=0)gray(); WIDTH: 300px; HEIGHT:
60px"><TBODY><TR><TD><EMBED src=音樂連接地址 width=270 height=40
type=audio/mpeg loop="true" autostart="true" panel="0">
</TD></TR></TBODY></TABLE></P>
兩端朦朧化

再補充一些
以前經(jīng)常有人會問我如何在頁面中加入播放器？對于一些新手來說，可以在編輯時點擊插入播放器而無需用到HTML代碼。但是，千篇一律的款式是不是會讓人久而生厭呢？其實，要想讓你自己的網(wǎng)頁變得生動，一款漂亮的，合乎頁面整體設計的播放器就顯得極其重要了。現(xiàn)在為你推薦一些漂亮的播放器，你只需復制代碼放入你的文章里，就可以使用了。
一、幾款最常用的播放器

代碼如下
(EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg
loop="-1" autostart="FALSE" volume="0")

代碼如下
(EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50
type=audio/mpeg volume="0" autostart="TRUE" loop="true")
代碼如下
(EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05
type=audio/mpeg loop="-1" autostart="false" volume="0")

代碼如下
(EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45
type=audio/mpeg loop="-1" autostart="true" volume="0")
重要提示：
1 復制時務必將（EMBED。。。）前后的括號（）替換成<>。這點非常重要。
2 WIDTH代表播放器寬度，HEIGHT代表高度，后面的數(shù)值可依自己喜好進行調(diào)整。
3 AUTOSTART="TRUE" 這里TRUE代表自動播放，如果換成FALSE則代表手動播放。
二、裝飾美化你的播放器
有了基本的款式后，我們就可以根據(jù)自己的想象力，巧用HTML的表格，根據(jù)自己的圖片素材，裝飾美化自己的播放器啦。只要你有足夠的創(chuàng)意，調(diào)整代碼，就可以得到各式各樣的播放器。這里拋磚引玉先介紹幾款。
首先我們可以為黑色播放器加上一個邊緣
(中間綠底的部分為原黑色播放器代碼)

<TABLE style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP:
#000000 3px dashed; BORDER-LEFT: #000000 3px dashed;
BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0
bgColor=#00000>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#000000 align=center border=1>
<TBODY>
<TR>
<TD><P align=center><EMBED style="FILTER: Xray"
src=http://cherry.jazzsky.com/LIU/all_about_you.wma width=300
height=45 type=audio/mpeg volume="0" autostart="false" loop="-
1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
當然也可以為藍色播放器加上粉色邊緣
(中間粉底部分為原藍色播放器代碼)

代碼如下
　
<TABLE style="BORDER-RIGHT: #ff69b4 3px dotted; BORDER-TOP:
#ff69b4 3px dotted; BORDER-LEFT: #ff69b4 3px dotted;
BORDER-BOTTOM: #ff69b4 3px dotted" cellSpacing=0 cellPadding=0
align=center bgColor=white>
<TBODY>
<TR>
<TD><TABLE borderColor=#ff69b4 align=center bgColor=#ffccf5
border=2>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45
type=audio/mpeg volume="0" autostart="false"
loop="-1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
還可以將播放器置于一個單獨的表格里，并加上表格的透明特效，播放器上的花紋就是表格的底圖。(中間紫底部分的為原藍色播放器代碼)

代碼如下:
<TABLE borderColor=#4f3256 align=center
background=http://upload.yourblog.org/20057/kaka967.20050722115212.png
border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=50,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45
type=audio/mpeg loop="-1" autostart="false"
volume="0"></P></TD></TR></TBODY></TABLE>
還可以利用動態(tài)的GIF背景做成動態(tài)播放器
(中間藍底部分為原來的灰色播放器代碼

代碼如下:
<TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0
background=http://www.yhbbs.com/UploadFile/2004-12/2004123023101352.gif
border=2>
<TBODY>
<TR>
<TD>
<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=60,style=3)">
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300
height=45 type=audio/mpeg volume="0" autostart="false"
loop="-1"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE>
甚至還可以將動態(tài)背景只在播放器底部運行
中間棕底字體為原灰色播放器代碼

代碼如下
<TABLE height=40 cellSpacing=0 cellPadding=0 width=300
background=http://bbs.guqu.net/UploadFile/2005-4/20054302075888035.gif
border=1>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: Chroma (Color='#000000')" height=40
cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY>
<TR>
<TD>
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300
height=40 type=audio/mpeg loop="-1" autostart="false"
volume="0"></P></TD></TR></TBODY></TABLE></TD><
/TR></TBODY></TABLE>

這么多五彩繽紛的播放器是不是很吸引你呢？只要你肯花心思，你可以用HTML
表格做成兩層或三層的播放器來，呈現(xiàn)你自己不同于他人的特色。這是一個崇尚個性的年代，模仿固然能讓你找到捷徑，但是創(chuàng)造性才是決定你是否能吸引人的關健。言歸正傳，如果這個貼能讓你有所啟發(fā)，就達到我們的本意了。也希望今后能看到更多獨具特色的播放器出現(xiàn)。