虾米原来的外链播放器是 Flash 的,手机上不能播放,于是折腾了一个 HTML5 的播放器。而且比官方的强大,支持封面图,支持同步歌词。还有下载,分享到微博功能(带 "虾米音乐" 尾巴)。

服务端还是用 Python 读取虾米的 API,然后渲染一下模板就行了。客户端网页项目太小,就没有用 jQuery,直接用原生 JavaScript 控制 audio 的播放暂停就行了。

演示:

使用方法:

使用 iframe 调用(替换里边的数字为虾米音乐 ID):
<iframe src="http://musicbox.coding.io/xiamiplayer/45819"frameborder="0"scrolling="0"width="430"height="200"allowtransparency></iframe>

WordPress 使用方法:

直接在 functions.php 插入下面的代码:

function wp_iframe_handler_xiami( $matches, $attr, $url, $rawattr ) {  
    $iframe = '<iframe width="430" height="200" src="http://musicbox.coding.io/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' );  

然后单独在把虾米音乐地址写在一行就行了。 WordPress
效果演示:
WordPress 效果演示

不支持 HTML5 的浏览器将重定向到 Flash 播放器,预览 ( 点击加载):

代码已经开源的,有问题欢迎帮我解决。

显示评论