WordPress 插入虾米音乐播放器 - 看见小练

迷失的人迷失了,相逢的人会再相逢。

WordPress 插入虾米音乐播放器

  国内的音乐社区里面,虾米音乐一直是做得不错的。虽然现在网易云音乐慢慢崛起,但是在曲库和社区建设上,仍离虾米有一段差距。当我们需要在博客中分享音乐时,引用虾米的播放器是一个很不错的选择。

  其实实现的方式与在博客中插入优酷视频等差不多,以下代码来自 Life Memory ,这位大神制作了一个支持虾米音乐的 HTML5 播放器,很好地实现了移动端的兼容,并且在不支持 HTML5 的浏览器中,会自动跳转到 Flash 播放器进行播放。特别的一点是还支持了专辑封面的显示,播放界面相比虾米原来提供的友好很多。

  实现方法:将以下代码复制到主题的 functions.php 文件,之后在博客文章中,需要插入虾米播放器的地方,单独一行写上虾米播放页地址即可。

// 增加虾米播放器支持
function wp_iframe_handler_xiami( $matches, $attr, $url, $rawattr ) {
	$iframe = '<iframe width="430" height="200" src="http://miantiao.jd-app.com/xiamiplayer/'. esc_attr($matches[1]) . '" allowtransparency scrolling="0" frameborder="0" ></iframe>';
	return apply_filters( 'iframe_xiami', $iframe, $matches, $attr, $url, $rawattr );
}
wp_embed_register_handler( 'xiami_iframe', '#http://www.xiami.com/song/([\d]+)(.*?)#i', 'wp_iframe_handler_xiami' );

  特别提示: functions.php 文件是主题核心文件,请谨慎修改。详见 编辑 WordPress 主题 functions.php 文件时的注意事项

  以光良与曹格合唱的《少年》做演示,虾米页面为:http://www.xiami.com/song/29564 插入博客之后的效果如下:

  最后照例放出小练目前使用的带提示版本,还支持(伪)自适应哦:

// 增加虾米播放器支持
function wp_iframe_handler_xiami( $matches, $attr, $url, $rawattr ) {
	$iframe = '<iframe width="100%" height="200" src="http://miantiao.jd-app.com/xiamiplayer/'. esc_attr($matches[1]) . '" allowtransparency scrolling="0" frameborder="0" ></iframe><br /><span style="display: block; text-align: center; color: #ccc;">(若无法播放,可以 <a href="http://www.xiami.com/song/'. esc_attr($matches[1]) .'" target="_blank">点击这里</a> 跳转到虾米播放页面)</span>';
	return apply_filters( 'iframe_xiami', $iframe, $matches, $attr, $url, $rawattr );
}
wp_embed_register_handler( 'xiami_iframe', '#http://www.xiami.com/song/([\d]+)(.*?)#i', 'wp_iframe_handler_xiami' );
2,774 次
分享

gravatar头像