Something Wicked This Way Comes...

After a conversation with Stretta and Chris Carter on Twitter about problems embedding Soundcloud players on a site that might be browsed by an iPad or iPhone, I thought it might be handy to post a little how-to on what you need to do to pull this off.

The easiest solution is to upload the file to both your server and Soundcloud, then use the HTML5 audio embed tag on the one on your server, and follow it with the Soundcloud embed code. After this paragraph I’ve done just that. If you’re using Safari, Mobile Safari, or Chrome, you’ll see the built-in HTML5 audio controls, then (if you’re not on Mobile Safari) you’ll see the Soundcloud player. This sounds simple, but there’s a couple problems with it which we’ll get to.

[Embedded media, no longer available.]

As you can see, in browsers that are both HTML5 and Flash-capable, you have two players, except in Firefox, which can’t embed MP3s, so you’ve got a big fat pile of failsauce because you see both but only the Soundcloud one works. God only knows what’s happening in Opera or IE6. In Mobile Safari, you’ve got a broken lego block where the Soundcloud player goes.

In short, this method sucks, so we won’t be using it.

Now, shit’s gonna get a little technical, but it’s fairly simple if you have even a rudimentary grasp of HTML. The HTML5 audio tag looks like this:

<audio src="/samples/round_CP.mp3" controls="controls"> </audio>

Now, the interesting thing we note, when looking at that, is that there’s an open and a close tag. We can put code inside that, and the browser will use the HTML5 embed if it can, but if it can’t, it’ll execute whatever is inside the tags. If we put the Soundcloud player embed code between the audio tags, we get this:

[Embedded media, no longer available.]

Now, if you’re on an HTML5 browser (besides Firefox) you see the audio embed off this server. If you’re not, you get the Soundcloud player. This situation is slightly better, but it’s still pretty weak, as Firefox just displays a dumb grey box with an X in it, because it can’t play MP3s. Now, you’d say to yourself “self, I know OGG files are stupid, but why don’t we take one for the team here and just put up an OGG, and put our Wave in Soundcloud, and we’ll be good?”

Well, self, you’ve got a problem there, because you’re back to square one. Safari can’t play OGGs, and the whole purpose of this exercise is to have it play on everything. Throwing sanity to the wind, we double our MP3 file on our server with an OGG file, and we have both. If we alter the audio embed code to look like this:

<audio controls="controls"> ******* INSERT SOUNDCLOUD EMBED HERE ******* <source src="/samples/round_CP.ogg" /> <source src="/samples/round_CP.mp3" /> </audio>

…it will go through the list and play the first one it can. In this manner, anything that can play an MP3 file will, else it’ll go to the OGG file, and if it can’t do either of those, it’ll go to the Soundcloud player. So, no matter what browser you’re looking at this page in, you’ll see some sort of player here that will poop audio, theoretically.

[Embedded media, no longer available.]

(important: the OGG file has to go first in the above code, else Firefox will hang in retard-grey-box-mode, because it thinks it can play an MP3, which it can’t.)

So, this isn’t awesome at all for two reasons: first, it doesn’t play the Soundcloud player by default, and we want the metrics and the look of the Soundcloud player with the ability to play files on iPads. Secondly, we have to make a retarded fucking OGG file in addition to the semi-retarded MP3 we already had to make and the big fat WAV or AIFF which we uploaded to Soundcloud. But it’ll play on pretty much anything, so that’s something. (The 8 people that use Opera are probably going to be disappointed here, as Opera only understands WAV files in HTML5 audio embeds. Deep shuddering sigh. Don’t you browser-making guys have a standards committee or some shit?)

So, in order to get around all this, one of two things needs to happen: either Firefox needs to support MP3s or Soundcloud needs an HTML5 player. I’m sure that one of those events (most likely the latter) will happen within a very short time period, so it won’t be like this for very long. There are ways to default to the Flash player, with MP3 embeds as the fallback (the ideal in this situation) but those are going to get very technical very fast, and are outside the scope of this blog. For further reading, I suggest this site which shows one such method, or here, where you can find some more in depth information on the HTML5 audio element.

If one of my dear readers who is savvy in this sort of nonsense can come up with a quick-and-dirty method of defaulting to the Soundclound player, with MP3 embed as the fallback, we’d all love to hear about it. (And a final programming note: that audio file is the first recording I made of the CP80B once I had it mostly tuned. Shitty playing, but hey, never had a lesson.)