Web RTC 流的音频电平表

Question

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

目前无法将 WebRTC 流传递到 Web 音频分析器。（虽然这可能很快就会改变......）（参见 Web Audio API analyser node getByteFrequencyData returning blank array）

目前是否有其他方法可以从远程媒体流中获取分贝信息？

Answer 1

Chrome 50 已发布：截至 2016 年 4 月 13 日，使用带有 MediaStreamAudioSourceNode 的分析器节点可以很好地获取音频电平。生成的 audioLevels 值可以动画化或简单地传递到 html meter 元素中。

var _mediaStream    = SOME_LOCAL_OR_RTP_MEDIASTREAM;
var _audioContext   = new AudioContext();
var _audioAnalyser  = [];
var _freqs          = [];
var audioLevels     = [0];

var _audioSource          = _audioContext.createMediaStreamSource(_mediaStream);
var _audioGain1           = _audioContext.createGain();
var _audioChannelSplitter = _audioContext.createChannelSplitter(_audioSource.channelCount);

_audioSource.connect(_audioGain1);
_audioGain1.connect(_audioChannelSplitter);
_audioGain1.connect(_audioContext.destination);

for (let i = 0; i < _audioSource.channelCount; i++) {
    _audioAnalyser[i]                       = _audioContext.createAnalyser();
    _audioAnalyser[i].minDecibels           = -100;
    _audioAnalyser[i].maxDecibels           = 0;
    _audioAnalyser[i].smoothingTimeConstant = 0.8;
    _audioAnalyser[i].fftSize               = 32;
    _freqs[i]                               = new Uint8Array(_audioAnalyser[i].frequencyBinCount);

    _audioChannelSplitter.connect(_audioAnalyser[i], i, 0);
}

function calculateAudioLevels()  {
    setTimeout(() => {
        for (let channelI = 0; channelI < _audioAnalyser.length; channelI++) {
            _audioAnalyser[channelI].getByteFrequencyData(_freqs[channelI]);
            let value = 0;
            for (let freqBinI = 0; freqBinI < _audioAnalyser[channelI].frequencyBinCount; freqBinI++) {
                value = Math.max(value, _freqs[channelI][freqBinI]);
            }
            audioLevels[channelI] = value / 256;
        }
        requestAnimationFrame(calculateAudioLevels.bind(this));
    }, 1000 / 15); // Max 15fps — not more needed
}

Answer 2

这是一个很好的例子：

https://webrtc.github.io/samples/src/content/getusermedia/volume/

这是源代码：

https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/volume

这是一个示例：

function recordAudio() {
    try {
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        window.audioContext = new AudioContext();

        const instantMeter = document.querySelector('#sound-meter');
        const constraints = {'video': false, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        window.stream = stream;
        const soundMeter = window.soundMeter = new SoundMeter(window.audioContext);
        soundMeter.connectToSource(stream, function(e) {
            if (e) {
                  alert(e);
                  return;
                }
                setInterval(() => {
                  instantMeter.value = soundMeter.instant.toFixed(2);
                }, 200);
            });
              
            $('#sound-meter').show(); 
            $('#audio-icon').hide()
    } catch(error) {
        console.error('Error recording audio.', error);
    }
}

Web RTC 流的音频电平表

Audio Level Meter for Web RTC Stream

google-chrome

mediastreamsource

webrtc

web-audio-api