javascript – Customization of the html5 audio player

Question:

I've been wondering for some time, is there any possibility of customizing the html5 audio player. So far I know that there is a possibility using plugins developed in javascript, but this way I haven't found it yet.

Answer:

Customizing the player is impossible.

However, you can do it differently: make it invisible, and create your own custom controls, sending commands directly to the player via JavaScript.

For example:

<audio id="demo" src="audio.mp3"></audio>
<div>
    <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button>
    <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button>
    <button onclick="document.getElementById('demo').volume+=0.1">Aumentar o volume</button>
    <button onclick="document.getElementById('demo').volume-=0.1">Diminuir o volume</button>
</div>

*This example is taken from the MDN website, where you can find more details on the subject: Using audio and video with HTML5 .

Scroll to Top