Estoy trabajando en la creación de una tarjeta de sonido con varios clips de audio.

En lugar de utilizar los controles de audio HTML5 estándar, quiero aplicar un estilo a cada botón con un texto de título, de modo que cuando un usuario presiona un botón, se reproduzca el clip asociado.

Todo funciona bien en los navegadores HTML 5 (Chrome, Firefox, Safari e IE9 +), utilizando el siguiente 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>

Sin embargo, esta solución no es compatible con navegadores que no sean compatibles con HTML 5 como Internet Explorer 8.

Estoy buscando algún tipo de solución alternativa que me permita (a) detectar si un navegador no admite la etiqueta HTML 5 y redirigir a una versión alternativa de la placa de sonido o (b) usar una alternativa (flash, etc.) con un estilo personalizado en el botón si el soporte no está presente.