Adjust the volume of media using JavaScript in PhoneGap

In our previous section, we made our own control buttons using JavaScript. In this section, we will learn how we can adjust the volume using JavaScript in PhoneGap. We will create a volume slider that will control the volume of our media. The volume is the property of our player, which can be easily controlled through the user interface.

These are the following steps used to create a volume slider in PhoneGap:

1) Create index2.html file

We will create another html file index2.html. This file will contain the same code as present in the index.html file. We will make changes in this file so that our index.html file remains unchanged.

Adjust the volume of media using JavaScript in PhoneGap

2) Create an input tag

Now, we will create slider in user interface using <input></input> tag and set type to range. We will also give an Id to it. We will set the maximum, and minimum value and set the value of step and value.

3) Grab the volume slider

Now, we will grab the volume slider using JQuery notation. We will also use an event slide stop to call the anonymous function. We will get the slider using the document.getElementById. We will set the volume to the console using console.log() and the player volume in the following way:

$('#rngVolume').on("slidestop", function(){
                    var volume = document.getElementById('rngVolume').value;
                    console.log(volume);
                    player.volume = volume;
                    
});

Complete Project

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <title>Media</title>
        <script>
        var player;
            
        window.onload=function()
        {
            player = document.getElementById('myMusic');
            document.getElementById('btnPlay').addEventListener('click', function(){
               player.play(); 
            });
            document.getElementById('btnPause').addEventListener('click' ,function(){
                player.pause();   
            });
            document.getElementById('btnStop').addEventListener('click', function(){
                player.pause();
                player.currentTime = 0;
            });
            $('#rngVolume').on("slidestop", function(){
                    var volume = document.getElementById('rngVolume').value;
                    console.log(volume);
                    player.volume = volume;
                    
                });
            
        }
        
        </script>
    </head>
    <body>
        <audio id="myMusic">
            <source src="media/camera.mp3"/>
        </audio>
        <button id="btnPlay">Play</button>
        <button id="btnPause">Pause</button>
        <button id="btnStop">Stop</button>
        <input type="range" id="rngVolume" min="0" max="1" step=".01" value=".5"/>
        <script type="text/javascript" src="cordova.js" ></script>
    </body>
</html>

Output: