那些wordpress可用的音乐播放器

标题刚写出来,感觉有点吹牛了啊。。。小新也不能把全部可用的音乐播放器找出来^-^,小新只是分享几款常用的,或者是简洁方便的。或者大家都知道了。。。那小新就自个当个备份吧。有时候要用的时候光凭想还真没办法打出来。

OK,先来说说第一款,也是小新博客之前常用的这款:HTML5 audio(mediaelementjs
这个是可以直接在博客里面调用的,也是使用最新的HTML5超文本标记语言,可以做音乐播放器,也可以做为视频播放器。
因为大部分的网站都支持HTML5了,所以实用性毋庸置疑了,当然最方便的是可以直接右键下载视频或者音乐(可能也是不被一些视频网站所使用的原因。)这里先不表。但是实测安卓uc浏览器打开小新的博客是可以听音乐的(可能点击播放的话他不显示,但是是会播放的!)。可是虾米的网页音乐播放器小新手机是放不了的。
使用的话代码也简单:<audio src="地址.mp3" controls="controls" name="media"/></audio>

播放器展示:

如果对视频播放器感兴趣,可以点击直达,到一个英文的网站了解一下!

第二款是来自法国的一款很简洁的Flash音乐播放器,有点小清新,外观还是不错的。目前拥有七款不同的样式,比如“迷你”、“经典”、“带歌曲列表”等。你可以直接调用,但是小新是不推荐的,因为需要远程调用它的swf样式,这样对于博客速度不好。所以小新推荐下载它的样式文件,本地调用更好点。注意这款播放器只支持mp3(估计别的也不常用)

1、Mini代码(dewplayer-mini.swf替换成成自己的地址):
<object type="application/x-shockwave-flash" data="dewplayer-mini.swf?mp3=MP3地址" width="160" height="20" id="dewplayer-mini"><param name="wmode" value="transparent"/><param name="movie" value="dewplayer-mini.swf?mp3=MP3地址"/></object>

Mini样式展示:

2、Classic代码(dewplayer-mini.swf替换成成自己的地址):

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=MP3地址" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent"/><param name="movie" value="dewplayer.swf?mp3=MP3地址"/></object>

Classic样式展示:

3、Multi代码(dewplayer-multi.swf替换成成自己的地址):

<object type="application/x-shockwave-flash" data="dewplayer-multi.swf?mp3=mp3地址" width="240" height="20" id="dewplayer-multi"><param name="wmode" value="transparent"/><param name="movie" value="dewplayer-multi.swf?mp3=mp3地址"/></object>

Multi样式展示:

4、Multi Rect代码(dewplayer-rect.swf替换成成自己的地址):

<object type="application/x-shockwave-flash" data="dewplayer-rect.swf?mp3=mp3地址" width="240" height="20" id="dewplayer-rect"><param name="wmode" value="transparent"/><param name="movie" value="dewplayer-rect.swf?mp3=mp3地址"/></object>

Multi Rect样式展示:

至于余下的三款样式就不一一展示了,因为带播放列表的还要再编辑playlist.xml文件,比较繁琐,实际上如果真要带播放列表可以直接使用虾米播放器,也就不需要自己制作的了!
如果需要更详细的信息或者使用方法,可以做传送阵到它的官网查看,它里面可以自助选择各种样式生成代码。因为是法文,看不懂请自备翻译。

这一款播放器我挺喜欢的,不占地方是一个,点击播放才拉出进度条,停止又缩回去。它有一个插件版:

不喜欢插件,可以直接使用代码。但是需要下载player.swf文件(点击下载),然后上传到 wp-content/theme/主题目录下,再到主题的 functions.php 中间位置 添加如下函数:
/**添加 flash player */
    function myplayer($atts, $content=null){
    extract(shortcode_atts(array("auto"=>'no',"loop"=>'no'),$atts));
    return '<embed src="'.get_bloginfo("template_url").'/player.swf?soundFile='.$content.'&bg=0xeeeeee&leftbg=0x357dce&lefticon=0xFFFFFF&rightbg=0xf06a51&rightbghover=0xaf2910&righticon=0xFFFFFF&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop='.$loop.'&autostart='.$auto.'" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" width="290" height="30">';
}
add_shortcode('music','myplayer');
/**
然后需要播放器时,可以直接编辑代码:[mu sic]MP3地址[/mu sic] 调用去掉空格!

Audio Player样式展示:[music]http://sc.111ttt.com/up/mp3/322714/6CD51207A9438E018AA7FF50494FA9E2.mp3[/music]

当然,这个代码的使用是转自Dream Catcher,它的颜色是可以修改的,上面说的只是插件的代码版,实际上它还有一种直接使用代码调用是需要7行代码,需要调用两个样式,不过并不需要修改主题文件。代码如下:
<script language="JavaScript" src="http://www.xkfree.com/wp-content/files/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="http://www.xkfree.com/wp-content/files/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://www.xkfree.com/wp-content/files/player.swf">
<param name="FlashVars" value="playerid=audioplayer1&soundFile=mp3地址">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

外观展示:

不知不觉就写了这样,可能大家会觉得眼花吧。。。从晚上八点多写到现在,半夜12点半了。小新基本是个代码盲,所以大家可以从上面的代码中简化一下也许也可以。咱们插个音乐也不过是为了方便嘛。呵呵,不说了。有时间再补个图。睡觉去,晚安!

40 条评论

    1. 很不好意思 今天才看到多说的垃圾评论里有评论 还是正常的评论被权限了。。多说的拦截真是好没有道理。。抱歉。。

    1. 很不好意思 今天才看到多说的垃圾评论里有评论 还是正常的评论被权限了。。多说的拦截真是好没有道理。。抱歉。。

    1. 很不好意思 今天才看到多说的垃圾评论里有评论 还是正常的评论被权限了。。多说的拦截真是好没有道理。。抱歉。。

    1. 很不好意思 今天才看到多说的垃圾评论里有评论 还是正常的评论被权限了。。多说的拦截真是好没有道理。。抱歉。。

    1. 错了 我以为你是说外链呢 播放器没有什么长久的 都一样 只不过上面的第一个是html5的 未来的主流 下面两个是flash的 现在的主流..

  1. 遇到个问题 因为我改固定链接 今天想起来改改 就网站启用伪静态 然后其他都好 发现音乐都不行了 不能播放 那些音乐播放器插件也不管用了 不晓得是怎么回事呢?

    1. 这就不知道了 我一般直接用 而且还比较契合我的主题,所以就没研究 。你看我的右上角的视频播放器 也是html5 还可以.

      1. 嗯,我就用了默认的黑色,跟我主题也还行。顺便我看不到你右上角的视频,可能是我浏览器的问题,显示视频格式或mime类型不支持

      1. 我知道 我用的也是这个主题 zanblog 可我从小工具里加文本框没有显示像您这样的标题和边框 您是怎么加的 我在网上搜索了很多教程可没有一个能解决此主题问题

        1. 哦 这样啊 我是从主题代码里修改的 也就是侧边栏sidebar里面,我也不怎么懂,所以只是调用了下面的样式,然后加入了视频播放器代码。

欢迎留言