Web RTC流的音频电平表 [英] Audio Level Meter for Web RTC Stream

问题描述

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

I would like to create a decibel meter for the audio that is playing in a video element. The video element is playing a WebRTC stream.

目前，WebRTC流无法传递到Web音频分析器中. (尽管这可能很快就会改变...)(请参阅 Web音频API分析器节点getByteFrequencyData返回空白数组)

At the moment WebRTC streams cannot be passed into a Web Audio Analyzer. (Although this might change soon … ) (see Web Audio API analyser node getByteFrequencyData returning blank array)

当前是否存在另一种从远程媒体流获取分贝信息的方法?

Is there currently another way to get decibel information from a remote mediastream?

推荐答案

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

Chrome 50 was released: As of the 13th of April 2016 using an Analyser Node with a MediaStreamAudioSourceNode works fine to get audio levels. The resulting audioLevels value can be animated or simply passed into a html meter element.

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);

var _audioSource.connect(_audioGain1);
var _audioGain1.connect(_audioChannelSplitter);
var _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
}

这篇关于Web RTC流的音频电平表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！