WordPress如何內嵌mp3播放音樂

2013-08-19_153509

最近這幾天為了讓首頁版面上可以好好地放mp3音樂檔,發了一些時間做了程式的改變,ㄚ琪覺得可能對很多人有幫助,所以免費分享這次的心得。

WordPress專家可能會問不是有新增媒體的功能嗎?2013-08-19_163452

就ㄚ琪目前所知,你可以上傳mp3檔案,但是這不是我要的,因為我不是音樂天才,我自己沒法子作曲,也沒法寫mp3,如果上傳別人的m3有可能會觸法,當然我不會想這麼做。你也可以用從網址插入的方式,就像我下面插入網址後跑出下面的連結那樣。

Waiting For Me

這也不是我要的,雖然朋友可以下載回家中自己聽,可是我只想讓大夥就在工作達人上聽,邊聽邊看文的悠閒是我想給各位的禮物。

當然你也可以點選文章編輯器上方的「工具列」→「插入、編輯嵌入媒體」,並選擇該音樂的media_dlg.audio、media_dlg.quicktime、media_dlg.windowsmedia或media_dlg.iframe,接著再按「插入」,

2013-08-20_095721

這個功能的內嵌可以看你的瀏覽器有安裝什麼音樂的播放外掛來決定音樂型態,一般我們都會選media_dlg.audio選項,進階設定如上圖,它也有支援html5的選項應該是最好用的才是。

但是問題來了,各位如果看了HTML5 Audio,可以發現不同的瀏覽器對mp3的支援是不一樣的。

Browser MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES YES NO
Opera 10+ NO YES YES

也就是說如果只有mp3檔案,在滿多人使用的Firefox或是IE舊版的瀏覽器下,HTML5的Audio標籤使用mp3是不能正確播放的。

為此我們想要改這個播放器的嵌入,本身也懶的搜尋是否有解決這個問題的外掛或是佈景主題了,自己捲起袖子來寫吧,ㄚ琪想到使用Wordpress的Shortcode API,這一頁尚無中文翻譯,大家決定有需要中文的話,可以留言給我,我再看情況來翻譯。用這個API可以改寫佈景主題的functions.php,所以我們就利用PHP5的get_browser函式以及利用browscap.ini的設定,當然也可以用$_SERVER[‘HTTP_USER_AGENT’] 這個全域變數來看,但是這個變數不保證所有的web伺服器可以都提供這方面的資訊,所以我們改用了get_browser的函式。

接著我們也想要直接在Wordpress的TinyMCE的編輯視窗新增按鈕,就向下圖的+圖示可以內插廣告,mp3圖示可以內插mp3連結或上傳的檔案。

2013-08-20_101348

 

之前已經有內嵌廣告的按鈕了,這回還要增加可以內嵌mp3的按鈕,似乎比較困難,而且很多文章都只講如何新增一個按鈕的,要新增多個按鈕的就比較少了,但大家還是可以找到Guide to Creating Your Own WordPress Editor Buttons來幫助我們解這個問題。

2013-08-20_101819

 

這是我在IE6下的首頁顯示。

2013-08-20_105043

 

在Firefox下的顯示。

不知在你的瀏覽器下顯示是正常,可否播放音樂,還請您留言給ㄚ琪看看。好音樂可以讓心情放鬆,來工作達人看文章就不會很緊張了。

感謝你看到這裡,很快就可以離開了,但最好的獎勵行動就是按一下幫我分享或留言,感恩喔~

點我分享到Facebook

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *