WordPress 上的音频播放器类软件并不少,功能强大的也有很多,但是对于重点不在音乐的博客来说,繁复的功能即没有太大的必要,也会在一定程度上的拖慢博客运行速度。大多非插件形式的音频播放器都是利用embed:一个 SWF 文件加上传入 SWF 的参数实现,如http://a.com/player.swf?url=http://a.com/1.mp3&title=song,Dewplayer、Audio Player、豆瓣 MP3 播放器还有一些音乐内容提供商的播放器如虾米、百度 MP3、Google 音乐都是利用此种方式实现。这种方式的好处就是使用非常简单,短短几行代码便可实现一首音乐的插入,而且通过 WordPress 提供的短代码功能,可以使 MP3 的插入变的更简单。

Dewplayer 提供了多种播放器样式并支持列表播放,Audio Player 更提供了丰富的颜色定义代码,但是我更钟情于豆瓣的音乐播放器,简洁明快,功能够用,对双字节文字的支持也更好一些。

Google Code 的打包下载(Flash,含源代码): douban-player.zip
Google Code 的打包下载(HTML5 增强): douban-player-with-html5.zip

原版:http://www.douban.com/swf/mainplayer.swf
原版 迷你:http://www.douban.com/swf/player.swf

目录

在 WordPress 文章内使用 Flash 播放音乐

豆瓣播放器提供了两种基本样式(为方便演示,此页面中的播放器不是由短代码功能生成):

迷你形式:

在主题的functions.php中添加如下代码:

function mp3player($atts, $content=null){
	extract(shortcode_atts(array("auto"=>"0", "loop"=>"0"),$atts));
	return '<div class="player"><embed src="'.get_bloginfo("template_url").'/player.swf?url='.$content.'&autoplay='.$auto.'&loop='.$loop.'" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" width="265" height="24" /></div>';
}
add_shortcode('player','mp3player');

带有描述,且支持多曲连放:

在主题的functions.php中添加如下代码:

function mp3player($atts, $content=null){
	extract(shortcode_atts(array("auto"=>"0", "loop"=>"0", "descri"=>""),$atts));
	return '<div class="player"><embed src="'.get_bloginfo("template_url").'/mainplayer.swf?url='.$content.'&autoplay='.$auto.'&loop='.$loop.'&descri='.$descri.'" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" width="346" height="40" /></div>';
}
add_shortcode('player','mp3player');

src取决于定了你上传 SWF 文件的位置,默认为博客主题所在的目录,只需将 SWF 文件上传到主题文件夹内就行了。add_shortcode('player','mp3player')决定了使用短代码时的标签名,引用 MP3 时按如下形式:[player]http://a.com/1.mp3[/player]

播放器增强,智能支持 HTML5

这种方式的播放器功能与带描述的一样,仅在外观上有微小的差别,所以不再做演示。在支持 HTML5 播放 MP3 的浏览器或设备上,会使用 HTML5 代替 Flash,这样 iOS 设备或者没装 Flash 的 Android 设备都可以进行播放。

代码基于牧风的虾米播放器修改,调用和纯 Flash 方式没有任何区别。将下载后的文件解压出来的player文件夹放在主题目录内,然后在functions.php中需要添加(注意不要和纯 Flash 方式的代码共存):

//(必要)短代码
function mp3player($atts, $content=null){
	extract(shortcode_atts(array("auto"=>"0", "loop"=>"0", "descri"=>""),$atts));
	$random = 'player-' . rand(10000,99999);
	return "<div id='$random'></div><script type='text/javascript'>new mplayer(document.getElementById('$random'), {'url': '$content','descri': '$descri','autoplay': $auto,'loop': $loop,'id': '$random'});</script>";
}
add_shortcode('player','mp3player');
 
