LearnFast.Ninja

jPlayer volume change example using jQuery and slider range

The volume method gets two parameters: string and number from 0.0 to 1.0. Use the HTML5 tag input with type range to change the volume. The JavaScript function to change the volume and the UI.

Step 1: The volume method gets two parameters: string and number from 0.0 to 1.0.
$("#jpId").jPlayer("volume", 0.8);

Step 2: Use the HTML5 tag input with type range to change the volume.

<input type="range" min="0" max="100" value="100" step="1" onchange="changeVolume(this.value)" />

<span id="volumePercent">100</span>%


Step 3: The JavaScript function to change the volume and the UI.

<script type="text/javascript">

    $("#jpId").jPlayer("volume", 0.8);

    function changeVolume(newValue) {

        var volume = (parseInt(newValue)) / 100;

        $("#jpId").jPlayer("volume", volume); // 0.0 - 1.0

        $("#volumePercent").html(newValue);

    }

</script>


Result:


Tags

jquery

jplayer slider range