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

Carnassial

Answer 1

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);
    }
});

Bunchy

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. @Bunchy – Carnassial

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. – Basil

Answer 2

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>​

Candide

Answer 3

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;
    });
});

Jingoism

Answer 4

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 ;
});

Igbo