Fallback solution for HTML <audio> and legacy browsers

Question

I am working on creating a sound board with various audio clips.

Rather than using the standard HTML5 audio controls, I want to style each button with some title text, so that when a user presses a button, the associated clip plays.

Everything is working fine in HTML 5 browsers (Chrome, Firefox, Safari, and IE9+), using the following code:

    <script type="text/javascript" charset="utf-8">
       $(function() {
            $("audio").removeAttr("controls").each(function(i, audioElement) {
                var audio = $(this);
                var that = this; //closure to keep reference to current audio tag
                $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
                    that.play();
                }));
            });
        });
    </script>

    <!-- Sample Audio Clip -->
    <audio controls preload="auto" autobuffer title="Sounds of Laughter"> 
    <source src="assets/clips/1.mp3" />
    <source src="assets/clips/1.ogg" />
    </audio>

However, this solution is not supported on non-HTML 5 compliant browsers like Internet Explorer 8.

I am looking for some sort of workaround solution that will allow me to either (a) detect if a browser doesn't support the HTML 5 tag and redirect to an alternate version of the sound board or (b) use a fallback (flash, etc.) with custom styling on the button if support is not present.

Answer 1

You should use both Modernizr as Garret said and jPlayer

Check Garrett's answer on how to check for compatibility. Though I don't see why it would be useful if your only goal is to seamlessly play HTML5 or Flash based on compatibility. jPlayer does it automatically.

You just have to instantiate it:

$("#music").jPlayer({
    ready: function (event) {
        $(this).jPlayer("setMedia", {
            mp3:"music.mp3",
            oga:"music.ogg"
        });
    },
    swfPath: "js",
    supplied: "mp3, oga"
});

The following depends on the interface you want to use. jPlayer has some skins, but you can modify them to your will or just create a whole interface from scratch like I do and use jPlayer methids

Answer 2

You should take a look at the Modernizr script library. This will allow you to perform conditional logic based on what HTML5 features are supported by the browser. For example, you could do something like this:

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

Documentation can be found here: http://modernizr.com/docs/#features-html5.

Answer 3

I found another example which I have slightly modified for MP3 to OGG fallback. It uses the canPlayType method:

var audiofile = 'example.mp3';
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg"))
      && ("" != audioTag.canPlayType("audio/mpeg")))) {
    audiofile = audiofile.replace('.mp3','.ogg');
}