Using jQuery to control HTML5 <audio> volume

Question

Okay, I want to control the volume of an HTML5 element using the jQuery Slider element. I have implemented the slide, but can't figure out how to make the value of the slider take the place of the "audio player.volume = ?".

Any help is much appreciated.

Source

Jasper · Accepted Answer · 2012-03-06 18:16:28Z

15

The volume property is like opacity, it goes between zero and one, one being 100%.

Your code is so close, you just need to divide value by 100 when setting the volume of the <audio> element:

$("#slider").slider({
    value  : 75,
    step   : 1,
    range  : 'min',
    min    : 0,
    max    : 100,
    change : function(){
        var value = $("#slider").slider("value");
        document.getElementById("audio-player").volume = (value / 100);
    }
});

Notice I also put the change event handler inside the initialization of the slider widget.

When I paste the above code along into the console while on your webpage, and the volume slider worked as expected.

Also, you can bind to the slide event and the volume will change as the user slides the slider widget, not just after they finish moving the handle:

$("#slider").slider({
    value : 75,
    step  : 1,
    range : 'min',
    min   : 0,
    max   : 100,
    slide : function(){
        var value = $("#slider").slider("value");
        document.getElementById("audio-player").volume = (value / 100);
    }
});

edited Mar 6, 2012 at 18:16

answered Mar 6, 2012 at 18:10

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

futureslay Over a year ago

Works, brilliantly. However, if you click randomly on the bar, obviously, the slider moves and the volume adjusts, but if you go down a few times, the volume will go down, but if you then go up once, it goes down again, then back up. The slider works fine though. EDIT: Fixed this by adding both the slide and change into the initialisation. @Jasper

Omegacron Over a year ago

Works great for me! Used this with a custom jQuery UI theme for the slider, and just like that I have a custom volume slider for the MP3 playing in the background.

j08691 · Accepted Answer · 2012-03-06 18:19:31Z

4

Here's a quick jsFiddle example (note: the audio begins on page load).

jQuery:

$('#audioSlider').slider({
    orientation: "vertical",
    value: audio1.volume,
    min: 0,
    max: 1,
    range: 'min',
    animate: true,
    step: .1,
    slide: function(e, ui) {
        audio1.volume = ui.value;
    }
});

HTML:

<div id="audioSlider"></div>

<audio id="audio1" autoplay>
    <source src="http://www.w3schools.com/html5/song.ogg" type="audio/ogg" />
    <source src="http://www.w3schools.com/html5/song.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

answered Mar 6, 2012 at 18:19

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

J-Roel · Accepted Answer · 2018-02-28 06:28:57Z

In jQuery you can get the DOM object by simply using

$("audio")[0]

So an example would be:
html

 <div class="audio-clip">
    <h4>Clip 1</h4>
    <input type="button" class="play-button">Play</button>
    <input type="range" min="0" max="1" step="0.1"/>
    <audio src="http://www.w3schools.com/html5/song.mp3"></audio>
 </div>
 <div class="audio-clip">
    <h4>Clip 2</h4>
    <input type="button" class="play-button">Play</button>
    <input type="range" min="0" max="1" step="0.1"/>
    <audio src="http://www.w3schools.com/html5/song.mp3"></audio>
 </div>

jQuery

$(document).ready(function() {
    $(".play-button").click(function(){
        $(this).parent("div").find("audio").trigger('play');    
    });

    $(".audio-clip input[type='range']").on("input", function(){
        $(this).parent("div").find("audio")[0].volume = this.value;
    });
});

Kurt Van den Branden · Accepted Answer · 2020-01-01 16:02:21Z

1

This can also be achieved with a simple input range element, without using jQuery-UI.

<input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="0.3" />


let audioStream = new Audio('https://mofosounds.com:8000/;');

$("#volumeSlider").change(function(){
    let volume = $(this).val();
    audioStream.volume = volume ;
});

edited Jan 1, 2020 at 16:02

answered Apr 6, 2019 at 11:11

Kurt Van den Branden

13.2k10 gold badges83 silver badges92 bronze badges

Collectives™ on Stack Overflow

Using jQuery to control HTML5 <audio> volume

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related