Eu estou trabalhando na criação de uma placa de som com vários clipes de áudio.

Em vez de usar os controles de áudio HTML5 padrão, quero estilizar cada botão com algum texto de título, para que, quando um usuário pressionar um botão, o clipe associado seja reproduzido.

Tudo está funcionando bem em navegadores HTML 5 (Chrome, Firefox, Safari e IE9 +), usando o seguinte código:

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

No entanto, esta solução não é suportada em navegadores não compatíveis com HTML 5, como o Internet Explorer 8.

Eu estou procurando por algum tipo de solução alternativa que me permita (a) detectar se um navegador não suporta a tag HTML 5 e redirecionar para uma versão alternativa da placa de som ou (b) usar um fallback (flash, etc.) com um estilo personalizado no botão se o suporte não estiver presente.