何种场景下静音<audio>元素会影响其srcObject连接的节点?
我意识到标题可能有点令人困惑,所以先说明一下背景。
我正在开发一款对Google Meet做音频处理的扩展程序,研究其行为的过程中发现了一个无法理解的怪异问题。
Google Meet似乎使用三个<audio>元素播放音频,每个元素都有独立的MediaStream。经过测试发现:
- 静音
<audio>元素会导致Google Meet的发言者音频可视化功能失效。 - 互换两个音频元素的
.srcObject属性后调用.play(),不会影响Google Meet的音频可视化效果。
上述现象说明Google Meet是直接将源MediaStream接入自身音频处理图生成可视化效果,而非捕获<audio>元素输出,因为互换MediaStream不会影响可视化结果。
但我观察到的另一个现象却和上述结论矛盾:
- 从
<audio>元素的.srcObject新建MediaStreamAudioSourceNode并连接到AnalyserNode后测试发现,即便静音<audio>元素,依然可以分析该MediaStream中播放的音频。
以下是在浏览器控制台运行的示例代码和输出:
ac = new AudioContext(); an = ac.createAnalyser() sn = ac.createMediaStreamSource(document.querySelectorAll("audio")[0].srcObject) sn.connect(an) function analyse(aNode) { const ret = new Float32Array(aNode.frequencyBinCount); aNode.getFloatTimeDomainData(ret); return ret; } analyse(an) // > Float32Array(1024) [ 0.342987060546875, 0.36688232421875, 0.37115478515625, 0.362457275390625, 0.35150146484375, 0.3402099609375, 0.321075439453125, 0.308746337890625, 0.29779052734375, 0.272552490234375, … ] document.querySelectorAll("audio")[0].muted = true analyse(an) // > Float32Array(1024) [ -0.203582763671875, -0.258026123046875, -0.31134033203125, -0.34375, -0.372802734375, -0.396484375, -0.3919677734375, -0.36328125, -0.31689453125, -0.247650146484375, … ] // 此处我通过Google Meet界面静音了自己端的麦克风 analyse(an) // > Float32Array(1024) [ -0.000030517578125, 0, 0, -0.000030517578125, -0.000091552734375, -0.000091552734375, -0.000091552734375, -0.00006103515625, 0, 0.000030517578125, … ] // 此处的数值非常接近零
如你所见,音频元素被静音时,AnalyserNode仍可捕获音频,但Meet的可视化功能却失效了,这点我无法理解,为何会出现这种情况?
在不使用.captureStream()的前提下,为什么静音<audio>元素不会影响自定义连接的AnalyserNode,却会影响其他节点?
另外该问题仅出现在Chrome浏览器中,Firefox下即便静音音频元素,Meet的可视化功能也可正常运行。我认为这可能和Chrome已知问题有关:MediaStream需要正在播放的<audio>元素才能向音频图输出内容,但我不明白这为何会影响已静音的<audio>元素。
内容的提问来源于stack exchange,提问作者Louie Torres
相关产品推荐
相关产品推荐

