Html 5 audio tag custom controls?

You create your elements like so…

<audio id="yourAudio" preload='none'>
    <source src="https://stackoverflow.com/questions/7638754/the url to the audio" type="audio/wav" />
</audio>
<a href="#" id="audioControl">play!</a>

And add some functionality:

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};

Right now, the button is just simple text (“play!” or “pause!”), but you could do just about anything you wanted with CSS. Instead of setting the innerHTML, set the className and you’re good to go!