//(可选,建议使用)自动向 header.php 加入所需文件
function player_style_action (){
	if(!is_admin()){
		wp_enqueue_style('player', get_bloginfo('template_url') . '/player/player.css');
		wp_enqueue_script('player', get_bloginfo('template_url') . '/player/player.js');
	}
}
add_action('wp_print_styles', 'player_style_action');

引入的 JavaScript 文件必须放在 jQuery 之后,如果自动引入出现问题,请删除自动引入代码后手动引入。

播放器调用方法

为你的编辑器增加一个可视化、自动化的音乐添加界面,在functions.php内加入:

//(可选,强烈建议使用)以下的代码可以在文章编辑页面添加操作按钮(“添加外链 MP3 音乐”)。
// 支持在光标位置插入。
// 如果你修改了调用标签(默认为 player),请把 ps 变量里的 "player" 替换为你修改后的短代码。
 
// 编辑界面添加按钮
function player_button($context) {
	$context .= "<a id='player-button' class='button' href='#' title='添加外链 MP3'><span id='player-button-img'></span> 添加外链 MP3</a>";
	return $context;
}
add_action('media_buttons_context', 'player_button');
 
// 编辑界面添加相关样式和 JS
function player_adder(){
wp_print_scripts( array( 'jquery' ));
?>
<style>
#player-button-img{background:url('../../wp-admin/images/media-button-music.gif') no-repeat 0 0;display:inline-block;height:16px;width:16px;vertical-align:text-top}
#player-wrap{display:none;width:250px;padding:10px 15px;position:absolute;z-index:9999;border:1px solid #BBB;border-radius:4px;background:#FFF}
#player-wrap input[type=button],#player-wrap input[type=checkbox]{margin:0 2px;vertical-align:text-bottom}
#player-wrap input[type=text]{width:160px}
#player-wrap label{margin-right:15px}
#player-wrap .hr{margin:10px 0;border-top:1px solid #CCC}
</style>
<script>
jQuery(document).ready(function(){
	jQuery('body').append('<div id="player-wrap"></div>');
	jQuery('#player-button').live('click',function(){
		var wrap = jQuery('#player-wrap');
		var left = document.getElementById('player-button').getBoundingClientRect().right + (document.body.scrollLeft || document.documentElement.scrollLeft) + 2;
		var top = document.getElementById('player-button').getBoundingClientRect().top + (document.body.scrollTop || document.documentElement.scrollTop);
		wrap.html('<div><div style="float:left"><input id="player-add" type="button" value="+" class="button" title="增加一首歌曲"/></div><div style="float:right"><input id="player-cancel" type="button" value="取消" class="button"/><input id="player-insert" type="button" value="插入" class="button button-primary"/></div><div style="clear:both"/></div><div class="hr"/><div><label><input type="checkbox" id="player-auto">自动播放</label><label><input type="checkbox" id="player-loop"/>循环播放</label></div><div class="hr"/><div id="player-mp3">地址(必填):<input class="player-url" type="text"/><br/>描述(可选):<input class="player-desc" type="text"/></div><div class="hr"/><div>查看相关日志,请求帮助:<a href="http://xia.im/wordpress-douban-mp3-player/" target="_blank">小虾的 Blog</a></div>');
		wrap[0].style.left = left + 'px';
		wrap[0].style.top = top + 'px';
		wrap.show();
		return false;
	});
	jQuery('#player-cancel').live('click',function(){
		jQuery('#player-wrap').hide().html('');
	});
	jQuery('#player-add').live('click',function(){
		jQuery('#player-mp3').append('<div class="hr"/>地址(必填):<input class="player-url" type="text"/><br/>描述(可选):<input class="player-desc" type="text"/>');
	});
	jQuery('#player-insert').live('click',function(){
		var auto = jQuery('#player-auto')[0].checked === true ? '1' : '0';
		var loop = jQuery('#player-loop')[0].checked === true ? '1' : '0';
		var url = new Array();
		var desc = new Array();
		var urls = jQuery('#player-mp3 input.player-url');
		var descs = jQuery('#player-mp3 input.player-desc');
		for(i=0;i<urls.length;i++){
			if(jQuery.trim(urls[i].value) !== ''){
				url.push(jQuery.trim(urls[i].value));
				desc.push(jQuery.trim(descs[i].value));
			}
		}
		desc = desc.length > 0 ? ' descri="' + desc.join(' || ')  + '"': '';
		url = url.join(' || ');
		if(url !== ''){
			var ps = '[player auto=' + auto + ' loop=' + loop + desc + ']' + url + '[/player]';
			if(jQuery("#wp-content-wrap").hasClass("tmce-active")) {
				tinyMCE.activeEditor.execCommand('mceInsertContent', false, "<p>" + ps + "</p>");
			}else{
				cf = document.getElementById('content');
				if(document.selection) {
					cf.focus();
					sel = document.selection.createRange();
					sel.text = "\n\n" + ps + "\n\n";
					cf.focus();
				}else if(cf.selectionStart || cf.selectionStart == '0') {
					var startPos = cf.selectionStart;
					var endPos = cf.selectionEnd;
					var cursorPos = endPos;
					cf.value = cf.value.substring(0, startPos) + "\n\n" + ps + "\n\n" + cf.value.substring(endPos, cf.value.length);
					cursorPos += "\n\n" + ps + "\n\n".length;
					cf.focus();
					cf.selectionStart = cursorPos;
					cf.selectionEnd = cursorPos;
				}else{
					cf.value += "\n\n" + ps + "\n\n";
					cf.focus();
				};
			}
		}
		jQuery('#player-wrap').hide().html('');
	});
});
</script>
<?php
}
if(!empty($pagenow) && ('post-new.php' === $pagenow || 'post.php' === $pagenow ))add_action('admin_print_scripts', 'player_adder');

