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

ES6 – Convert To Integer

There are various ways to convert a string or a floating point number to an integer in JavaScript, but not all of them may suit your needs. In this post we will examine four different ways and then we will see which is the best in all cases.

Solution #1: ~~x

If we are dealing with smaller number then we can leverage bit-wise operators such as bit-wise negation (~). The reason we can only use this solution for smaller numbers is because bit-wise operations can only be executed on a number in the range of -(231) to 231 - 1. If the number is outside of that range it will be converted to a number within that range (eg. -2147483649 becomes 2147483647 and 2147483648 becomes -2147483648).

Solution #2: parseInt(x, 10)

There is actually a function that will convert strings into numbers called parseInt(). We can use this function and specify the base to ensure that numbers starting with 0 will not be parsed as octals (eg. parseInt('010') produces 8 in older versions of ECMAScript).

Solution #3: +parseFloat(x, 10).toFixed(0)

We can also use the equivalent function to parseInt() for floats which is parseFloat(). After that we can use Number.prototype.toFixed() to make the number a string representation of the truncated number. Finally we can prefix this expression with a plus sign (+) to convert the string to a number again.

Solution #4: Math.trunc(x)

We can use the newer Math.trunc() function which should in theory just do what we want 😆 .

Results

Below are the results of using your browser to test out each solution:

    Conclusion

    If you have looked through the results above on a modern browser (one implementing Math.trunc()) you’ll notice that for all of our test cases, it is the only solution that works for them all. Therefore, if you are looking to convert floating-point numbers to integers or strings to integers, the most convenient and straightforward way may in fact be ES6’s new Math.trunc() function. Let me know what you think and as always, happy coding! 😎