jqueryhtmlaudiohtml5-audiojquery-slider

jquery slider that controls html5 audio volume

I am creating a custom JQuery/HTML5 audio player and I want a slider that can control the volume of the audio element. I have the slider that is tagged with class="volume_slider" and the songs are tagged with class="audio-player".
For some reason this code will not change the volume, I got the code from here, any ideas on why the volume isn't changing?

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

  • When accessing audio-player you are accessing the jQuery object, not the element itself. So instead set the property with, $('.audio-player').prop('volume', (value/100));