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

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 
} 

Answer 2

あなたが望むものを達成するための唯一の方法はJavaScriptです。