Saturday, October 8, 2011

Avoid using the 'preload="none"'-value with the audio-tag in IE-9...

First of all: For those of you looking for some M$-bashing in this posting, I'm afraid that you're going to have to look elsewhere...!
That being written - let's move on...

As you probably know, in conjunction with HTML5's audio-tag there are three values, which you can chose from  regarding how an audio file should be loaded, when the page loads - this is done by using the the "preload"-attribute; the three values are:

auto : Which specifies that the browser should load the entire audio-file, when page loads
metadata: Which specifies that the browser should load only the audio-file's metadata, when page loads
none: Which specifies that the browser should not pre-load the audio-file, when page loads

Now for those of  you, who might be concerned with such things such as server-traffic, bandwidth etc.would (obviously) probably opt for using  the "none"-value in connection with the audio-tag's "preload"-attribute!


Unfortunately - if the "none"-value is chosen, IE-9 (which otherwise is a browser that M$ has - for the first time? - gotten done right), will NOT render and - inititally - show their HTML5 audio-player on one's webpage!
The player's there, mind - but it isn't visible, and can only be activated (and subsequently made visible), if one right-clicks in the area, where the player should've been (visible)!

Not all that user-friendly, if you ask me; but maybe the explanation to this can be found in M$'s own documentation:

It can be read regarding the "none"-value that: "The document author does not expect the user to need the media resource, or the server wants to minimize unnecessary traffic."!

So, in other words: M$ believes that the "none"-value should be used IF one doesn't expect a user to need the audio-player (present in IE9, mind)!

So to sum things up: In short - don't use the audio-tag's "preload"-attribute's "none"-value, and you'll be safe, if you want your audio-player to also work in IE-9...!

Thanks for reading this...


  1. This doesnt seem to work on IE9 on Windows Phone 7 even with preload set to metadata.

  2. @Soundtweaker: Thanks for your comment!
    TBH, I haven't tried any of this out on a Windows phone (as I don't have one at hand); furthermore, I didn't exactly have handheld devices in mind, when I wrote this!
    So thanks for the intel - I'll be looking into this A.S.A.P. ...!

  3. I was looking at your other post on getting it to work on iPhone.
    I'm trying to get it to work with a Soundcloud set of mine. All I'm getting is a small transport bar that doesnt play at all on WP7 mango.

  4. IE9 isn't behaving correctly based on the w3c intended, which is don't download any data until the user requests it to save bandwidth. So when would you want a big block of white space on the screen instead? There's no use case for that.

    In IE10 the behavior appears to be correct, it displays the UI and just doesn't query the server. It would be nice if MS would fix the IE9 bug, since these days you do get billed per GB for bandwidth, but I'm sure their priorities are elsewhere based on past browsers unfortunately.

  5. Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.
    html5 audio player| html5 audio player

  6. Thanks for the info, just realized it myself.

    Do you know any solution for that? e.g being able to set preload to 0 and work in ie9?