下面是手动添加播放器短代码的方法。

基础:最基本的调用,播放指定的一首音乐。
调用:[player]http://a.com/1.mp3[/player]

自动播放:打开页面后,自动开始播放音乐。无此参数或参数为"0"则不自动播放。
调用:[player auto=1]http://a.com/1.mp3[/player]

循环播放功能(loop):循环播放音乐。无此参数或参数为"0"则不循环播放。
调用:[player loop=1]http://a.com/1.mp3[/player]

多曲功能(playlist):简单的列表播放,可以按顺序播放多首音乐。
调用:[player descri="Song || Music"]http://a.com/1.mp3 || http://b.com/2.mp3[/player]

组合在一起:根据需求组合参数,除了 MP3 地址外都不是必要参数。
调用:[player auto=1 loop=0 descri="Song || Music"]http://a.com/1.mp3 || http://b.com/2.mp3[/player]

注意事项

  1. " || " 为多首歌曲和多个描述的分隔符,按shift + \ = "|",注意两侧各有一个空格 。
  2. descri 参数要用英文双引号括起来,否则无法显示空格后的内容,会被 PHP 处理掉。
  3. 没有歌曲个数的限制,理论上支持无数多个歌曲;当然只放一首歌也是可以的。
  4. loop 开启时,按顺序循环播放;loop 关闭时,顺序播放一遍后停止。
  5. 描述未填写或少于歌曲数量时,对应的歌曲描述将显示空白;多于歌曲数量时则会被忽略。
  6. 带有描述版本的播放器没有参数传入时会显示为空白。

反编译修改记录

SWF 源代码版权为 豆瓣 所有,本人仅出于兴趣和爱好对该 SWF 文件进行反编译修改。

循环播放修改,20110726:小屁孩的留言激起了我研究研究 ActionScript3 的欲望,重新下了个 Flash CS 5.5,研究了研究播放器的代码,还好,比较短也能看懂大部分。很简单,再加入一个 loop 参数,然后在播放结束时判断一下 loop 的值再决定是否重新播放就好了。
打开反编译后的\com\douban\app\PlayerA.as

