Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Tuesday, May 08, 2007

[Flash] Mp3 Audio Player

  最近在「黃色小說」系列文章中,有嵌入「MPEG Audio Layer3」的檔案(故意打個全名,避免和「M P 3」(再故意來個全型+空白…一整個成府也太深了吧,囧rz..)這個敏感的字眼扯在一起,哈哈…這樣子Search Engine總找不到這個走在法律邊緣的Post了吧,吼吼吼……(但由於嵌入Example,被Spider爬到這篇Post的Source Code還是會破功的…不管三七二十一了 XD),言歸正傳,敢快來記錄一下如何嵌入這個「相當優美」的Audio Flash Player之語法。我測試過了,即使是個約3Mb大小的檔,也是可以在短短幾秒內,很順暢的播放出來...Cool!
資料來源:
.1 Pixel Out » Audio Player Wordpress plugin [官方站]
.Best Albums of 2006. [某個使用此Player的站]

快來瞧瞧底下的Demo吧...
.Example 1 (預設配色) :

<!--[if IE]>
<object width="290" height="24" type="application/x-shockwave-flash">
<param name="movie" value="http://chenkaie.googlepages.com/FlashMusicPlayer.swf?soundFile=http://YourFilePath.mp3" />
<param name="wmode" value="transparent"/></object>
<![endif]-->
<!--[if !IE]> -->
<embed src="http://chenkaie.googlepages.com/FlashMusicPlayer.swf?soundFile=http://YourFilePath.mp3" type="application/x-shockwave-flash" wmode="transparent" height="24" width="290"></embed>
<!-- <![endif]-->

.Example 2 (自訂配色) :

<!--[if IE]>
<object width="290" height="24" type="application/x-shockwave-flash">
<param name="movie" value="http://chenkaie.googlepages.com/FlashMusicPlayer.swf?&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0xF06A51&rightbghover=0xAF2910&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0xAF2910&soundFile=http://YourFilePath.mp3" />
<param name="wmode" value="transparent"/></object>
<![endif]-->
<!--[if !IE]> -->
<embed src="http://chenkaie.googlepages.com/FlashMusicPlayer.swf?&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0xF06A51&rightbghover=0xAF2910&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0xAF2910&soundFile=http://YourFilePath.mp3" type="application/x-shockwave-flash" wmode="transparent" height="24" width="290"></embed>
<!-- <![endif]-->

若你想讓他自動播放的話,那就多加「autostart=yes」這個參數吧!也就是加在上頭語法中的 .swf? 頭,要加更多參數的話,請以&連接,語法如下(更多的參數請見官網):
<embed src="http://chenkaie.googlepages.com/FlashMusicPlayer.swf?autostart=yes&soundFile=http://YourFilePath" type="application/x-shockwave-flash" height="24" width="290" wmode="transparent" ></embed>
[Updated 2007-05-09]
1.補充一下,有關底下留言問到的,會有白底的問題,如何設為透明色,方法就是,加上wmode="transparent"這項參數即可,上面的語法我已經以紅色字補充上去了...如此便不會破壞整個Blog的美感了,太棒了!!
2.感謝.Riviera網友所提供的資訊,使得此Flash Player在Firefox及IE皆能正常運作

47 Comments:

Who: Fan Class:
When: May 08, 2007 11:31 PM  

請問一下有辦法讓他關閉時旁邊一條白白的變成透明嗎?
因為我底色不是白色的
謝謝

Who: Unknown Class:
When: May 09, 2007 12:19 AM  

To BboyLil'Fany:
不好意思耶...我剛試一下,也試不出來,似乎沒有參數可以下耶...糟糕,我想.swf的播放程式應該要改才行得通了!

Who: Anonymous Class:
When: May 09, 2007 8:37 AM  

官方有提供.fla的原始檔可以修改。
還有我看到audio-player-admin.js和options-panel裡有背景透明的相關設定,但我不知道如何把他家到參數裡。

Who: Unknown Class:
When: May 09, 2007 8:56 AM  

To .Riviera:
有原始檔,那就太方便了...這應該是個好方法,若要透過你所說的那些檔改的話,是行不通的,因為這原本是WordPress的一個Plugin,那是專供WordPress用的檔案,我們只是將他偷出來用而已..XD..

Who: Anonymous Class:
When: May 09, 2007 9:11 AM  

另外提醒大家,如果是整首歌放Google Page,那沒多久就會因為超過流量而被暫停空間使用(約停24小時)。
建議放到yam 天空,然後用flashget找出原始位置,再當成音樂來源。

而且yam的伺服器速度非常快,預載整首幾乎是秒殺...

Who: Unknown Class:
When: May 09, 2007 9:34 AM  

To .Riviera:
謝謝 .Riviera 提供的資訊,相當實用...transparent終於也搞定了…呼!!

Who: Anonymous Class:
When: May 09, 2007 3:04 PM  

我發現,在IE(6或7皆一樣)下,撥放器無法正常顯示。

Who: Anonymous Class:
When: May 09, 2007 4:29 PM  

解決ie顯示錯誤的辦法...
參數照上面設定即可...

<!--[if IE]>
<object width="320" height="27" type="application/x-shockwave-flash">
<param value="http://chenkaie.googlepages.com/FlashMusicPlayer.swf?soundFile=http://你的音樂.mp3" name="movie"/></object>
<![endif]-->
<!--[if !IE]> -->
<embed width="320" src="http://chenkaie.googlepages.com/FlashMusicPlayer.swf?soundFile=http://你的音樂.mp3" height="27 " wmode="transparent" type="application/x-shockwave-flash"></embed>
<!-- <![endif]--></center>

Who: Unknown Class:
When: May 09, 2007 4:34 PM  

To .Riviera:
Cool Man...Good Job,謝謝Riviera所提供的,對於使用IE的人,實在是個福音!!還有提醒一下,Riviera的留言中,</center>,是多貼的...可以忽略

Who: Anonymous Class:
When: May 09, 2007 5:52 PM  

又發現一件事...

記得把"amp;"移除掉,不然有時候在不該出現amp;的地方出現amp;會使顏色設定錯誤。

Who: delang Class:
When: May 09, 2007 9:06 PM  

i already done the same thing here but wrote is malay language.

Who: Unknown Class:
When: May 09, 2007 10:49 PM  

To delang:
U should notice me that soon...^_^ thus I can save more time..

Who: Fan Class:
When: May 10, 2007 12:27 AM  

WOW...
感謝三位達人><
一下子就把問題都修正了

THX...

Who: Fan Class:
When: May 10, 2007 12:31 AM  

對了~
請問那個讓IE沒問題的語法
在其他的語法下也可以使用嗎?
因為我的blog在IE瀏覽下似乎常常會有些小問題。

Who: Unknown Class:
When: May 10, 2007 3:54 AM  

To .Riviera:
當然是可以使用的囉,你可以參考這篇[Browser] Browser Compatibility Notes,有更詳細的細節....Damn IE

Who: rockbird Class:
When: May 23, 2007 2:24 PM  

我的在IE跟firefox都可以撥放成功..
但是IE顯示會有問題

但是IE的時候會吃到下面blog的文章耶...

http://qrclub.blogspot.com/
用IE跟firefox開...IE吃到下面那篇文章..這哪裡出錯了?

Who: Unknown Class:
When: May 23, 2007 3:19 PM  

To 落克鳥兄:
我看了你的那篇文章的source code之後,發現底下這段code:
<!--[if IE]><object width="290" height="24" type="application/x-shockwave-flash"><param name="movie" value="http://210.71.187.122/lw/pagecode/audio-player/player.swf?soundFile=http://210.71.187.122/lw/sound/starsailor_thistime.mp3" /><param name="wmode" value="transparent"/></</object><![endif]-->
裡頭多了不應該多出來的</造成IE解讀出來版面錯亂,我猜Firefox 是自行修正了這個錯誤了..

Who: rockbird Class:
When: May 23, 2007 3:48 PM  

oh...感謝喔...是我修正的時候改錯?

還讓你debug抱歉...

Who: Unknown Class:
When: May 23, 2007 4:37 PM  

To 落克鳥兄:
好說好說...我以前也常搞出這種bug..囧,還好直覺有猜到這應該是Browser在parse HTML syntax時出錯...^_<

Who: eCake 寵物糕餅屋 Class:
When: June 24, 2007 12:27 AM  

我在 blogger 使用上遇到一個問題,只要把他擺在前面,在他後面的網頁元素就會不見耶!把擺到最後面就可以險示正常
不知道有沒有人發生跟我同樣的狀況?

A
B
C*
D
E
F

* = PLAYER
D,E,F 就會出不來

如把 PLAYER 擺到 F , A,B,C,D,E 則都會正常顯示

Who: electro Class:
When: June 24, 2007 7:47 PM  

請問一下怎麼用flashget找到yam影音的原始檔?
PS這個plug-in真的很漂亮,謝謝版主的介紹ㄟ

Who: Unknown Class:
When: June 25, 2007 8:29 AM  

To electro:
咦~~這個,我是沒用過,你可能要直接問問google大神了,不然知識也不錯用呀...
別客氣,有空常來..

Who: Unknown Class:
When: June 25, 2007 8:38 AM  

To eCake 寵物糕餅屋:
咦...會這樣子嗎...根據經驗法則,我猜應該是你的HTML語法沒弄好(可能是相對應該的Html Tag可能漏掉 or 產生交錯了..),類似上面rockbird的留言所描述的狀況一樣,導致你說的情形發生..(我猜的..XD)

Who: eCake 寵物糕餅屋 Class:
When: June 25, 2007 4:31 PM  

HTML語法沒弄好!!??
grrrrr... 那屋摳零!!
不是把 example 貼好以後改 mp3 路徑就好了嗎?

---- 傳說中的分格線 ----

樓上的 依勒剉先生 electro
用 firefox 檢視頁面資訊的功能 選 媒體(媒體最會爆料了!! errr 離題了)
找型態是內崁 那一串就是了 不過你自己要去頭去尾 就可以找到 mp3 的 url 位置了 (感覺好像叫唆殺人喔 = =)

Who: Unknown Class:
When: June 25, 2007 5:36 PM  

To eCake 寵物糕餅屋:
哇碼尷尬謀摳玲呢...XD!!
最近比較忙,有空我再來試試...
真的是很怪異...在IE跟Firefox都會出現同樣的情況囉?
--- 傳說中的分格線2 ----
感謝eCake先生幫忙解答這讓我開不了口的問題...囧!!

Who: Anonymous Class:
When: July 24, 2007 12:56 PM  

Hi Kai,
請問,是否可用JavaScript去控制我想要播放的歌曲呢 ?

Who: Unknown Class:
When: July 24, 2007 2:05 PM  

To Sko:
咦...關於這個問題..我想應該是辦得到的,但我倒是沒有收集這方面的資訊,你可能請教一下Google大神....

Who: Anonymous Class:
When: September 24, 2007 4:17 PM  

嗯。。。很不貼心的IE

Who: Unknown Class:
When: September 24, 2007 7:31 PM  

To ang ang:
I can't agree anymore!

Who: Anonymous Class:
When: February 11, 2008 5:14 AM  

恩~最常發生的問題就是IE和火狐只能擇一。
先來裝裝套件試試嚕!謝謝分享資訊呢^_^

Who: Unknown Class:
When: February 12, 2008 3:04 AM  

To 喵空:
請便...^_^

Who: Unknown Class:
When: March 15, 2008 2:46 PM  

請問一下,我是用blogger來播放音樂的。我想要讓他自動播放,也照你的所說的設定去設了。但重新檢視後那個播放的bar還是很乖地躺在左邊...
我實在是搞不懂,麻煩了。 QQ

Who: Unknown Class:
When: March 16, 2008 1:34 AM  

To fstyle:
你的連直接播也沒成功,也就是你說的"個播放的bar還是很乖地躺在左邊...",我看了一下你的原始碼,似乎語法有問是題,我是你是不小心貼錯了,少了個&或是多打了什麼,你再仔細檢查一次..

Who: Unknown Class:
When: March 16, 2008 11:57 PM  

多謝Tsung-Kai,我成功了

QQ

Who: Anonymous Class:
When: May 16, 2008 7:33 AM  

Hello Kaie:)
想請教您,為何點下暫停鈕
會另外開啟一個分頁呢?

