لقد اضطررت أكثر من مرة في الآونة الأخيرة إلى إنشاء نوع من مكونات ميكروفون React الذي يسجل الصوت في المتصفح، ثم تفعل ما تريد باستخدام فقاعة الصوت التي تحصل عليها هناك ( قم بتخزينه، وتحويله، واستخدامه مع مكتبة النسخ، أيًا كان).

المكونات المتوفرة في ميكروفونات React… لا تتم صيانتها. عموما سأترك الأمر عند هذا الحد. إنها ليست سيئة بالضرورة، ولكن بعض المستودعات تؤدي إلى رسائل غير مرغوب فيها، وبعضها مليء بالروابط المعطلة، ومعظمها لم يتم تحديثها منذ أكثر من بضع سنوات.

إذا كنت تريد القيام بشيء ما، عليك أن تفعل ذلك بنفسك

قررت أن أصنع أحد هذه المكونات من الصفر!

إليك رابط للمحتوى المكون من 125 سطرًا إذا كنت تريد استخدامه فقط وليس عليك قراءة بقية منشور المدونة هذا. نفاد الصبر جدا. لكنني أفهم. الحياة صعبة.

على أي حال.

هناك مجموعة من الأشياء التي يتعين عليك مراعاتها بشكل عام باستخدام الميكروفونات. لم أتعمق في توافق المتصفح مع هذا المتصفح (أنا متأكد من أن... Opera أو أي شيء آخر من المحتمل أن يواجه مشكلة في هذا)، ولكن هناك بعض ميزات المتصفح الحديثة الرائعة التي ستساعدك نصل بك إلى حد بعيد، هنا:

• navigator.mediaDevices: يتيح لك هذا الوصول إلى ميكروفون المستخدم (أو الكاميرا، إذا كنت تريد ذلك)
• getUserMedia: يتيح لك هذا الحصول على إذن المستخدم لأجهزة الوسائط المذكورة أعلاه، وينتج دفقًا للوسائط.
• MediaRecorder: يتيح لك هذا تسجيل الأشياء فعليًا

تم دمج كل هذه العناصر مع بعض متغيرات حالة React لتتبع كل منها، وتأثير الاستخدام للقيام بأشياء من جانب المتصفح، ثم علامة

القول أسهل من الفعل، بالطبع، ولهذا السبب وضعت كل شيء في جوهر قابل للنسخ واللصق. خارج الوظيفة الأساسية، قمت أيضًا بإنشاء متغير للحد الأقصى لوقت التسجيل (لست بحاجة إليه، ولكن إذا كنت تريد نسخ شيء ما أو تحميله، فأنا أعتقد أن الحدود جيدة)، وبعض أنماط Tailwind الصغيرة لإظهار بعض الرسوم المتحركة حول الزر.

استخدم المكون. سجل أحلامك.