Web中video或者audio音量突破最大值的解决方案及思路

背景：最近手上的项目因为需要播放实时视频，但是从设备上拿取的视频资源音量那是相当的小，电脑音量拉满依然听着很小，所以就有了一个需求，让视频声音放大，类似于优酷这些网站200%的声音。

一开始也在找可以将音量的限制从0~1放大到0~2的方法，但是找了圈也没找到，后面想了下，如果没法将限制放开，是否可以让1%发挥出2%的音量呢呢，基于这个想法，找了一圈找到下面的方法（注释均为个人基于webAudioContext文档理解而来）。

// 加载flv视频
const loadFlvVideo = () => {
    nextTick(() => {
        if (!flvjs.isSupported()) {
            return false;
        }
        if (props.videoInfo.length > 0 && monitorVideo.value !== void 0) {
            let end =
                curLayout.value.num < props.videoInfo.length
                    ? curLayout.value.num
                    : props.videoInfo.length;
            let videos = props.videoInfo.slice(0, end);
            flvPlayers.value = videos.map((item, idx) => {
                //对每个视频容器设置音量放大
                amplifyMedia(monitorVideo.value[idx], 2)
                return createFlvjs(
                    item.url || "",
                    monitorVideo.value[idx] as HTMLMediaElement
                );
            });
        }
    });
};
// 设置音量超限
const amplifyMedia = (mediaElem:HTMLMediaElement, multiplier:number) => {
    // 创建音频处理对象AudioContext与webkitAudioContext无区别，只是在不同浏览器的命名
    let context = new (window.AudioContext || window.webkitAudioContext)();
    // 创建音频接口输入到mediaElem，则可以通过elSource可以修改其音频
    let elSource = context.createMediaElementSource(mediaElem) 
    // 创建GainNode(音量处理模块)
    let gainNode = context.createGain() 
    // 将音量处理模块与mediaElem绑定
    elSource.connect(gainNode); 
    // AudioDestinationNode接口表示音频图形的最终输出地址，此处为绑定到对应的扬声器
    gainNode.connect(context.destination);
    //GainNode的gain实例属性表示增益效果，可以理解为音量放大比例
    gainNode.gain.value = multiplier 
}

原方法：https://cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/

webAudioContext：https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext