2010
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.
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:
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.
(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.)
-CR
posted May 2, 2010 by Chris Randall
I hope SoundCloud ends up with an HTML5 solution. Right now, I can't post files to SoundCloud on Firefox, as I use a Flash blocker, and the standard SoundCloud icons aren't clickable to enable Flash.
Also, I'm going to archive this post so that my daughters can read it in a few years, so they can learn the proper syntax of swearing. Right now, they'll get in trouble if they use certain words, but I am secretly proud that my 6 yo uses the words in the right context, with perfect inflection.
posted May 2, 2010 by seancostello
posted May 2, 2010 by Mark
-CR
posted May 2, 2010 by Chris Randall
EDIT: Nope. As expected, it just jams both objects together.
-CR
posted May 2, 2010 by Chris Randall
<object type="application/x-shockwave-flash" data="link [player.soundcloud.com]" id='movie' height="81" width="100%">
<param name="movie" value="link [player.soundcloud.com]">
<param name="allowscriptaccess" value="always">
<p>Fallback</p>
<audio src="/samples/round_CP.mp3" controls="controls"></audio>
<embed allowscriptaccess="always" height="81" src="link [player.soundcloud.com]" type="application/x-shockwave-flash" width="100%">
</object><span><a href="link [soundcloud.com]">link [soundcloud.com]</a>">Round CP</a> by <a href="<a href="link [soundcloud.com]">link [soundcloud.com]</a></span>
Your view script is eating the link tags, but it should be clear enough.
This might choke on IE though
posted May 2, 2010 by 33degrees
All of this is kind of quixotic, because Soundcloud will almost certainly update their embedding code in the very near future to enable an HTML5 default for Mobile Safari, thus obviating this exercise. In the meantime, unless you have a high mobile device traffic situation, I'd suggest just using the Soundcloud or Bandcamp player alone, as it's obviously pretty much a PITA no matter how you look at it.
-CR
posted May 2, 2010 by Chris Randall



Since you upload WAV/AIFF to Soundcloud, it seems like HTML5 would be really easy for them to implement if they only utilized WAV (that is if browsers followed the standards).
Either way, HTML5 Video ran into similar issues with different browsers supporting different codecs. Luckily, in that implementation they had a type inclusion that allowed you to define which codec the src was linked to.
As far as defaulting to Soundcloud with an MP3 embed as a fallback, I could see using javascript to check browser/host type or do the same on the server-side.
posted May 2, 2010 by megabytemike