Today a friend left a comment asking about the music player on my blog. So here I am, writing this article and tinkering with shortcodes.

To integrate a music player, we first need to find one. Google “web music player” and you’ll find all kinds. Some well-known options include Dewplayer and WordPress Audio Player.

However… Dewplayer doesn’t support volume control and the progress bar looks odd; WordPress Audio Player only displays song titles properly in English, and while it supports custom colors, the design feels dated. After searching around, I settled on a homegrown solution — we’ll quietly borrow

Douban’s music player. It has a progress bar and volume control. While it doesn’t display song titles, the blogger should mention what’s playing anyway.

Flash player preview:
[music]https://www.douban.com/swf/player.swf[/music]
(I no longer use WordPress, so the preview won't work. If you're on WordPress, rest assured it works fine.)

First, download the player. To keep things simple, just drop the player.swf file into your theme directory.
(Download http://www.douban.com/swf/player.swf using a download manager like Thunder — direct downloads will be blocked by Douban’s servers.)

Then edit your theme’s functions.php file and add the following code:
(For beginners: the first line of functions.php starts with <?php — add the code on the second line.)

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

Now let’s use the player. When writing a post, switch to HTML mode and insert:

[music]http://xxx.com/xxx.mp3[/music][/cce_html]

By default, it won’t autoplay. If you want autoplay, use:

[music auto=1]http://xxx.com/xxx.mp3[/music]

And that’s it — pretty simple, right?

This article references code modified by Liangxin.