Kagami / vmsg

:musical_note: Library for creating voice messages
https://kagami.github.io/vmsg/
Creative Commons Zero v1.0 Universal
348 stars 58 forks source link

Possible to get levels? #31

Closed bknill closed 5 years ago

bknill commented 5 years ago

Hi,

I'm trying to get the microphone levels to show in the UI while this is recording.

navigator.mediaDevices.getUserMedia({ audio: true })

isn't receiving the stream while VMSG is running, I assume because VMSG is using the microphone, is it possible to get the steam levels using this?

pmz commented 5 years ago

@bknill hey! Did you find a way to achieve this?

bknill commented 5 years ago

Yes I did.

Here is the function I ended up using,

I put the recorder steam into a global variable (window.recorder.stream)

function microphoneVolume(callback) {

  if(!window.recorder.stream)
    return 

  var audioContext = new AudioContext()
  var analyser = audioContext.createAnalyser()
  var microphone = audioContext.createMediaStreamSource(window.recorder.stream)
  var javascriptNode = audioContext.createScriptProcessor(2048, 1, 1)

  analyser.smoothingTimeConstant = 0.8
  analyser.fftSize = 1024

  microphone.connect(analyser)
  analyser.connect(javascriptNode)
  javascriptNode.connect(audioContext.destination)

  javascriptNode.onaudioprocess = function() {
    var array = new Uint8Array(analyser.frequencyBinCount)
    analyser.getByteFrequencyData(array)
    var values = 0

    var length = array.length
    for (var i = 0; i < length; i++) {
      values += (array[i])
    }

    var average = values / length

    if(callback)
      callback(Math.round(average))
  }

  return audioContext

}
ndkv commented 5 years ago

Thz @bknill for sharing your solution, it works out-of-the-box for us.

I noticed, however, that createScriptProcessor() is deprecated, see https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode and that an AudioWorkletNode should be used.

Are you planning to adopt the latter? Have you had any problems with createScriptProcessor() in the wild?

bknill commented 5 years ago

Not that I've noticed. If you fix it please let me see the code.