Customize volume player bar html5

Question

Customize volume player bar html5

Navigation

#1 by (3 votes)

1

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

Mycodesofar

<audio id="demo" src="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"></audio><div><buttononclick="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 that instead of these buttons that appear to increase and decrease the volume would be a bar in the same style as the one I posted above. If anyone can help me thank you. Thank you in advance.

javascript jquery html5 html5-audio

asked by anonymous 31.01.2017 / 16:28

1 answer

Doubt regarding CSS selectors How to display the date and time "at runtime"?

score 3 · Accepted Answer

You can use "new" input type=range with min=0 , max=1 and step=0.1 , when onchange happens, it assigns volume to this.value :

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