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! 😎

HTML5 – Getting More Volume from the Web Audio API

Did you know that thanks to the Web Audio API it is possible to boost the volume up PAST 100% on <audio> tags & <video> tags? I wrote the following function to do just that:

The above JavaScript function gives us the ability to amplify (or boost) the volume of a media element well above the normal maximum of 100%. By simply specifying a reference to the element and a multiplier for the volume we can increase or decrease the maximum volume of audio and video tags. Here is an example page’s code using the function:

Parameters

The above function takes two parameters:

  1. mediaElem
    Either an <audio> tag or a <video> tag for which the volume will be amplified or boosted.
  2. multiplier
    A number which will basically represent by how much the volume will be multiplied. Passing in 1 will simply keep the volume at a normal level. Passing in a number greater than 1 will make the volume be greater than normal and passing in a number less than 1 will make the volume be less than normal.

Return

The function will return an object containing all of the following:

  • context
    An instance of AudioContext which was used to change the media’s volume.
  • source
    A media source created from the AudioContext instance and the mediaElem. This may be useful if you desire to do more with the web audio API regarding this media. NOTE: Only one source node can be created from an element.
  • gain
    A media gain created from the AudioContext instance and the mediaElem. This may be useful if you desire to do more with the web audio API regarding this media.
  • media
    A reference to the mediaElem passed into the function.
  • amplify
    A function which accepts one parameter indicating a new multiplier (amplification level).
  • getAmpLevel
    A function which returns the multiplier (amplification level).

Final Notes

You can only execute this function on any given media element once. Any subsequent attempts will throw an error due to the fact that only one source node can correspond to a media element.

Feel free to use the code and modify the code as you please. I originally got the idea for this code from the following two pages:

Happy coding! 😎

JavaScript Snippet – Get Video Frame As An Image

Lately I have dedicated a little more time to developing an electron app which saves a frame of every video it encounters as PNG images:

JW Videos with images captured via a video element and a canvas element.
JW Videos with images captured via a video element and a canvas element.

Believe it or not the code to turn a frame of a video into an image element is not terribly complicated. Below is a simple function that can be used to get the an image element corresponding to a specific frame in a video:

This getVideoImage() function takes three arguments:

  1. path {string}:
    The path to the video. In the case that you are using this code in a web page this must be a video within the same domain.
  2. secs {number | function(duration): number}:
    If this is a non-negative number this will indicate the time of the frame to capture in seconds. If this is a negative number this will indicate the time of the frame from the end of the video to capture in seconds. If this is a function it will be passed the duration as a number and the return value should be a number (positive or negative) which indicates the time of the frame that should be captured.
  3. callback {function(img, currentTime, event)}:
    The function which is called either after loading the frame’s image successfully or after getting an error. The first argument passed will be the Image object that is created (if no error occurred). The second argument passed will be the actual time in seconds used to pull the frame’s image (if no error occurred).
    The third argument will either be a seeked event or an error event.

This function can be used as is or can be modified. It is important to note that unless the video is in the exact same domain as the web page this code will NOT work due to the canvas being tainted. You can paste the following code into the code editor on this W3Schools sandbox page to see an example of getting multiple frames:

Let me know if you have any questions or suggestions and as usual, enjoy the free code! 😎