Customize Html5 player volume bar

Question

Friends, I have an Html5 player with all standard controllers. I would like to make a volume controller in this same style:

My code so far

<audio id="demo" src="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.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>

and I would like instead of those buttons that appear to increase and decrease the volume to be a bar in the same style as the one I posted above. If anyone could help me, I’d appreciate it. Grateful from now on.

Answer 1

You can use the "new" input type=range with min=0, max=1 and step=0.1, when the onchange it does the assign of volume for this.value:

    <audio id="demo" src="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"></audio>
<div>
    <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button>
    <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button>
</div>
<input type="range" id="weight" min="0" value="0.5" max="1" step="0.1" onchange="document.getElementById('demo').volume=this.value">