// 声明变量处加入
public var loop:Boolean;
//initSys() 内加入
loop = ((param["loop"] == "1")) ? true : false;
//playSong() 函数加入参数,如 _arg2
protected function playSong(_arg1, _arg2, _arg3, _arg4)
// 在 playSong() 函数内合适的位置分别加入以下两段代码
var ploop:* = _arg2;
loop = ploop;
// 在 onComplete(_arg1) 函数的最后加入
if (loop)
{
	startPlay();
}

多曲播放修改,20110801:没有加入控制上一曲和下一曲的功能,也没有加入播放列表的显示功能,这样的话还不如换一个播放器了。只是简单的实现了按顺序播放的功能,而且代码不太令人满意。
打开反编译后的\com\douban\app\PlayerA.as

// 声明如下变量:
public var urlR:String;
public var urlArrays:Array;
public var songCount:int = 0;
public var descriR;
public var descriArrays:Array;
// 将地址和描述分割成数组,public function PlayerA() 内,intiSys() 与 intiUI() 之间加入:
urlArrays = url.split("||");
descriArrays = descri.split(" || ");
descriR = descriArrays[0];
// 在 protected function startPlay() 内最开始加入:
urlR = urlArrays[songCount];
descriR = descriArrays[songCount];
if ((((descriR == null)) || ((descriR == undefined))))
{
	descriR = "";
}
initUI();
songCount++;
// 在 protect function onComplete(_arg1):void 内加入:
if (songCount<=((urlArrays.length)-1))
{
	startPlay();
}
else
{
	songCount = 0;
	startPlay();
	_position = _channel.position;
	_channel.stop();
	_playing = false;
	playBtn.showPlay();
	if (loop)
	{
		songCount = 0;
		startPlay();
	}
}
//protected function startPlay() 内,url 改为 urlR:
_sound = new Sound(new URLRequest(urlR));

打开反编译后的\com\douban\app\PlayerT.as

//override protected function initUI() 内,descri 改为 descriR:
_descText.htmlText = decodeURIComponent(descriR);

长描述滚动修正:
打开反编译后的\com\douban\app\PlayerT.as

// 加长描述宽度
this._descPos = [42, 3, 268];
// 每次播放前清除滚动间隔定时,还要在 PlayerA.as 中声明 public var interval;
clearInterval(this.interval);
if (this._descText.textWidth > this._descPos[2]){
	this._descText.text = (this._descText.text + "   ");
	this.interval = setInterval(this.scrollText, 1200);
}
  1. […] 播放器来自小虾的博客。http://xia.im/wordpress-douban-mp3-player/ […]

  2. :wink: 谷歌下载失效了

  3. 感谢分享哈,很是不错 :wink: :wink:

  4. […] 播放器来自小虾的博客。http://xia.im/wordpress-douban-mp3-player/ […]

  5. 我想在一个静态页面上实现该怎么做?小白一个

    • @inkrain

      <div class="player">
      <embed src="http://bcs.duapp.com/xxdres/player/mainplayer.swf?url=http://bcs.duapp.com/xxdres/mp3/One Summer's Day.mp3 || http://bcs.duapp.com/xxdres/mp3/Melon Street Book Club.mp3&autoplay=1&loop=1&descri=あの夏へ - 久石 譲 || Melon Street Book Club - Tamas Wells" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" width="346" height="40">
      </div>
      

      以上只需要替换一下 SWF 地址、MP3 地址和一些参数。

    • @小虾
      好的非常感谢

  6. 你好啊,今天想换 html5 的播放器,然后找到你这来了。使用之后确实不错,但是还有个问题,就是主页显示摘要的时候,会把歌曲信息显示出来,而不是显示播放器。。。我试过好几次都是这样的。不知道需要修改哪。 :razz:

  7. 很好很强大 我把虾米音乐整合进去了 :razz:

  8. 歌曲描述应该加载哪里哪、? 是 MP3 文件自己的内部信息还是···?