HTML5 Video/Audio player Volume Control With Key in JavaScript

By Faruque Ahamed Mollick

Today, in this post I am going to show you how you can control HTML5 video/audio player volume from the key in JavaScript.

In this tutorial, we will write our JavaScript code to increase and decrease the volume of our HTML player with up and down arrow keys. The up arrow key will increase the volume and down arrow key will decrease volume.

First of all, let’s create our HTML5 player:

<audio id="cs_audio" controls>
  <source src="Maahi_Raaz.mp3" type="audio/mpeg">
</audio>

You can see that we have created the HTML audio player. Now, you can’t control or increase and decrease the volume of this player by pressing keys from the keyboard. So here we will let the user control the volume of our HTML5 audio player with the up and down arrow keys.

At first, let’s take our audio element in a JavaScript variable:

var audio_element = document.getElementById("cs_audio");

So we have taken our audio element in a variable by the id of the audio tag.

Now we are going to use onkeydown event to detect which key pressed. Inside the onkeydown event, we will detect if the up or down arrow key pressed by detecting the key code. When a user presses one of these two keys, we have to increase or decrease the volume with JavaScript.



Below is our Complete JavaScript code:

var audio_element = document.getElementById("cs_audio");

document.onkeydown = function(event) {
    switch (event.keyCode) {
       case 38:
            event.preventDefault();
            audio_vol = audio_element.volume;
            if (audio_vol!=1) {

              try {
                  audio_element.volume = audio_vol + 0.02;
              }
              catch(err) {
                  audio_element.volume = 1;
              }
              
            }
            
          break;
       case 40:
            event.preventDefault();
            audio_vol = audio_element.volume;
            if (audio_vol!=0) {

              try {
                  audio_element.volume = audio_vol - 0.02;
              }
              catch(err) {
                  audio_element.volume = 0;
              }
              
            }
            
          break;
    }
};

Inside our onkeydown event, we are detecting if up or down arrow key pressed from the keyboard or not by checking the keycode. The keycode for up arrow is 38 and for down is 40.

Also, read:

 

To learn how to detect key pressed I recommend you read this post – Detect arrow key press in JavaScript.

Now depending on the up and down key press, we are increasing and decreasing the volume of our HTML5 DOM audio/video player. If the keycode is 38 or up arrow, then we increase the volume and if the code is 40, we are decreasing the volume.

We have first get the player volume in our JavaScript variable. In our code, we are increasing the volume with 0.02 step. That means if the up arrow key pressed once, it will increase the volume by 0.02. On the other hand, if the user presses the down key, it will decrease the volume by 0.02. If we keep holding one of the keys then it will continue decreasing the volume until it becomes 0 or 1.

There are another thing I have to tell you is that the volume range of an HTML5 video/audio player has the volume range between 0 and 1. 0 is the minimum value of volume and 1 is the maximum volume value.

You can also notice that we have used the JavaScript try-catch statement to avoid the error in the console log.

Well, our HTML5 audio player is completed with volume control. Now you can run and test it on your own browser to check if it is working or not. if everything you did correctly, then you will able to increase or decrease the volume of your HTML5 audio player.

In this example, we have created volume control for the HTML5 audio player. Well, the JavaScript code will also work for an HTML5 video player.

 

Leave a Reply

Your email address will not be published. Required fields are marked *