html5 audio 插件,javascript - How to customize html5 audio player - Stack Overflow

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:

play

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

}

}

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.