Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VideoJS HTML5 Video JS How to boost volume above maximum?

Its possible there's no solution to this but I thought I'd inquire anyway. Sometimes a video is really quiet and if I turn the volume of my computer up accordingly then other sounds I have become way too loud as a result. It would be nice to be able to boost the volume above maximum.

I did a search on google which literally turned up nothing at all, not even results related to videojs at all in fact. Some videos my Mac is almost at max volume to hear the video's speech well so it would not be feasible to start with everything at a lower volume and adjust accordingly.

I tried with:

   var video = document.getElementById("Video1");
   video.volume = 1.0;

And setting it to anything above 1.0 but the video then fails to open at all:

   var video = document.getElementById("Video1");
   video.volume = 1.4;  /// 2.0 etc
like image 690
Hasen Avatar asked Oct 15 '25 23:10

Hasen


1 Answers

Based on: http://cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/

You can adjust the gain by using the Web Audio API:

function amplifyMedia(mediaElem, multiplier) {
  var context = new(window.AudioContext || window.webkitAudioContext),
    result = {
      context: context,
      source: context.createMediaElementSource(mediaElem),
      gain: context.createGain(),
      media: mediaElem,
      amplify: function(multiplier) {
        result.gain.gain.value = multiplier;
      },
      getAmpLevel: function() {
        return result.gain.gain.value;
      }
    };
  result.source.connect(result.gain);
  result.gain.connect(context.destination);
  result.amplify(multiplier);
  return result;
}

amplifyMedia(document.getElementById('myVideo'), 1.4);

The multiplier you pass to the function is at same level as the video volume, 1 being the 100% volume, but in this case you can pass a higher number.


Can't post any working demo or JSFiddle because Web Audio API requires a source from the same origin (or CORS compatible). You can see the error in the console: https://jsfiddle.net/yuriy636/41vrx1z7/1/

MediaElementAudioSource outputs zeroes due to CORS access restrictions

But I have tested locally and it works as intended.

like image 85
yuriy636 Avatar answered Oct 18 '25 17:10

yuriy636