Membuat komponen mikrofon React yang mudah

Lebih daripada sekali kebelakangan ini saya terpaksa membuat sejenis komponen mikrofon React yang merakam audio dalam penyemak imbas, dan kemudian anda melakukan apa sahaja yang anda mahu dengan gumpalan audio yang anda dapat di sana ( simpannya, ubahnya, gunakannya dengan perpustakaan transkripsi, apa sahaja).

Komponen di luar sana di alam liar untuk mikrofon React… tidak diselenggara. Saya secara amnya akan membiarkannya begitu sahaja. Ia tidak semestinya buruk, tetapi beberapa repositori membawa kepada spam, sesetengahnya penuh dengan pautan yang rosak dan kebanyakannya yang saya dapati tidak dikemas kini dalam lebih daripada beberapa tahun.

Jika anda mahu sesuatu dilakukan, anda perlu melakukannya sendiri

Saya memutuskan untuk membuat salah satu daripada komponen ini dari awal!

Berikut ialah pautan ke inti 125 baris jika anda hanya mahu menggunakannya dan tidak perlu membaca sisa catatan blog ini. Jadi tidak sabar. Tapi saya faham. Hidup memang mencabar.

Bagaimanapun.

Terdapat banyak perkara yang biasanya anda perlu ambil kira dengan mikrofon. Saya tidak mendalami keserasian penyemak imbas dengan yang ini (saya pasti seperti... Opera atau sesuatu mungkin akan menghadapi masalah dengan ini), tetapi terdapat ada beberapa ciri penyemak imbas moden terbina dalam yang bagus yang akan sampaikan anda agak jauh, di sini:

• navigator.mediaDevices: ini membolehkan anda mengakses mikrofon pengguna (atau kamera, jika anda mahu itu)
• getUserMedia: ini membolehkan anda mendapatkan kebenaran pengguna untuk peranti media yang disebutkan di atas dan menghasilkan aliran media.
• MediaRecorder: ini membolehkan anda merakam sesuatu

Semua ini digabungkan dengan beberapa pembolehubah keadaan React untuk menjejaki setiap pembolehubah, useEffect untuk melakukan perkara sampingan pelayar dan kemudian

Semuanya lebih mudah diucapkan daripada dilakukan, sudah tentu, jadi itulah sebabnya saya meletakkan semuanya dalam intipati salin dan tampal. Di luar fungsi asas, saya juga membuat pembolehubah untuk masa rakaman maksimum (anda tidak memerlukannya, tetapi jika anda ingin menyalin sesuatu atau memuat naik sesuatu, saya rasa had adalah baik), dan beberapa gaya Tailwind kecil untuk menunjukkan beberapa animasi di sekeliling butang.

Gunakan komponen. Rakam impian anda.

Atas ialah kandungan terperinci Membuat komponen mikrofon React yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!