تسجيل صوت JS من ميكروفون أو تعليقات صوتية
منذ وقت ليس ببعيد ، عند تطوير تطبيق ويب واحد للشركة ، تمنى العميل أن يكون قادرًا على ترك التعليقات الصوتية. في السابق ، لم أكن أتحدث عن إنشاء محتوى إعلامي وبدأت في دراسة هذا الموضوع باهتمام.
قدمت الشبكة معلومات أساسية كافية حول موضوع إنشاء هذا النوع من المحتوى ومعالجته ، لكنني لم أجد مثالًا بسيطًا يعمل بكامل طاقته. بعد تنفيذ المهمة من قبل العميل ، قررت نشر المثال الأكثر بساطة لتسجيل وحفظ التعليقات الصوتية وكتابة مقال. ربما ستكون هذه المادة مفيدة لشخص ما وتساعد في الدراسة.
بيان المشكلة
وضعنا على عاتقنا مهمة تطوير تطبيق مصغر يعمل في متصفح يتيح لك تسجيل تعليق صوتي ، وإرسال تسجيل إلى الخادم ، وسيحفظ الخادم التسجيل ، وإذا نجح ، فسوف يرد استجابة باسم الملف الذي تم إنشاؤه ويعرض الكائن على الصفحة حتى يمكن الاستماع إلى التسجيل.
سجل الصوت في المتصفح
تقرر تنفيذ التسجيل الصوتي باستخدام واجهة برمجة تطبيقات MediaStream Recording web. للتسجيل ، نستخدم واجهة MediaRecorder (). ولكن أولا ، إنشاء واجهة. دعنا لدينا index.html يحتوي فقط على أكثر العلامات الأساسية ، وفي نص العلامة سنشمل ملفًا باستخدام JavaScript Voice.js في المستقبل:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Voice comments</title> </head> <body> <script src="voice.js"></script> </body> </html>
قم بإنشاء ملف Voice.js ، وحدد ثابت عنوان URL به والذي سيحتوي على رابط لبرنامج نصي يتلقى الصوت المسجل. بعد ذلك ، قم بإنشاء زري "ابدأ" و "إيقاف" لبدء التسجيل الصوتي وإيقافه ، بالإضافة إلى كتلة div التي سيتم عرض السجلات المحفوظة بها. على هذه الواجهة جاهزة ، يمكنك المتابعة مباشرة إلى التسجيل الصوتي.
كما سبق ذكره للتسجيل ، سوف نستخدم واجهة MediaRecorder () (لمزيد من المعلومات حول الواجهة ، راجع الوثائق) ، لتشغيلها من الضروري تحديد دفق الوسائط الذي سنعمل منه على الصوت ، ونقوم بتهيئته فقط بحيث نحتاج فقط إلى مسار صوتي.
navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream)});
الآن لدينا mediaCecorder ثابت ، والذي يحتوي على مثيل للواجهة ، وسوف نستمر في العمل معها.
لبدء التسجيل ، نحتاج إلى استدعاء الأسلوب MediaRecorder.start () ، لإيقاف التسجيل ، طريقة MediaRecorder.stop (). في هذه الحالة ، تنشئ MediaRecorder.stop () حدثًا متاحًا للبيانات يمكننا من خلاله الوصول إلى تسجيل الصوت الرقمي في شكل صفيف ثنائي.
ولذا سنصف الأحداث المذكورة أعلاه ، ونعلن عن مجموعة [] الصوت ونكتب البيانات المستلمة فيه:
navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream); let voice = []; document.querySelector('#start').addEventListener('click', function(){ mediaRecorder.start(); }); mediaRecorder.addEventListener("dataavailable",function(event) { voice.push(event.data); }); document.querySelector('#stop').addEventListener('click', function(){ mediaRecorder.stop(); }); });
الآن سنقوم بإعداد البيانات المستلمة للإرسال. للقيام بذلك ، من خلال الحدث stop ، قم بإنشاء مثيل BLOB ، ضع البيانات المستلمة فيه وحدد نوع بيانات MIME. في حالتنا ، سيكون الصوت / الرعايا.
mediaRecorder.addEventListener("stop", function() { const voiceBlob = new Blob(voice, { type: 'audio/wav' });
نتيجة لذلك ، لدينا صوت VoiceBlob الثابت وهو محتوى ملف wav في المستقبل الخاص بنا مع تسجيل رسالة صوتية.
إرسال سجل إلى الخادم
لإرسال سجل إلى الخادم ، قررت استخدام طريقة الجلب (). لأن هذه الطريقة هي الأكثر حداثة وتوفر واجهة محسنة لتقديم الطلبات إلى الخادم. كجزء من مهمتنا ، نحتاج إلى بدء طلب POST في النص الأساسي لإرسال محتويات ملفنا المستقبلي لحفظه على الخادم (كيفية عمل طريقة الجلب () وما هي القدرات التي يمكن العثور عليها في الوثائق بالتفصيل). قم بإنشاء نموذج جديد باستخدام الحقل الصوتي ووضع محتويات سجلنا فيه.
let fd = new FormData(); fd.append('voice', voiceBlob);
نقوم بإنشاء وظيفة غير متزامنة لإرسال رسالة إلى الخادم لتلقي استجابة وعرض كائن صوتي لتشغيل ملف محفوظ بالفعل. كوسيطة ، تأخذ الدالة النموذج الذي تم إنشاؤه أعلاه.
نبدأ طلب الخادم:
let promise = await fetch(URL, { method: 'POST', body: form});
إذا كانت استجابة HTTP من الخادم لا تحتوي على رمز خطأ (يكون رمز الاستجابة في حدود 200-299) ، فسيبقى لنا فك تشفير الاستجابة وإنشاء كائن صوتي جديد على الصفحة وتحديد خصائصه وعرضه. كيف سيتم تشكيل الجواب سوف تناقش أدناه.
حفظ ملف على الخادم
لنقم بإنشاء برنامج نصي على الخادم الذي سيتلقى طلب POST لدينا من خلال رسالة صوتية. نظرًا لأن التسجيل الصوتي الذي أرسلناه هو بالفعل ملف في النموذج ، فسوف نستقبله على الخادم وفقًا لذلك:
$uploadDir = 'voice/'; $typeFile = explode('/', $_FILES['voice']['type']); $uploadFile = $uploadDir . basename(md5($_FILES['voice']['tmp_name'].time()).'.'.$typeFile[1]); if (move_uploaded_file($_FILES['voice']['tmp_name'], $uploadFile)) { $response = ['result'=>'OK', 'data'=>'../'.$uploadFile]; } else { $response = ['result'=>'ERROR', 'data'=>'']; } echo json_encode($response);
يمكنك العثور على الكثير من الأمثلة المشابهة لرمز PHP ، ومعالجة الملفات المستلمة على الشبكة. أولاً ، قم بتهيئة المتغيرات ، $ uploadDir - الدليل الذي سيتم حفظ الملف المستلم به ، ونوع الملف ونوعه في حالتنا سيكون مساوياً لـ wav واسم الملف الكامل ، بما في ذلك الدليل. يتم تشكيل اسم الملف في هذه الحالة من خلال الجمع بين اسم الملف "المؤقت" وقيمة سلسلة الوقت الحالي المشفرة باستخدام طريقة md5. إذا نجحت في حفظ الملف برسالة صوتية في الدليل المحدد ، فإننا نشكل استجابة في شكل صفيف يحتوي على حقل النتيجة يساوي "OK" أو "ERROR" اعتمادًا على النتيجة وحقل "البيانات" الذي يحتوي ، في حالة نجاح المعالجة ، على رابط للملف المحفوظ.
للراحة ، نقوم بتحويل الصفيف إلى كائن JSON وإرساله كرد.
رمز عينة كامل متاح في
جيثب .
ملاحظة: يسمح لك المتصفح بتسجيل محتوى الوسائط فقط من خلال اتصال HTTPS آمن.