问如何在反应中使用audioWorklet.addModule？

EN

import AudioNode from './workletNode'


export default class Recorder {
  constructor(context) {

    this.context = context
    this.recording = false

    console.log(context)

    context.audioWorklet.addModule('processor.js')
      .then(() => {
        console.log('added worklet module')

        navigator.mediaDevices.getUserMedia({audio: true, video: false})
          .then(stream => {
            console.log('Have stream')
            let microphone = context.createMediaStreamSource(stream)
            let wavEncoder = new AudioNode(context)

            microphone.connect(wavEncoder).connect(context.destination)
          })
      })
      .catch((e) => {
        alert('Error getting audio')
        console.log(e)
      })
  }


  record() {
    console.log('Start recorder')
    this.recording = true
  }

  stop() {
    console.log('Stop recorder')
    this.recording = false
  }
}

let wavEncoder = new AudioNode(context)

import React from 'react'
import {connect} from 'react-redux'
import {Button} from 'semantic-ui-react'
import {injectIntl} from 'react-intl'
import Recorder from './recorder'

class SpeechToTextAudioWorklet extends React.Component {

  componentDidMount() {
    this.context = null
    this.recorder = null
  }

  startRecorder() {
    if (!this.context) {
      this.context = new window.AudioContext()
      this.recorder = new Recorder(this.context)
    } else {
      this.context.resume()
    }

    this.recorder && this.recorder.record()
  }

  stopRecorder() {
    this.recorder && this.recorder.stop()
  }

  render() {

    return (<div>Speech to text

      <Button id="start" onClick={() => {
        this.startRecorder()
      }}>Record</Button>
      <Button id="stop" onClick={() => {
        this.stopRecorder()
      }}>Stop</Button>
      <div id="recordingslist"></div>
    </div>)
  }
}

const mapStateToProps = () => {
  return {}
}

export default connect(
  mapStateToProps
)(injectIntl(SpeechToTextAudioWorklet))