Well, the JavaScript code will also work for an HTML5 video player.Menus Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Split Navigation Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Scroll Shrink Navbar on Scroll Sticky Navbar Navbar on Image Hover Dropdowns Click Dropdowns Cascading Dropdown Dropdown in Topnav Dropdown in Sidenav Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu Mobile Menu Curtain Menu Collapsed Sidebar Collapsed Sidepanel Pagination Breadcrumbs Button Group Vertical Button Group Sticky Social Bar Pill Navigation Responsive Header In this example, we have created volume control for the HTML5 audio player. if everything you did correctly, then you will able to increase or decrease the volume of your HTML5 audio player. Now you can run and test it on your own browser to check if it is working or not. Well, our HTML5 audio player is completed with keyboard volume control. You can also notice that we have used the JavaScript try-catch statement to avoid the error in the console log. 0 is the minimum value of volume and 1 is the maximum volume value. 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. If we keep holding one of the keys then it will continue decreasing the volume until it becomes 0 or 1.
On the other hand, if the user presses the down key, it will decrease the volume by 0.02. That means if the up arrow key pressed once, it will increase the volume by 0.02. In our code, we are increasing the volume with 0.02 step. We have first get the player volume in our JavaScript variable. If the keycode is 38 or up arrow, then we increase the volume and if the code is 40, we are decreasing the volume. Now depending on the up and down key pressed from the keyboard, we are increasing and decreasing the volume of our HTML5 DOM audio/video player.
HTML MP4 VOLUME SCROLL HOW TO
To learn how to detect key pressed I recommend you read this post – Detect arrow key press in JavaScript. Make an HTML5 video in slow motion using DOM playbackRate property.The keycode for up arrow is 38 and for down is 40. Inside our onkeydown event, we are detecting if up or down arrow key pressed from the keyboard or not by checking the keycode. When a user presses one of these two keys, we have to increase or decrease the volume with JavaScript.īelow is our Complete JavaScript code: var audio_element = document.getElementById("cs_audio") Inside the onkeydown event, we will detect if the up or down arrow key pressed by detecting the key code. Now we are going to use onkeydown event to detect which key pressed. So we have taken our audio element in a variable by the id of the audio tag. So here we will let the user control the volume of our HTML5 audio player with the up and down arrow keys.Īt first, let’s take our audio element in a JavaScript variable: var audio_element = document.getElementById("cs_audio")
Now, you can’t control or increase and decrease the volume of this player by pressing keys from the keyboard. You can see that we have created the HTML audio player. The up arrow key will increase the volume and down arrow key will decrease volume.įirst of all, let’s create our HTML5 player: 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 just from the keyboard. Today, in this post I am going to show you how you can control HTML5 video/audio player volume from the key in JavaScript.