Volume warnings

May 14, 2021 - Doug Sillars in Player SDK, JavaScript

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:

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

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

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", 
            autoplay:true,
            muted:true
        });
     
    </script>

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!");
                    if(warning){
                        //they've been warned
                        document.body.style.backgroundColor = "red";
                        document.getElementById("text").innerHTML= "THIS IS LOUD";
                    }
                    else{
                        //warn user
                        warning=true;
                        player.setVolume(.5);
                        document.getElementById("text").innerHTML= "Are you sure? Loud volumes can damage hearing";
                    }
                }else if(vol<.50){
                        warning=false;
                        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).