How to create your own non-spyware HTML5 mixcloud players

You might have noticed the new spiffy players on Radio Clash for Mixcloud – these should work on all browsers, phones, and the most recent ones even Firefox with Flash (more later on why that is). They’re HTML5 but using Mixcloud. How is this done? Took me a while to work it out so thought I’d blog about it as I think some might find this useful.

Sadly Mixcloud not only don’t have an official HTML5 player and they put nasties tracking you in their ‘Share’ player IFRAME tags (yes I have tweeted to them about this, yes they seemed completely unrepentant). YouTube used to do this until they were shouted at a lot by Online Privacy Activists and thus created their ‘privacy mode’ (yes that’s what that is for). Mixcloud hasn’t learned that lesson – and makes me feel less guilty about hijacking their content into an open and freer system.

So here’s how:

1. Go to OffLiberty and post in link of your Mixcloud page into the box. You can hack it via Firebug or Chrome as per Technolux’s post which inspired this one, but OffLiberty is a lot easier.
2. Press the OFF button.
3. Copy the MP3 URL into your page/post/whatever.
4. Copy and poste this: <audio width=”300″ height=”20″ controls=”controls” preload=”metadata” src=”PASTE YOUR URL HERE”></audio> and copy in the MP3 URL where indicated and make any styling or height/width alterations you want
5. Prophet.

This doesn’t work with Firefox browsers due to FF being shit about HTML5 standard support – it weirdly only supports OGG and not MP3 (you see I told you…HTML5 is a mess). Should work on phones, IOS, Android etc, and newer versions of IE. Opera, not sure – if that’s a problem then use the solutions mentioned below.

It also means no artwork, but does mean you can style and use the player of your choice, rather than go with their rather impractical chunky player which visually disturbs the flow of the page.

If you’re on WordPress or happy with coding/javascript you can use a plugin like ‘Mediaelement.js‘ (WP plugin here) and use the shortcode instead it should use a Flash-player automatically for FF, early IE and Opera and HTML5 for everyone else. Or use JWPlayer and use their embed code solution to switch to Flash for those browsers.

If you come up with a neater solution than using a plugin (how I hate shortcodes, it means you disable the plugin in future and all your posts break!) let me know.

EDIT (02/14): You might have noticed I’ve gone back to the IFRAME players. This is because these stopped working, sadly. Mixcloud currently includes New Relic tracking in their embeds, so I’d love to know a way I can avoid that, but until then I’d recommend you all use Ghostery or DNT+ in your browser!