88908

Audio Level Meter for Web RTC Stream

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.

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?

Answer1:

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 }

Answer2:

In JavaScript that's the only way to achieve what you want.

Recommend

  • how to read a variable from a file to a Unix script in Unix
  • Blob fields in SAS gets truncated
  • webrtc: PCObserver#onAddStream is not invoked for call upgrade
  • Get a stream of bytes from navigator.mediaDevices.getUserMedia()?
  • How to save sound with Web Audio API and Tone.js in a browser
  • Media object doesn't respond to cookie containing object
  • multiple definition errors when using makefile
  • Memory leak with Timer
  • Lucene.Net 3.0.3 Spatial search
  • Escaping special characters in lucene and query using wildcard
  • PHP/mysql: how do I display records sorted by time and grouped by date?
  • PHP IntlDateFormatter wrong date/time conversion
  • Is it OK to write code after [super dealloc]?
  • iAd works in iPhone but not iPad
  • rselenium | get youtube page source
  • Gerrit will not push. Error: No common ancestry
  • jquery full calendar
  • Showing spinner for Rails 3 UJS gets Type error
  • Can my app be notified when another application starts/stops playing audio?
  • Why does the following throw an “Object doesn't support property or method 'importNode
  • Microsoft Excel Pivot miscalculation in Sum for positive and negative numbers
  • How do I Dispose a HttpResponseMessage in my Web Api Method?
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • Is playing sound in Javascript performance heavy?
  • How can the INSERT … ON CONFLICT (id) DO UPDATE… syntax be used with a sequence ID?
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • Rails Find when some params will be blank
  • Chrome doesn't support silverlight anymore? How to solve this?
  • SignalR .NET Client Invoke throws an exception
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • Azure Cloud Service Web Role web pages do not load
  • Date difference with leap year
  • Javascript convert timezone issue
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Benchmarking RAM performance - UWP and C#
  • Free memory of cv::Mat loaded using FileStorage API
  • C# - Getting references of reference
  • Angular 2 constructor injection vs direct access
  • coudnt use logback because of log4j
  • IndexOutOfRangeException on multidimensional array despite using GetLength check