Home » Blog » HTML5 Audio with Fallback in WordPress

HTML5 Audio with Fallback in WordPress

Apr 19, 2013   //   by David   //   Blog, Coding  //  4 Comments

I’ve written a couple articles and some code for dealing with audio files in WordPress and on iOS devices. The hope was that I could use html5 audio whenever it’s supported with a fallback to my favorite audio player.

It looks like we are almost there. With JetPack installed all you need to do to get HTML5 audio is use the audio shortcode

[ audio http://davidmeharey.com/wp-content/uploads/audioplayerfix.mp3 ]

Displaying this (you may not see it in Firefox — or it flashed on screen for a second — so try it in Chrome or Safari):

However, this isn’t currently supported in all browsers. The big one being .mp3 in Firefox. Visit WordPress.org to see a list of supported browsers.

Still a Solution Under Construction

It looks like I’ll need to put a little bit of time in to see if I can get the previous solution to work with this new solution.

Update: May 2013. Updating JetPack to 2.2.5 looks like it resolves the issue.

Update: Well it looks like the JetPack devs are trying to address the problem and the fact that audio-payer has some security issues so this solution is still in flux.

From the JetPack devs:

We’re working on that problem, and I will post again here once we can solve the issue.

Here is the situation today:

Chrome natively supports: .mp3, .m4a, .wav, and .ogg.
Safari natively supports: .mp3, .m4a, .wav, but not .ogg (which will display a download link).
Firefox natively supports: .wav and .ogg, but not .mp3 and .m4a (which will both display a download link).
Opera natively supports: .wav and .ogg, but not .mp3 and .m4a (which will both display a download link).
Internet Explorer natively supports: .mp3, but not .m4a, .wav, and .ogg (which will all display a download link).

What formats a browser chooses to natively support is entirely up to the browser’s developers, we have no control over that.

Until last week, we have given the Flash audio player precedence, fallen back to the browser’s native player when Flash isn’t available, and then fallen back to the Download link when the format is not supported by the browser.

With the Flash player disabled, we are giving the browser’s native player precedence and falling back to the Download link when the format is not supported by the browser.

Whether it’s via an embedded player or a Download link, all of your viewers will be able to play the audio files.

4 Comments

  • Hi David
    IMHO the best way is to hard code audio playback into sites including WordPress. Alright you need to use HTML5 coded WP themes but you should use those anyway!
    Then you can hard code your audio with something like:

    Your user agent does not support the HTML5 Audio element.

    See:http://www.w3.org/wiki/HTML/Elements/audio

    Shortcodes and plugins are fine if you really must!
    I am researching HTML5 audio-all very interesting..best wishes

  • The code in my first post didn’t appear :-( (I didn’t use tags )

    I’m trying again:

    Your user agent does not support the HTML5 Audio element.


    (I hope this displays….)

  • Aw shucks…the code didn’t display even using code tags. This comment form doesn’t support code tags :-(

  • Richard, part of the issue with WordPress is the ability for non-technical people to create and maintain their own websites, granted hard-coding is preferred but I think the simplicity of being able to just type [ audio filename ] trumps that for most users.

Leave a comment