A Soundcloud tag plugin for Hexo

As a recent convert from Octopress to Hexo, I quickly realized that there was one major thing lacking- a simple and clean way to embed Soundcloud songs, albums, mixes, and everything in between. So, I decided to quickly whip up an unofficial Hexo Soundcloud plugin. Here’s the code (as of June 11, 2014):

Soundcloud tag plugin for Hexo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo.extend.tag.register("soundcloud", function(args) {
var options, songUrl, soundcloudUrl, type;
songUrl = args[0];
type = args[1] || "default";
soundcloudUrl = "https://w.soundcloud.com/player/?url=" + (encodeURIComponent(songUrl));
if (type === "visual") {
options = "visual=true";
} else if (type === "default") {
options = "color=ff5500&show_artwork=true";
} else {
return "Error: Soundcloud player type option needs to be either <b>visual</b> or <b>default</b>.";
}
return "<iframe width='100%' height='160' scrolling='no' frameborder='no' src='" + soundcloudUrl + "&amp;auto_play=false&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;" + options + "'></iframe>";
});

Usage

The plugin can be used as follows:

1
{%raw%}{% soundcloud https://soundcloud.com/only-the-beat/3lau-electric-daisy-carnival-edc-new-york-2014 visual %}{%endraw%}

Note that the second parameter is optional and can be one of two things:

  • ‘visual’
  • ‘default’
    ‘Visual’ will use the newer, larger Soundcloud player, while ‘default’ or simply leaving it blank will default to the standard Soundcloud player.

Examples

Visual player

The following code:

1
{%raw%}{% soundcloud https://soundcloud.com/porter-robinson/sea-of-voices visual %}{%endraw%}

…will render to:

Default player

The following code:

1
{%raw%}{% soundcloud https://soundcloud.com/porter-robinson/sad-machine %}{%endraw%}

…will render to:

You can grab the Javascript version of the plugin here. Or take a look at the Coffeescript source here.

To install the plugin, simply add the soundcloud.js file to the scripts folder within the root directory of your Hexo blog.

Feel free to improve upon the plugin, as I threw it together in a couple of minutes.