Using jQuery to control HTML5 volume

by

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

More Related Contents:

  1. How to get value from jQuery UI slider?
  2. Select all contents of textbox when it receives focus (Vanilla JS or jQuery)
  3. JQuery Slider, how to make “step” size change
  4. Javascript: do an action after user is done scrolling
  5. How to make Jquery UI Tabs scroll horizontally if there are too many tabs
  6. jQuery x y document coordinates of DOM object
  7. Adding The Anchor Text As The Title Dynamicaly
  8. How to prevent a click on a ‘#’ link from jumping to top of page?
  9. Resize jqGrid when browser is resized?
  10. Selecting multiple classes with jQuery
  11. Passing data to a jQuery UI Dialog
  12. document.getElementsByClassName().innerHTML always returns “undefined”
  13. Input field for Tags separated by comma
  14. Only on Firefox “Loading failed for the with source”
  15. Check if parent window is iframe or not
  16. jQuery load content when scroll to bottom-100px of page, multiple events fired
  17. Using jQuery, how do you find only visible elements and leave hidden elements alone?
  18. Remove all attributes
  19. Clone a file input element in Javascript
  20. How to get the image size (height & width) using JavaScript
  21. submit event does not fire if submit initiated programmatically
  22. jQuery plugin DataTables: How to highlight the current search text?
  23. Add CSS rule via jQuery for future created elements
  24. jQuery continuous mousedown
  25. Jquery getJSON cross domain problems
  26. closure inside a for loop – callback with loop variable as parameter [duplicate]
  27. How to flatten array in jQuery?
  28. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  29. Capturing result of window.onbeforeunload confirmation dialog
  30. Can you have multiple lines in an element?

Leave a Comment