May.2
2010
Something Wicked This Way Comes...
Post Comment   
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.

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.)

Comments:
« Previous Page | Next Page »
So, I was just reading about HTML5 audio today as I'm working on my portfolio on my website. Particularly, I was hoping since everyone was adopting Ogg, that FLAC would be included. WRONG. Stupidly, FLAC isn't included in FF's support. Strangely, the w3c mandates that all browsers need to support WAV -- incase you had the money to blow on bandwidth and the patience to wait downloading.

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

_you_ might be able to do that, but _we_ (reading: people that don't actually dream in markup languages) would like something very simple, only slightly more complex than the audio tag itself. Is such a thing possible?

-CR

posted May 2, 2010 by Chris Randall

I hate to ask, but how will IE deal with all of this stuff?

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

You know, you could have just asked...

link [www.heluna.com]



posted May 2, 2010 by Mark

I wanted something for everyone, not just me.

-CR

posted May 2, 2010 by Chris Randall

I haven't tested this, but it would seem the bestl solution would be to embed the audio tag inside the objet tag, rather than the other way around; That way, the html5 audio player will only show if flash isn't supported.

posted May 2, 2010 by 33degrees
Let me give that a whirl...

EDIT: Nope. As expected, it just jams both objects together.

-CR

posted May 2, 2010 by Chris Randall

Failing on firefox, right? That seems to be because soundcloud's object tag isn't being recognized by firefix, so it's falling back to the embed tag, hence displaying both. Try this:

<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

I just want a simple audio player to show up on my site, rather than have download links. And since i'm one of the many who don't dream in markup language, i'd like to know how to do this.

posted May 2, 2010 by Computer Controlled
Well, there's the rub. Only HTML5 browsers can do this, so what we're trying to work out is a combination of simple commands that can utilize the Soundcloud (or BandCamp) player as a default (and give you your simple audio player) and also have it work on an iPad or iPhone.

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

« Previous Page | Next Page »
Post a Comment:
You must be logged in to comment.
Login
Welcome to posiNET!
   New User
   Returning Member

Search
Enter your search term below to search analogindustries.com:
Now on kPOSI
» hi-fi stream  (128kbps)
Sister Machine Gun - Sink
» lo-fi stream  (32kbps)
Impossible Recording Machine - Damage