蘑菇影视官网声音忽大忽小时横竖屏设置2个关键点（少一个都不顺）

蘑菇视频712026-01-24 00:29:49

蘑菇影视官网在横屏/竖屏切换时出现声音忽大忽小的问题，常见原因并不是“浏览器坏了”，而是两个关键设置不到位：一是音频的统一处理链没有搭好，二是横竖屏切换时媒体元素或播放状态被重建或走了不同逻辑。少一个都可能导致音量突变、延迟或静音。下面给出可直接上站的实战方案，包含原理、代码示例和移动端注意事项，按步骤做就能基本消灭那种让人抓狂的音量波动。

一、核心结论（先看这两点）

保持单一的音频处理链：用 Web Audio API 把视频/音频元素接入同一个 AudioContext，通过 GainNode（手动音量）和 DynamicsCompressorNode（平滑峰值）来稳定输出。
横竖屏切换不销毁媒体元素：切换显示方式用样式或全屏 API，而不是替换或重建

二、为什么会发生忽大忽小

页面为了处理“全屏播放”或“竖屏时内联，横屏时用原生播放器”而创建了不同的播放路径，导致音频链被重建，默认音量/路由发生变化。
浏览器或系统在切换显示模式时会触发原生播放器、音轨重采样或策略（尤其是 iOS），如果没有统一增益/压限处理，就会听到突变。
自动播放策略、muted/playsinline 属性不当会让浏览器在某些模式下静音或重启播放。

三、关键点一：用 Web Audio 建立统一音频处理链目标：所有播放器都接入同一条“音频管线”，由你控制增益与动态范围。

步骤： 1) 在页面初始化时创建一个全局 AudioContext（避免在每次切换时重新创建）。 2) 把（或）元素通过 createMediaElementSource 接入。 3) 插入 GainNode（用于精确控制音量）和 DynamicsCompressorNode（用于抑制突发峰值），最后 connect 到 destination。 4) 通过 JS 接口统一调整音量，而不是依赖 element.volume，保证在任何 UI 或显示模式切换后音量一致。

示例代码（简化，可直接用）： var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var video = document.getElementById('player'); // 全站共用的 video 元素 var source = audioCtx.createMediaElementSource(video); var gainNode = audioCtx.createGain(); gainNode.gain.value = 0.9; // 默认音量（0~1） var compressor = audioCtx.createDynamicsCompressor(); compressor.threshold.value = -10; compressor.knee.value = 20; compressor.ratio.value = 4; compressor.attack.value = 0.003; compressor.release.value = 0.25; source.connect(gainNode); gainNode.connect(compressor); compressor.connect(audioCtx.destination);

要点提示：

AudioContext 只创建一次，并在用户交互后 resume（某些浏览器需要用户操作才能激活）。
使用 gainNode 控制界面上的音量滑块，而不是直接改 video.volume，确保所有输出都经过同一增益。
DynamicsCompressor 能有效抑制瞬时峰值，减少“忽然变大”的感受。

四、关键点二：横竖屏切换时保持同一媒体元素和平滑切换逻辑目标：横竖屏只是改变显示方式，不改变音频链路与播放实例。

做法： 1) 不要在切换时销毁或替换 video 元素。若需要不同布局，使用 CSS（transform/width/height/flex）切换类名，让同一个元素重排。 2) 如果必须进入全屏，优先用 requestFullscreen 而不是移除再插入元素；在进入/退出全屏前后不重新创建 AudioContext 或 createMediaElementSource。 3) 在 orientationchange 事件里仅处理 UI 布局与视频尺寸，避免重新加载 src、重新设置 autoplay 或重新 attach 源。 4) 如果因业务必须更换元素（特殊场景下），实现无缝切换：先把播放时间 currentTime 保存、暂停、把时间赋给新元素并恢复播放，且重新 attach 到同一个 AudioContext 而不是新建一个。

示例：处理横竖屏（伪代码） window.addEventListener('orientationchange', function() { // 只改变布局类，不替换节点 document.body.classList.toggle('landscape', window.innerWidth > window.innerHeight); // 不要在这里重新创建音频上下文或 video 元素 });

若必须替换元素： var oldVideo = document.getElementById('player'); var t = oldVideo.currentTime; oldVideo.pause(); // 创建新元素 newVideo 后： newVideo.currentTime = t; newVideo.volume = 1; // 交由 gainNode 控制为佳 // attach 到已存在的 AudioContext： var newSource = audioCtx.createMediaElementSource(newVideo); newSource.connect(gainNode); // 相比直接替换，这里要小心解绑旧 source，否则可能引发内存泄露

五、移动端额外注意（iOS / Android）

iOS Safari：如果切换到原生全屏播放器，可能会改变音轨处理。避免自动触发原生全屏播放（例如加 playsinline 和 webkit-playsinline）：

自动播放策略：非静音自动播放在许多移动浏览器被阻止。建议用户交互触发音频上下文 resume： document.addEventListener('click', () => { audioCtx.resume(); });
全屏与原生播放器：使用 CSS “模拟”全屏（fixed + transform）替代原生全屏可避免浏览器替换播放路径。
Android：多数现代 Chrome 表现稳定，但仍要避免频繁重建元素和上下文。

六、排查清单（发布前逐项确认）

页面只创建一个 AudioContext 并在首次用户交互后 resume。
所有播放路径都走同一个音频管线（createMediaElementSource -> gain -> compressor -> destination）。
横竖屏切换不替换 video 元素，或替换时做了 currentTime 保存与无缝 attach。
为移动端加上 playsinline、webkit-playsinline，处理好 autoplay/muted 策略。
测试机型：iOS Safari、Android Chrome、桌面 Chrome/Firefox。在横屏、竖屏、进入/退出全屏、锁屏/解锁等场景下测试音量一致性。
如果仍有突变，记录具体步骤（哪个机型/操作导致）以便定位是重建、浏览器策略还是音轨本身问题。

七、进阶：自动响度归一（可选）如果内容本身音量差异大，需要“自动归一化”：