Как использовать audioWorklet.addModule в React?

Question

Я начал пытаться создать аудио-рекордер для использования в React с использованием Web Audio API

Вот код для моего класса Recorder

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
  }
}

У меня проблема с этой строкой: context.audioWorklet.addModule('processor.js')

файл processor.js не добавляется.

и затем возникает ошибка, когда он попадает в эту строку:

let wavEncoder = new AudioNode(context)

Ошибка:

Необработанное отклонение (TypeError): __WEBPACK_IMPORTED_MODULE_0__workletNode___default.a не является конструктором

Я попробовал тот же код за пределами реагировать, и это нормально. Так что это как-то связано с использованием audioWorklet.addModule внутри реагируют.

Кто-нибудь может помочь?

Это компонент реагирования, который вызывает рекордер:

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

Answer 1

Попробуйте сделать worklet каталог внутри public переместите туда папку AudioWorkletProcesser и измените код, чтобы он отражал новый путь: context.audioWorklet.addModule('worklet/processor.js'),