Не раз в последнее время мне приходилось создавать какой-то компонент микрофона React, который записывает звук в браузере, а затем вы делаете все, что захотите, с полученным там звуковым блоком ( храните его, преобразуйте, используйте с библиотекой транскрипции и т. д.).

Компоненты микрофонов React, имеющиеся в наличии,… не обслуживаются. Я вообще на этом оставлю. Они не обязательно плохие, но некоторые из репозиториев ведут к спаму, некоторые полны неработающих ссылок, и большинство из них, которые мне удалось найти, не обновлялись более нескольких лет.

Если хочешь, чтобы что-то было сделано, ты должен сделать это сам

Я решил сделать один из этих компонентов с нуля!

Вот ссылка на 125-строчный текст, если вы просто хотите использовать его и не читать остальную часть этого сообщения в блоге. Такой нетерпеливый. Но я понимаю. Жизнь сложна.

В любом случае.

При работе с микрофонами обычно приходится учитывать множество вещей. Я не вдавался в подробности совместимости браузеров с этим (я уверен, что… Opera или что-то в этом роде, вероятно, столкнутся с проблемами), но есть есть несколько хороших встроенных функций современного браузера, которые здесь ты сможешь далеко зайти:

• navigator.mediaDevices: позволяет получить доступ к микрофону пользователя (или камере, если вы этого хотите)
• getUserMedia: позволяет получить разрешения пользователя для вышеупомянутых мультимедийных устройств и создать медиапоток.
• MediaRecorder: позволяет записывать что-либо

Все это в сочетании с некоторыми переменными состояния React для отслеживания каждого из них, useEffect для выполнения действий на стороне браузера, а затем собственным тегом

Конечно, легче сказать, чем сделать, поэтому я изложил все это в виде, который можно скопировать и вставить. Помимо базовой функциональности, я также создал переменную для максимального времени записи (она вам не нужна, но если вы хотите что-то расшифровать или загрузить, я считаю, что ограничения хороши) и несколько небольших стилей Tailwind, чтобы показать некоторые анимация вокруг кнопки.

Использовать компонент. Запишите свои мечты.