Create RxJS Observable from getUserMedia, createMediaStreamSource and analyserNode (Only Chrome)

rxjsFromStreamsource.js

import { Observable, of } from 'rxjs'
import { skipWhile } from 'rxjs/operators

// ...
navigator.getUserMedia({
  "audio": true
}, (stream) => {
  const buf = new Float32Array(1024)
  const mediaStreamSource = window.audioContext.createMediaStreamSource(stream)
  const analyser = window.audioContext.createAnalyser()

  mediaStreamSource.connect(this.analyser)
  const observable$ = Observable.create(observer => {
    const updatePitch = () => {
      this.analyser.getFloatTimeDomainData(buf)
      observer.next(buf)

      window.requestAnimationFrame(updatePitch)
    }

    updatePitch()
  })

  observable$.subscribe({ next: (buf) => console.log(buf) }) 
})