敗家。紀錄

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

樂趣。玩具

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

生活。心情

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

知識。常識

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

軟硬。兼施

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

Twitter It! Plurk this! Share to Facebook!
首頁 » 軟硬。兼施

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

作者:20090409日 星期四 10:38:38 | 觀看次數:10 則迴響

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
<!-- 導入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檔案所放置的位置):

導入<br /> jQuery程式庫及調用Tab控件語法

步驟二:定義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>

顯示效果:

jQuery版MP3播放器使用範例

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

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

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

附註:

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

標籤:, , , , , ,

10 則迴響 »

發表您的迴響(連結不含Nofollow)

如果喜歡這篇文章,您可以於下方「留下您的迴響」 或於您網站使用此文章的「TrackBack」連結。當然更歡迎您訂閱「此篇文章(RSS)」「敗家誌°(RSS)」,以便將日後新文章發佈給您的 RSS 瀏覽器。

敗家誌°支援 Gravatar 大頭貼,您可於「Gravatar官方網站」免費取得專屬大頭貼。emoticons

(完成後可按 Ctrl+Enter 發表迴響)

防機器人: 的答案是? (必填)