Как увеличить громкость видео больше чем на 100%?

Question

Как увеличить громкость видео больше чем на 100%?

Рейтинг: 0Ответов: 2Опубликовано: 19.01.2023

Замысел в том чтобы для видео на Youtube делать до 200% громкости с помощью input type="range". Я понимаю что если сделать volume = 2; то будет ошибка. Может есть способ увеличить не громкость видео, а громкость браузера, Web Audio API или тому подобного?

document.querySelector('.volume_control_slider').addEventListener('input', function(){
    if(document.querySelector('video') !== null){
        document.querySelector('video').volume = this.value;
    }
})

<input type="range" value="1" min="0" max="2" step="0.02" class="volume_control_slider">

javascript jquery

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

На основе ответа @EzioMercer.. Range max здесь выставлен на 50.. Не знаю с чем это связано, у меня в сниппете видео не воспроизводится, или раз из 10-20 запусков после обновления страницы. Если нажать править затем редактировать пример кода тогда всё работает..

Не работало из-за cors policy

Ключевой момент: если AudioContext создается до того, как документ получит жест пользователя, он будет создан в состоянии «приостановлено»

По клику на кнопку Play документ получит жест пользователя.

const init = () => {

  let video = document.querySelector('video');

  video.setAttribute('controls', "");
  video.currentTime = 100;
  video.play();
  document.querySelector('.volume_control_slider').addEventListener('input', updatePage)

  const audioCtx = new AudioContext();

  const source = audioCtx.createMediaElementSource(video);

  const gainNode = audioCtx.createGain();

  function updatePage() {
    gainNode.gain.value = this.value;
    document.querySelector('#outVolume').innerHTML = "volume: " + this.value;
  }

  source.connect(gainNode);
  gainNode.connect(audioCtx.destination);
}

body {
  display: flex;
}
#control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
#outVolume {
  width: 100px;
  height: 30px;
  box-shadow: inset 0px 0px 3px black;
  margin: 0px 30px 0px 30px;
  line-height: 30px;
  padding-left: 5px;
}

<div id="control">
  <input type="range" value="1" min="0" max="50" step="0.02" class="volume_control_slider">
  <div id="outVolume">volume: 1</div>
  <input type="button" value="Play">
</div>

<video width="280" height="180" crossorigin="anonymous">
  <source  src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4">
</video>

Как увеличить громкость в youtube, можно создать сниппет.. Открыть DevTools ctrl+shift+J или f12 перейти во вкладку Sources найти в левой колонке Snippets создать новый + New snippet вставить код приведенный ниже, сохранить ctrl+s и запустить ctrl + Enter или нажав ▶ находится внизу.. Код вставляет в нижний левый угол "ползунок", которым можно регулировать громкость в видео. Закрыть DevTools youtube тормозит когда открыты инструменты разработчика.

(function(){
  let video = document.querySelector('video');
  let input = document.createElement('input');

  input.setAttribute('type', 'range');
  input.setAttribute('value', '1');
  input.setAttribute('max', '50');
  input.setAttribute('step', '0.02');

  input.style.position = 'absolute';
  input.style.bottom = '0';
  input.style.left = '20px';

  input.addEventListener('input', function () {
    gainNode.gain.value = this.value;        
  });

  document.body.append(input)

  const audioCtx = new AudioContext();

  const source = audioCtx.createMediaElementSource(video);

  const gainNode = audioCtx.createGain();    

  source.connect(gainNode);
  gainNode.connect(audioCtx.destination);
})();

Answer 2

▲ 0

Перевод ответа с английского SO

Громкость видео — это процент от 0 до 1, он не может превышать 100%

Единственный способ, которым вы потенциально могли бы это сделать — это направить звук из видеоплеера в API веб-аудио и усилить его там

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource

// создайте аудиоконтекст и подключите элемент видео в качестве источника
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source = audioCtx.createMediaElementSource(myVideoElement);

// создать узел усиления
var gainNode = audioCtx.createGain();
gainNode.gain.value = 2; // удвоить громкость
source.connect(gainNode);

// подключить узел усиления к выходному
gainNode.connect(audioCtx.destination);

Вы можете взять этот звуковой контекст из видео и запустить его через узел усиления, чтобы увеличить громкость звука или применить звуковые эффекты, такие как реверберация. Будьте осторожны, чтобы не увеличить усиление на узле усиления слишком сильно, иначе звук, который уже был обработан, начнет клиппироваться

Наконец, вам нужно подключить узел усиления к аудиоприемнику, чтобы он мог выводить новый звук

Как увеличить громкость видео больше чем на 100%?

Ответы