目前,絕大多數(shù)的音樂播放器都是flash實(shí)現(xiàn)的,例如Google的音樂播放,百度MP3,新浪樂庫(kù)等。在HTML5未來(lái)臨的時(shí)候,flash技術(shù)是最上佳的選擇。本文將講解一些flash音樂播放器相關(guān)的內(nèi)容,不過不是講怎么開發(fā)制作,而是如何在自己的站點(diǎn)上使用國(guó)內(nèi)大型網(wǎng)站的flash音樂播放器,而且本文所涉及的音樂播放器是專指單音樂播放器,顧名思意就是一次只能播放一首歌的播放器,常用在博客日志系統(tǒng)中。本文講展示三款單音樂播放器,分別來(lái)自新浪網(wǎng),人人網(wǎng)還有開心網(wǎng)。
本文的示例音樂是陳琳的《雨愛》,最近挺熱的一首歌曲,歌曲地址是:http://api.ning.com/files/1LRx…p4_/200912202458577.mp3,由于本頁(yè)面同時(shí)又多個(gè)播放器,為了防止音樂混繞,所以歌曲默認(rèn)是不播放的(新浪的播放器無(wú)默認(rèn)播放與否的參數(shù))。
我們先來(lái)看看新浪博客的這個(gè)音樂播放器,這個(gè)播放器可以說是這三個(gè)播放器中功能最簡(jiǎn)單,技術(shù)含量最低,ui最差的一個(gè)播放器了,雖說新浪博客很牛叉,但是這個(gè)音樂播放器我打不及格。其沒有循環(huán)播放以及自動(dòng)播放(源代碼已經(jīng)寫死了自動(dòng)播放)的控制,沒有直接調(diào)節(jié)進(jìn)度的功能,靜音的ui沒有仔細(xì)設(shè)計(jì),在切換時(shí)可以看到一點(diǎn)點(diǎn)的錯(cuò)位。更加無(wú)法容忍的是,就算功能如此簡(jiǎn)單,還是有bug——靜音后,當(dāng)歌曲第二次播放時(shí)又有聲音了,靜音失效。此播放器在IE下經(jīng)常無(wú)法播放歌曲,至少在我的機(jī)子上是這樣的。
代碼相關(guān)
1、播放器的地址
此播放器地址如下:http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf,不保證以后地址會(huì)變換,所以您也可以從我的服務(wù)器上下載(右鍵-另存為):http://www.zhangxinxu.com/study/flash/sina_music_player.swf。
2、相關(guān)的代碼
<embed width="238" height="24" name="FlashVars" wmode="opaque" play="true" loop="false" scale="showall" src="http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf" FlashVars="url=http://api.ning.com/files/1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7e63gp4_/200912202458577.mp3" type="application/x-shockwave-flash"></embed>
注意到代碼部分的FlashVars沒,這個(gè)是用來(lái)給flash傳參的,一種與flash的交互手段,傳遞的參數(shù)就是要播放的音樂的地址,所以如果您想更換歌曲只要將此mp3歌曲地址換掉就可以了。例如我們想要用此播放器放一首張靚穎的《我相信》,只要將mp3地址替換為http://mp3.m.mop.com/mp3/new_mp3/2009/12/22/ae874d7db9ad496c976252db66902723.mp3就可以了。結(jié)果就是:
<embed width="238" height="24" name="FlashVars" wmode="opaque" play="true" loop="false" scale="showall" src="http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf" FlashVars="url=http://mp3.m.mop.com/mp3/new_mp3/2009/12/22/ae874d7db9ad496c976252db66902723.mp3" type="application/x-shockwave-flash"></embed>
3、獲取代碼
您可以直接復(fù)制上面的代碼,或是通過下面的動(dòng)態(tài)生成。
輸入mp3地址:(僅支持MP3格式)
人人網(wǎng)的音樂播放器從界面上看就比較專業(yè),質(zhì)感很細(xì)膩,適當(dāng)?shù)膱A角。功能上來(lái)講,也不賴,可以控制是否自動(dòng)播放,可以直接調(diào)播放的進(jìn)度。沒有遇到瀏覽器不能播放的情況。
代碼相關(guān)
1、播放器的地址
此播放器在人人網(wǎng)上的地址是:http://s.xnimg.cn//swf/player.swf,您可以下載到本地直接使用。或是使用我服務(wù)器上存放的地址:http://www.zhangxinxu.com/study/flash/renren_music_player.swf
2、相關(guān)代碼
例如本例子完整代碼如下:
<embed width="360" height="30" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="sameDomain" bgcolor="#ffffff" scale="noscale" quality="high" menu="false" loop="false" wmode="transparent" src="http://s.xnimg.cn//swf/player.swf?url=http://api.ning.com/files/1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7e63gp4_/200912202458577.mp3&Autoplay=0" />
上面代碼部分的MP3地址參數(shù)直接寫在的播放器地址的后面,您也可以使用FlashVars屬性設(shè)置,效果一樣的。其中的參數(shù)有兩個(gè)一個(gè)是MP3地址 – “url=”,另外一個(gè)參數(shù)是”Autoplay”,用以表示是否自動(dòng)播放,0表示不自動(dòng)播放,1表示自動(dòng)播放。
3、獲取代碼
如果您想更換MP3地址,復(fù)制上面的代碼,然后替換URL就可以,或是通過下面的腳本動(dòng)態(tài)生成。
輸入mp3地址:(僅支持MP3格式)
自動(dòng)播放
開心網(wǎng)與人人可以說是競(jìng)爭(zhēng)對(duì)手,因?yàn)榫W(wǎng)站性質(zhì),目標(biāo)群體有很多的一致之處,就連播放器也差不多這種差不多不是在界面上,而是在功能上。例如開心網(wǎng)的這個(gè)播放器也是可以控制是否自動(dòng)播放,可以調(diào)節(jié)音樂的進(jìn)度,連參數(shù)也差不多一致。您可以點(diǎn)擊下面的播放按鈕體驗(yàn)一下。
代碼相關(guān)
1、播放器地址
此播放器地址如下:http://img.kaixin001.com.cn/swf/diary/mp3player-3.swf,您可以下載到本地直接使用?;蚴鞘褂梦曳?wù)器上存放的地址:http://www.zhangxinxu.com/study/flash/kaixin_music_player.swf
2、相關(guān)代碼
例如本例子代碼如下:
<embed width="365" height="50" align="middle" flashvars="url=http://api.ning.com/files/1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7e63gp4_/200912202458577.mp3&autoplay=0" src="http://img.kaixin001.com.cn/swf/diary/mp3player-3.swf" wmode="transparent" loop="false" menu="false" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
外部參數(shù)有兩個(gè),與上面的人人網(wǎng)的一致,一個(gè)是MP3地址,另外一個(gè)是是否自動(dòng)播放。前者參數(shù)名為url,后面直接跟MP3路徑就好,后者參數(shù)名為autoplay,后面值為1表示自動(dòng)播放,0表示不是自動(dòng)播放。例如:flashvars="url=http://zhangxinxu.com/m...c/愛情.mp3&autoplay=1"
就表示自動(dòng)播放一個(gè)名為”愛情”的MP3文件。
3、獲取代碼
如果您想更換MP3地址,復(fù)制上面的代碼,然后替換URL就可以,或是通過下面的腳本動(dòng)態(tài)生成。
輸入mp3地址:(僅支持MP3格式)
自動(dòng)播
聯(lián)系客服