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 <audio> tag interface. I want to do my own html/css styles for the player.

My actual code(it works)

if('webkitAudioContext' in window) {
    var myAudioContext = new webkitAudioContext();
    }

    request = new XMLHttpRequest();
    request.open('GET', 'http://96.47.236.72:8364/;', true);
    request.responseType = 'arraybuffer';
    request.addEventListener('load', bufferSound, false);
    request.send();

    function bufferSound(event) {
      var request = event.target;
      var source = myAudioContext.createBufferSource();
      source.buffer = myAudioContext.createBuffer(request.response, false);
      source.connect(myAudioContext.destination);
      source.noteOn(0);
    }

http://jsfiddle.net/EY54q/1/

Does someone know how can to edit this player style, or do something to use my own html/css code to execute this player?

回答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:

<button id="playpause">play
    <!--you can style the content with anything!-->
</button>
<audio id="player">
    <source src="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.

回答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".