Web Audio API – Controlling Audio/Video Loudness

After my previous post about getting more volume with the Web Audio API , I decided to look into controlling the loudness of audio tags and video tags in a more straight-forward (prototypal) way. That’s when I came up with the following JS prototype:

Prototypal Functions

The following are all of the methods associated with each instance:

  • MediaElementAmplifier#getContext()
    Returns a reference to the associated AudioContext.
  • MediaElementAmplifier#getSource()
    Returns a reference to the associated source node.
  • MediaElementAmplifier#getGain()
    Returns a reference to the associated gain node.
  • MediaElementAmplifier#getElement()
    Returns a reference to the media element that was passed in to instantiate the MediaElementAmplifier.
  • MediaElementAmplifier#getVolume(opt_getPerceived)
    Returns the volume. If opt_getPerceived is true-ish, the returned value will be the volume multiplied by the loudness.
  • MediaElementAmplifier#setVolume(value, opt_setPerceived)
    Sets the volume to the specified value. If value is greater than 1, the loudness will be modified accordingly and the real volume will be set to 1.
  • MediaElementAmplifier#getGainValue()
    Returns how much gain is used for the audio of the instance’s media element.
  • MediaElementAmplifier#setGainValue(value)
    Sets the gain used for the audio of the instance’s media element.
  • MediaElementAmplifier#getDecibels()
    Returns how many decibels the audio of the instance’s media element will be playing at.
  • MediaElementAmplifier#setDecibels()
    Sets how many decibels the audio of the instance’s media element will be playing at.
  • MediaElementAmplifier#getLoudness()
    Returns a number indicating how loud the audio of the instance’s media element is playing compared to normal. 1 is normal.
  • MediaElementAmplifier#setLoudness()
    Sets a value indicating how loud the audio of the instance’s media element will be playing.

How To Use It

Here is an example of how this can be used in the wild:

In addition to what is done in this simple example you can use the other instance functions to get and set the different values associated with the gain value and the volume.

Reference Material

I was able to come up with this solution thanks to the following page:

Happy coding! 😎

JavaScript Snippet – getClass()

If you have been using JavaScript for a little bit you probably already know how to determine a variable’s class constructor, but just in case you are overthinking it here is a hint: variable.constructor. 🙂 Of course, many times I like to make functions that will spit my results for me so here is one that will take any variable and spit out its class constructor:

OK, yeah I know that JavaScript doesn’t really have classes but prototypes but most people think of them as classes so that is why this is called getClass(). The one thing you will notice is that if null or undefined is passed into the function, the same value will be passed back since those are the only two things in JavaScript that don’t have corresponding prototypes. Have fun! 😎

JavaScript Snippet – String.prototype.after()

Extending native prototypes is frowned upon by many JS engineers but can be helpful as long as the extensions are properly documented in the codebase.

Yesterday I added a post about String.prototype.before(...). As is explained within the post, this function can be used to easily extract a substring before a given target. Of course, if you can get what comes before a target you should be able to get what comes after a target too, right? Here is a function that makes that possible:

As indicated in the comments, this function can take a target (string or regular expression) to key off of to extract the desired substring. It also takes an optional second argument used for indicating the occurrence of the target to key off of. For instance, if you wanted to get the string that comes after the second comma in "Uno, dos, tres, cuatro, y cinco" you could use the following code:

var str = "Uno, dos, tres, cuatro, y cinco";
var afterFirstTwo = str.after(',', 2);

Here are some other examples that I used to test this function:

As usual, feel free to use this function in your own projects. Have fun! 😎