How To Customize Html5 Audio Player

I'm doing a html5 audio player so I'm trying to use a custom player. I don't want to use the default

Solution 1:

You can completely make your own style. just forget about the controls option (you can simply use controls and do not need to use controls="controls"). Just create buttons/divs/whatever, style them, and add an eventlistener that controls the audio interface:

html:

<buttonid="playpause">play
    <!--you can style the content with anything!--></button><audioid="player"><sourcesrc="http://96.47.236.72:8364/;" /></audio>

JS:

window.player = document.getElementById('player');
document.getElementById('playpause').onclick = function () {
    if (player.paused) {
        player.play();
        this.innerHTML = 'pause';
    } else {
        player.pause();
        this.innerHTML = 'play';
    }
}

http://jsfiddle.net/LqM9D/1/

I see you are also using the audio api. Please note that you can't just dump an audio file in a buffer. It needs to be decoded to raw PCM. This takes a lot of time. A really easy method is to create a source node which is linked to the audio element:

var source = context.createMediaElementSoure(player); //we defined player in the first block of code

To make your page a bit more cross-browser capable:

window.AudioContext = window.AudioContext||window.webkitAudioContext;context = new AudioContext();

Edit:

I think you want to know what else you can do with the element. You can also make a slider for the timeline, and a volume slider/mute button, although I'd prefer the latter two to do that on a gainnode at the end of a line of filters and such.

Solution 2:

Yes. It is possible via "shadow dom". You just need to enable it in your browser and write styles for elements, that will arrive.

As I understend - it is browser specific feature. But for webkit-based styling of "shadow dom" work perfect. There is not so many info, however this feature already used in full. For example see this question: Why do no user-agents implement the CSS cursor style for video elements If you enable displaying shadow dom in inspector setting, you will se how it works. (Also there is public list with selectors list - https://gist.github.com/afabbro/3759334)

For other browsers you need check support of working with "shadow dom".