製作一個簡單的 React 麥克風組件

最近我不止一次不得不製作某種React 麥克風組件來在瀏覽器中記錄音頻，然後你可以對你得到的音頻blob 做任何你想做的事情（存儲它、轉換它、將它與轉錄庫一起使用等等）。

React 麥克風的可用元件…沒有維護。我一般都會這樣。它們不一定是壞的，但有些存儲庫會導致垃圾郵件，有些存儲庫充滿了損壞的鏈接，而且我能找到的大多數存儲庫已經有幾年沒有更新了。

如果你想完成某件事，你必須自己做

我決定從頭開始製作其中一個組件！

如果您只想使用它而不必閱讀本部落格文章的其餘部分，這裡有一個指向 125 行要點的連結。這麼不耐煩。但我明白。生活充滿挑戰。

無論如何。

使用麥克風時通常需要考慮很多事情。我沒有深入研究瀏覽器與這個的兼容性（我確信……Opera 或其他東西可能會遇到問題），但是有一些很好的內置現代瀏覽器功能，可以讓你走得更遠，在這裡：

• navigator.mediaDevices：這可以讓您存取使用者的麥克風（或攝影機，如果您需要的話）
• getUserMedia：這可以讓您獲得上述媒體設備的使用者許可，並產生媒體串流。
• MediaRecorder：這可以讓你實際錄東西

所有這些都與一些用於追蹤它們的 React 狀態變數、用於執行瀏覽器端操作的 useEffect 以及本機

當然，說起來容易做起來難，所以這就是為什麼我把這一切都放在可複製和貼上的要點中。除了基本功能之外，我還為最大錄製時間設定了一個變數（您不需要它，但如果您想轉錄某些內容或上傳某些內容，我認為限制很好），以及一些小的Tailwind 樣式來顯示一些內容按鈕周圍的動畫。

使用該組件。記錄你的夢想。

以上是製作一個簡單的 React 麥克風組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！