[javascript] JS增强HTML媒体资源的音量

pre

有些页面声音总是太小，又不想调整系统音量，而video标签的volume属性最高只能调到1。于是在网上找到了一个方案：

ref: https://atjiu.github.io/2021/05/10/video-above-1.0/
ref: https://cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/

code

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

usage

上面代码经过略微修改。实践中先找到目标<audio> / <video>标签，然后将其作为amplifyMedia的第一个参数，而音量放大倍数作为其第二个参数传入，在控制台执行即可，例如：amplifyMedia(elem, 6)