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:
When: May 08, 2007 11:31 PM
請問一下有辦法讓他關閉時旁邊一條白白的變成透明嗎?
因為我底色不是白色的
謝謝
When: May 09, 2007 12:19 AM
To BboyLil'Fany:
不好意思耶...我剛試一下,也試不出來,似乎沒有參數可以下耶...糟糕,我想.swf的播放程式應該要改才行得通了!
When: May 09, 2007 8:37 AM
官方有提供.fla的原始檔可以修改。
還有我看到audio-player-admin.js和options-panel裡有背景透明的相關設定,但我不知道如何把他家到參數裡。
When: May 09, 2007 8:56 AM
To .Riviera:
有原始檔,那就太方便了...這應該是個好方法,若要透過你所說的那些檔改的話,是行不通的,因為這原本是WordPress的一個Plugin,那是專供WordPress用的檔案,我們只是將他偷出來用而已..XD..
When: May 09, 2007 9:11 AM
另外提醒大家,如果是整首歌放Google Page,那沒多久就會因為超過流量而被暫停空間使用(約停24小時)。
建議放到yam 天空,然後用flashget找出原始位置,再當成音樂來源。
而且yam的伺服器速度非常快,預載整首幾乎是秒殺...
When: May 09, 2007 9:34 AM
To .Riviera:
謝謝 .Riviera 提供的資訊,相當實用...transparent終於也搞定了…呼!!
When: May 09, 2007 3:04 PM
我發現,在IE(6或7皆一樣)下,撥放器無法正常顯示。
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>
When: May 09, 2007 4:34 PM
To .Riviera:
Cool Man...Good Job,謝謝Riviera所提供的,對於使用IE的人,實在是個福音!!還有提醒一下,Riviera的留言中,</center>,是多貼的...可以忽略
When: May 09, 2007 5:52 PM
又發現一件事...
記得把"amp;"移除掉,不然有時候在不該出現amp;的地方出現amp;會使顏色設定錯誤。
When: May 09, 2007 9:06 PM
i already done the same thing here but wrote is malay language.
When: May 09, 2007 10:49 PM
To delang:
U should notice me that soon...^_^ thus I can save more time..
When: May 10, 2007 12:27 AM
WOW...
感謝三位達人><
一下子就把問題都修正了
THX...
When: May 10, 2007 12:31 AM
對了~
請問那個讓IE沒問題的語法
在其他的語法下也可以使用嗎?
因為我的blog在IE瀏覽下似乎常常會有些小問題。
When: May 10, 2007 3:54 AM
To .Riviera:
當然是可以使用的囉,你可以參考這篇[Browser] Browser Compatibility Notes,有更詳細的細節....Damn IE
When: May 23, 2007 2:24 PM
我的在IE跟firefox都可以撥放成功..
但是IE顯示會有問題
但是IE的時候會吃到下面blog的文章耶...
http://qrclub.blogspot.com/
用IE跟firefox開...IE吃到下面那篇文章..這哪裡出錯了?
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 是自行修正了這個錯誤了..
When: May 23, 2007 3:48 PM
oh...感謝喔...是我修正的時候改錯?
還讓你debug抱歉...
When: May 23, 2007 4:37 PM
To 落克鳥兄:
好說好說...我以前也常搞出這種bug..囧,還好直覺有猜到這應該是Browser在parse HTML syntax時出錯...^_<
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 則都會正常顯示
When: June 24, 2007 7:47 PM
請問一下怎麼用flashget找到yam影音的原始檔?
PS這個plug-in真的很漂亮,謝謝版主的介紹ㄟ
When: June 25, 2007 8:29 AM
To electro:
咦~~這個,我是沒用過,你可能要直接問問google大神了,不然知識也不錯用呀...
別客氣,有空常來..
When: June 25, 2007 8:38 AM
To eCake 寵物糕餅屋:
咦...會這樣子嗎...根據經驗法則,我猜應該是你的HTML語法沒弄好(可能是相對應該的Html Tag可能漏掉 or 產生交錯了..),類似上面rockbird的留言所描述的狀況一樣,導致你說的情形發生..(我猜的..XD)
When: June 25, 2007 4:31 PM
HTML語法沒弄好!!??
grrrrr... 那屋摳零!!
不是把 example 貼好以後改 mp3 路徑就好了嗎?
---- 傳說中的分格線 ----
樓上的 依勒剉先生 electro
用 firefox 檢視頁面資訊的功能 選 媒體(媒體最會爆料了!! errr 離題了)
找型態是內崁 那一串就是了 不過你自己要去頭去尾 就可以找到 mp3 的 url 位置了 (感覺好像叫唆殺人喔 = =)
When: June 25, 2007 5:36 PM
To eCake 寵物糕餅屋:
哇碼尷尬謀摳玲呢...XD!!
最近比較忙,有空我再來試試...
真的是很怪異...在IE跟Firefox都會出現同樣的情況囉?
--- 傳說中的分格線2 ----
感謝eCake先生幫忙解答這讓我開不了口的問題...囧!!
When: July 24, 2007 12:56 PM
Hi Kai,
請問,是否可用JavaScript去控制我想要播放的歌曲呢 ?
When: July 24, 2007 2:05 PM
To Sko:
咦...關於這個問題..我想應該是辦得到的,但我倒是沒有收集這方面的資訊,你可能請教一下Google大神....
When: September 24, 2007 4:17 PM
嗯。。。很不貼心的IE
When: September 24, 2007 7:31 PM
To ang ang:
I can't agree anymore!
When: February 11, 2008 5:14 AM
恩~最常發生的問題就是IE和火狐只能擇一。
先來裝裝套件試試嚕!謝謝分享資訊呢^_^
When: February 12, 2008 3:04 AM
To 喵空:
請便...^_^
When: March 15, 2008 2:46 PM
請問一下,我是用blogger來播放音樂的。我想要讓他自動播放,也照你的所說的設定去設了。但重新檢視後那個播放的bar還是很乖地躺在左邊...
我實在是搞不懂,麻煩了。 QQ
When: March 16, 2008 1:34 AM
To fstyle:
你的連直接播也沒成功,也就是你說的"個播放的bar還是很乖地躺在左邊...",我看了一下你的原始碼,似乎語法有問是題,我是你是不小心貼錯了,少了個&或是多打了什麼,你再仔細檢查一次..
When: March 16, 2008 11:57 PM
多謝Tsung-Kai,我成功了
QQ
When: May 16, 2008 7:33 AM
Hello Kaie:)
想請教您,為何點下暫停鈕
會另外開啟一個分頁呢?
When: May 18, 2008 10:09 AM
To IRA:
因為你在html語法多了些不必要的東西,你在原本嵌入的flash player外層多了底下粗體字的部份
<a title="" href="" target="_blank">
這是你嵌入的player語法
</a>
When: July 20, 2008 4:40 PM
Thanks a lot! I like this player :)
When: August 26, 2008 10:46 AM
我帶走囉
謝謝 :)
When: September 16, 2008 9:18 PM
When: September 16, 2008 9:22 PM
code錯囉~!
</</object> ----> </object>
才對,firefox會自動修正,但IE 6會死給你看@_@
When: September 27, 2008 11:36 PM
To hguei:
感謝你的提醒,已修正..
When: December 14, 2008 5:11 PM
我测试了,音乐标题有乱码,如何解决啊?
When: December 14, 2008 8:56 PM
To Anonymous:
這....這....我也不太清楚耶,好像只支援英文的樣子!!
When: July 03, 2009 12:00 AM
請問一下喔!
我拿了你的語法然後套用在我的blogger上,結果是可以播放音樂的。但是我的朋友按播放鍵時都一直buffering,等很久都沒有音樂,就連七秒不到1MB的音樂也沒辦法聽...不知是那裡出了問題?
我放置的mp3空間是upload-mp3
謝謝!
When: July 03, 2009 1:37 AM
@Hector the Vet
咦,播不出來...若換個路徑會好,那就是空間的問題了!
When: October 14, 2009 3:21 PM
不好意思
我想請問要怎麼在播放器上顯示檔案名稱?
語法要怎麼寫?
感謝!!!
When: October 15, 2009 10:55 PM
@Anonymous
這個player好像不支援...XD
或許有出新版的,你可以去找看看..
Plz Post a Comment / 拜託你留個言啦...^^"