Tutorials · 5 min read

Kid covering ears

Volume warnings

Many video providers will warn you if the volume level is too high. Learn how to do the same with api.video

Doug Sillars

May 14, 2021

With so many of us wearing headphones all day for calls, music, podcasts, etc, no one likes having the volume unexpectedly blast their ears. Using the api.video player SDK, you can set a warning when the volume is inadvertently set too high. Let's walk through how it works!

Setting up the SDK

In this simple HTML page, we have a div for the video, and a paragraph for text:

    <script src="https://unpkg.com/@api.video/player-sdk" ></script>

	<div id="target" style="align:center;width:75%;"></div>
	<p id="text"></p>

We add a script to load the player SDK. Now we can instantiate the player with JavaScript:

   <script type="text/javascript">
        window.player = new PlayerSdk("#target", { 
            id: "vi4blUQJFrYWbaG44NChkH27", 

This creates the video, using the videoId and tells the player to autoplay the video while muted. (This is the way to ensure that autoplay works in all browsers, but sadly is muted).

Volume control

When a video is muted, the user will click/touch on the volume control. In this case we do not want them to accidently turn the volume too high, so we're going to set an initial maximum volume of 50% (in reality, this is kind of low, but test for yourself.)

We do this by setting the event listener for volumechange, so whenever there is a change in volume, we can apply our script.

Here's the code for the volume change:

            var warning=false;
            player.addEventListener('volumechange', function(volume) { 
            var vol = volume.volume;
                console.log(`volume has changed: ${vol}`); 
                if(vol >0.50){
                    console.log("too loud!");
                        //they've been warned
                        document.body.style.backgroundColor = "red";
                        document.getElementById("text").innerHTML= "THIS IS LOUD";
                        //warn user
                        document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";
                }else if(vol<.50){
                        document.body.style.backgroundColor = "green";
                        document.getElementById("text").innerHTML="Nice and soft.";
		                else{ //exactly 0.5
                    document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";


First, we declare the boolean warning as false. If the player detects a volume change, we look to see if the volume is over or under 50%.

High volume

If the volume is set to over 50%, we initially reset it to 50% and ask, "are you sure?", and the warning boolean is flipped to true. If the user tries to go over 50% again, we let them set the higher volume (and change the page background to red).

Low volume

If the volume is set to under 50%, we change the background to green.

That's it

The code is on Github, and the demo is live at volumewarning.a.video.

Here's a video of the demo in action:

Try out more than 80 features for free

Access all the features for as long as you need.
No commitment or credit card required

Video API, simplified

Fully customizable API to manage everything video. From encoding to delivery, in minutes.

Built for Speed

The fastest video encoding platform. Serve your users globally with 140+ points of presence. 

Let end-users upload videos

Finally, an API that allows your end-users to upload videos and start live streams in a few clicks.


Volume discounts and usage-based pricing to ensure you don’t exceed your budget.