WordPress如何内嵌mp3播放音乐

2013-08-19_153509

最近这几天为了让首页版面上可以好好地放mp3音乐档,发了一些时间做了程式的改变,ㄚ琪觉得可能对很多人有帮助,所以免费分享这次的心得。

[adsense][/adsense]

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下的显示。

不知在你的浏览器下显示是正常,可否播放音乐,还请您留言给ㄚ琪看看。好音乐可以让心情放松,来工作达人看文章就不会很紧张了。