調用jQuery特效實作(MP3控件篇)

敗家。紀錄

敗家紀錄、開箱評測、好物推薦、時尚精品、生小惡魔

樂趣。玩具

有趣玩具、酷搜搞笑、幽默小品、樂活人生、搞笑影片

生活。心情

生活心情、饕客美食、遊山玩水、動漫音樂、電影欣賞

知識。常識

實用知識、遺忘常識、職場技巧、投資方式、理財規劃

軟硬。兼施

程式設計、軟體教學、硬體效能、部落優化、網站資源

首頁 » 軟硬。兼施

調用jQuery特效實作(MP3控件篇)

作者：阿諾於 2009年04月09日星期四 10:38:38 | 觀看次數：5,54810 則迴響

(圖片來源：GOOGLE圖片搜尋，關鍵字「MP3 + 美女」的...第七頁。XD)

自從上次[E-mail轉貼]上床前與後這篇，因為美圖拐了不少人進去看，造成當日該篇文章人氣竄升。

可見這是個正妹當道的世代，圖還是弄美一點的好些。(奸)

繼「調用jQuery特效實作(隱藏迴響欄位篇)」、「調用jQuery特效實作(Tab控件篇)」這兩篇之後，大家對於jQuery的調用應該很熟悉了。這篇是調用jQuery特效實作的第三彈囉，也是一樣簡單的三個步驟就能實現3KB大小的jQuery版MP3播放控件，我們就一步一步的來實作吧~*

步驟一：導入jQuery程式庫及調用MP3控件語法

jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。
MP3控件語法於此處下載(3KB)，將檔案解壓縮後放置於您主機上或方便運用的空間。
將下面語法複製貼於head開始與結束標籤之間的適當位置：

<!-- 導入jQuery程式庫 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- 調用jQuery版MP3播放器 -->
<script type="text/javascript" src="http://您空間的網址/jquery.jmp3.js"></script>

設置如下圖(請自行修改jquery.jmp3.js檔案所放置的位置)：

步驟二：定義singlemp3player.swf的所在目錄。

使用WordPad或文字編輯軟體修改jquery.jmp3.js中的第33行，填寫您放置singlemp3player.swf的所在目錄。當然裡面MP3的相關參數也可一併調整(Ex：前、背景顏色、音量、自動及循環播放、允許下載否)。

1	var playerpath = "http://您空間的網址/"

步驟三：加入jQuery版MP3播放器語法

語法非常簡單...僅此一行！

1	<span class="mp3">http://您空間的網址/您的MP3檔.mp3</span>

顯示效果：

範例MP3檔取自於「藍色生死戀插曲-祈禱(諾的電鋼琴亂彈版)」這篇，點擊播放或下載測試看看吧。

http://arno-run.myweb.hinet.net/blue_pray_arno.mp3

OK，所有設置完畢，自行檢查試驗jQuery的效果吧。^_^

附註：

1、經測試，MP3檔可放置於任何可正常存取的網路空間。(Google Sites空間例外，IE會失效)
2、jQuery具有跨瀏覽器平台的重要特性，各大瀏覽器均可正常呈現特效。
3、諾提供的jQuery檔案，語法部分均有詳細註解，如有需要可依使用需求自行修改。^_^

標籤：Blog, Google, jQuery, Plugs, WordPress, 網站資源, 語法

10 則迴響 »

第1則迴響由 百里幻雲 發表：

語法比較生硬..
多些美圖，平衡一下.感謝版主.

- 於 2009 年 04 月 09 日 15:07:03

第2則迴響由 梅干扣肉 發表：

mp3小心觸法喔!
http://tw.news.yahoo.com/article/url/d/a/090409/78/1hinp.html
可能要放無版權，
以免惹來不必要的麻煩
圖選的真好~

- 於 2009 年 04 月 09 日 17:51:13

第3則迴響由阿諾發表：

To 百里幻雲

呵呵，應該的，語法 + 美女希望不會太突兀。

To 梅干扣肉

嗯，MP3版權確實要注意，這部分諾都很小心。
放上部落格的都是諾自彈自錄的，所以Safe。^_^

- 於 2009 年 04 月 09 日 22:57:37

第4則迴響由 A`Vai Poitsonu 發表：

諾的自彈自唱的檔案多大呀？下載還蠻快的。

- 於 2009 年 04 月 10 日 14:36:34

第5則迴響由阿諾發表：

To A`Vai Poitsonu

這首2638KB差不多2.7MB左右。
我把它放在Hinet空間，速度還蠻快的。^_^

- 於 2009 年 04 月 10 日 15:41:19

第6則迴響由 None 發表：

那是大陸的 "台电科技" 請的麻豆，
最近的MP3隨身聽產品都有請來拍。
可以去官網看看

- 於 2009 年 06 月 24 日 17:53:09

第7則迴響由阿諾發表：

To None

哇塞，你好厲害！一張圖就能找到是哪家公司請的麻豆。XD

- 於 2009 年 06 月 25 日 10:16:20

第8則迴響由 None 發表：

不...是因為我有買他們家的產品，
我可以打包票，
他們家的產品可以打死一堆台灣做MP3隨身聽的『大廠』
現在對岸已經開始急起直追了。

像我買的X19，4G。
網拍買全新品1000多，
開箱後才知道裡面竟然有申請SRS音效技術。

另一款T50+也很讚，打算來買一台。

- 於 2009 年 06 月 26 日 15:19:46

第9則迴響由阿諾發表：

To None

嗯，只要有好的品管，對岸的東西也是很有品質的。^_^

- 於 2009 年 06 月 29 日 10:04:19

第10則連結通告由 藍色生死戀 - 龍的耳朵 發表：

[...] 調用jQuery特效實作(MP3控件篇)(圖片來源：GOOGLE圖片搜尋，關鍵字「MP3 + 美女」的…第七頁。XD)自從上次[E-mail轉貼]上床前與後這篇，因為美圖拐了不少人進去看，造成當日該篇文章人氣竄升。可見這是個正妹當道的世代，圖還是弄美一點的好些。(奸)繼「調用jQuery特效實作(隱藏迴響欄位篇)」、「調用jQuery特效實作(Tab控件篇)」這兩篇之後，大家對於jQuery的調用應該很熟悉了。這篇是調用jQuery特效實作的第三彈囉，也是一樣簡單的三個步驟就能實現3KB大小的jQuery版MP3播放控件，我們就一步一步的來實作吧~*步驟一：導入jQuery程式庫及調用MP3控件語法jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。 MP3控件語法於此處下載(3KB)，將檔案解壓縮後放置於您主機上或方便運用的空間。將下面語法複製貼於head開始與結束標籤之間的適當位置：1 2 3 4 [...]

- 於 2009 年 07 月 21 日 05:19:02

第11則迴響由 網頁設計 發表：