Web RTC 流的音频电平表

sqw*_*qwk 3 google-chrome mediastreamsource webrtc web-audio-api

我想为视频元素中播放的音频创建一个分贝计。视频元素正在播放 WebRTC 流。

\n\n

目前,WebRTC 流无法传递到 Web 音频分析器中。(尽管这可能很快就会改变 \xe2\x80\xa6\xc2\xa0)(请参阅Web Audio API 分析器节点 getByteFrequencyData 返回空白数组

\n\n

目前是否有另一种方法可以从远程媒体流获取分贝信息?

\n

sqw*_*qwk 6

Chrome 50 已发布:截至 2016 年 4 月 13 日,使用带有 MediaStreamAudioSourceNode 的分析器节点可以很好地获取音频级别。结果audioLevels值可以是动画的或简单地传递到 htmlmeter元素中。

\n
var _mediaStream    = SOME_LOCAL_OR_RTP_MEDIASTREAM;\nvar _audioContext   = new AudioContext();\nvar _audioAnalyser  = [];\nvar _freqs          = [];\nvar audioLevels     = [0];\n\nvar _audioSource          = _audioContext.createMediaStreamSource(_mediaStream);\nvar _audioGain1           = _audioContext.createGain();\nvar _audioChannelSplitter = _audioContext.createChannelSplitter(_audioSource.channelCount);\n\n_audioSource.connect(_audioGain1);\n_audioGain1.connect(_audioChannelSplitter);\n_audioGain1.connect(_audioContext.destination);\n\nfor (let i = 0; i < _audioSource.channelCount; i++) {\n    _audioAnalyser[i]                       = _audioContext.createAnalyser();\n    _audioAnalyser[i].minDecibels           = -100;\n    _audioAnalyser[i].maxDecibels           = 0;\n    _audioAnalyser[i].smoothingTimeConstant = 0.8;\n    _audioAnalyser[i].fftSize               = 32;\n    _freqs[i]                               = new Uint8Array(_audioAnalyser[i].frequencyBinCount);\n\n    _audioChannelSplitter.connect(_audioAnalyser[i], i, 0);\n}\n\nfunction calculateAudioLevels()  {\n    setTimeout(() => {\n        for (let channelI = 0; channelI < _audioAnalyser.length; channelI++) {\n            _audioAnalyser[channelI].getByteFrequencyData(_freqs[channelI]);\n            let value = 0;\n            for (let freqBinI = 0; freqBinI < _audioAnalyser[channelI].frequencyBinCount; freqBinI++) {\n                value = Math.max(value, _freqs[channelI][freqBinI]);\n            }\n            audioLevels[channelI] = value / 256;\n        }\n        requestAnimationFrame(calculateAudioLevels.bind(this));\n    }, 1000 / 15); // Max 15fps \xe2\x80\x94 not more needed\n}\n
Run Code Online (Sandbox Code Playgroud)\n

  • 这可行,但 Chrome(从版本 58 开始)仍然需要 HTML5 视频/音频元素(无论是否静音)作为远程 WebRTC 流的端点。如果没有这个,由 `createMediaStreamSource(stream)` 创建的 `MediaStreamAudioSourceNode` 将只会发出静音。请参阅:https://bugs.chromium.org/p/chromium/issues/detail?id=121673,其中显示:“需要一些非 WebAudio 渲染目标...... &lt;audio&gt;/&lt;video&gt; 标签. 原因是webrtc中的架构只支持单个目标拉取音频......” (2认同)