Who: Unknown Class:
When: May 18, 2008 10:09 AM  

To IRA:
因為你在html語法多了些不必要的東西,你在原本嵌入的flash player外層多了底下粗體字的部份
<a title="" href="" target="_blank">
這是你嵌入的player語法
</a>

Who: Anonymous Class:
When: July 20, 2008 4:40 PM  

Thanks a lot! I like this player :)

Who: Anonymous Class:
When: August 26, 2008 10:46 AM  

我帶走囉
謝謝 :)

Who: hguei Class:
When: September 16, 2008 9:18 PM  
This comment has been removed by the author.
Who: hguei Class:
When: September 16, 2008 9:22 PM  

code錯囉~!
</</object> ----> </object>
才對,firefox會自動修正,但IE 6會死給你看@_@

Who: Unknown Class:
When: September 27, 2008 11:36 PM  

To hguei:
感謝你的提醒,已修正..

Who: Anonymous Class:
When: December 14, 2008 5:11 PM  

我测试了,音乐标题有乱码,如何解决啊?

Who: Unknown Class:
When: December 14, 2008 8:56 PM  

To Anonymous:
這....這....我也不太清楚耶,好像只支援英文的樣子!!

Who: shoegaze addict Class:
When: July 03, 2009 12:00 AM  

請問一下喔!
我拿了你的語法然後套用在我的blogger上,結果是可以播放音樂的。但是我的朋友按播放鍵時都一直buffering,等很久都沒有音樂,就連七秒不到1MB的音樂也沒辦法聽...不知是那裡出了問題?
我放置的mp3空間是upload-mp3

謝謝!

Who: Unknown Class:
When: July 03, 2009 1:37 AM  

@Hector the Vet
咦,播不出來...若換個路徑會好,那就是空間的問題了!

Who: Anonymous Class:
When: October 14, 2009 3:21 PM  

不好意思
我想請問要怎麼在播放器上顯示檔案名稱?
語法要怎麼寫?
感謝!!!

Who: Unknown Class:
When: October 15, 2009 10:55 PM  

@Anonymous
這個player好像不支援...XD
或許有出新版的,你可以去找看看..