Мобильная версияЯ пытаюсь создать компонент реагирования, который будет обрабатывать записи голосовых заметок. Я пробовал использовать подход vanilla js, но мне нужно удалить конструктор и повторно применить функции изнутри самого компонента.
А еще, как бы мне создать волновую визуализацию — голосовой заметки для воспроизведения, то есть это больше похоже на эту — с возможностью ее удаления и запуска заново.
https://codepen.io/winrey/pen/xvxrxR
https://codesandbox.io/s/blissful-haze-gzwthj текущая база кода
import React, { Component } из 'реагировать'; импортировать сетку из @mui/material/Grid; импортировать кнопку из @mui/material/Button; импортировать анализ из «html-react-parser»; импортировать './VoiceNote.scss'; класс VoiceNote расширяет компонент { //https://codepen.io/winrey/pen/xvxrxR оказывать() { /* класс VoiceRecorder { конструктор() { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { console.log("getUserMedia поддерживается") } еще { console.log("getUserMedia не поддерживается вашим браузером!") } this.mediaRecorder = "" this.stream = "" this.chunks = [] this.isRecording = ложь this.recorderRef = document.querySelector("#recorder") this.playerRef = document.querySelector("#player") this.startRef = document.querySelector("#start") this.stopRef = document.querySelector("#stop") this.startRef.onclick = this.startRecording.bind(this) this.stopRef.onclick = this.stopRecording.bind(this) this.constraints = { аудио: правда, видео: ложь } } handleSuccess (поток) { this.stream = поток this.stream.oninactive = () => { console.log("Трансляция завершена!") }; this.recorderRef.srcObject = this.stream this.mediaRecorder = новый MediaRecorder(this.stream) console.log(this.mediaRecorder) this.mediaRecorder.ondataavailable = this.onMediaRecorderDataAvailable.bind(this) this.mediaRecorder.onstop = this.onMediaRecorderStop.bind(это) this.recorderRef.play() это.mediaRecorder.start() } handleError (ошибка) { console.log("Ошибка navigator.getUserMedia: ", ошибка) } onMediaRecorderDataAvailable(e) { this.chunks.push(e.data) } onMediaRecorderStop (е) { const blob = новый Blob(this.chunks, { 'type': 'audio/ogg; codecs=opus' }) const audioURL = window.URL.createObjectURL(blob) this.playerRef.src = audioURL this.chunks = [] this.stream.getAudioTracks().forEach(track => track.stop()) this.stream = ноль } начать запись() { если (this.isRecording) вернуть this.isRecording = правда this.startRef.innerHTML = 'Запись...' this.playerRef.src = '' navigator.mediaDevices .getUserMedia(this.constraints) .then(this.handleSuccess.bind(this)) .catch(this.handleError.bind(это)) } стопрекординг() { если (!this.isRecording) вернуть this.isRecording = ложь this.startRef.innerHTML = 'Запись' this.recorderRef.pause() это.mediaRecorder.stop() } } window.voiceRecorder = новый VoiceRecorder() */ возвращаться ( Голосовая заметка Рекордер Запись Остановить запись Сохраненная запись ) } } экспортировать VoiceNote по умолчанию;