علي الكاسر نشر 21 يوليو 2022 أرسل تقرير نشر 21 يوليو 2022 السلام عليكم ورحمة الله وبركاته هذا الكود يقوم بالصول للميكرفون وتسحيل الصوت وانشاء رابط للصوت ومن ثم تحميل الصوت في الجهاز <html> <body> <button onclick="samah();">تسجيل صوتي</button> <button onclick="stops();">stop</button> <a id="a"></a> <script> var audioChunks = []; // بيانات الصوت var mediaRecorder = null; var audioBlob = null; var audioUrl = null; var mainStream = null; function samah() { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { mainStream = stream; mediaRecorder = new MediaRecorder(stream); mediaRecorder.start(); // بدء التسجيل mediaRecorder.addEventListener("dataavailable", event => { audioChunks.push(event.data); }); }); } function stops() { mediaRecorder.addEventListener("stop", () => { audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType }); audioUrl = URL.createObjectURL(audioBlob); mainStream.getTracks() // get all tracks from the MediaStream .forEach(track => track.stop()); // stop each of them // تحميل ملف الصوت let a = document.getElementById("a"); a.href = audioUrl; a.download = "recording.webm"; a.innerText = 'click me to save file'; //document.body.appendChild(a); //a.click(); }); mediaRecorder.stop(); } </script> </body> </html> أنا لا اريد تحميله بل اريد ارساله فورا للسيرفر عبر اجاكس عند الضغط على stop ماهي الكيفية لفعل ذلك. 1 اقتباس
0 عمر قره محمد نشر 21 يوليو 2022 أرسل تقرير نشر 21 يوليو 2022 لفعل ذلك عليك ارسال الـ Blob الذي تنشئه عند كل تسجيل بالشكل التالي : // رابط الباك اند الذي سيستقبل الاتصال var url = "http://localhost:3000" || "your endPoint url"; async function send() { // انشأنا فورم باستخدام الجافاسكريبت const myForm = new FormData() // ارفتنا البلوب "تسجيل الصور" بإسم معين سنقوم بتلقيه من طرف السيرفر myForm.append("audio", audioBlob) // هنا نقوم بإرسال الفورم باستخدام ادات الارسال المبنية بالجافاسكريبت try { const response = await fetch(url, { method: 'POST', body: myForm }); console.log(response); } catch (error) { console.log(error); } } بعد انشاء هذه الوظيفة عليك استدعائها كلما نقر المستخدم على stop كالتالي : function stops() { mediaRecorder.addEventListener("stop", () => { audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType }); // ******** هنا نقوم باستدعاء الوظيفة الخاصة بنا ******** // لاحظ ان موقعها بعد تعريف البلوب لأنها ستقوم بإرساله send() // ***************************************** audioUrl = URL.createObjectURL(audioBlob); mainStream.getTracks() // get all tracks from the MediaStream .forEach(track => track.stop()); // stop each of them // تحميل ملف الصوت let a = document.getElementById("a"); a.href = audioUrl; a.download = "recording.webm"; a.innerText = 'click me to save file'; //document.body.appendChild(a); //a.click(); }); mediaRecorder.stop(); } الملف بعض اضافة التعديل المطلوب : التحميل الآن 1 اقتباس
0 علي الكاسر نشر 21 يوليو 2022 الكاتب أرسل تقرير نشر 21 يوليو 2022 بتاريخ 28 دقائق مضت قال عمر قره محمد: بتاريخ 29 دقائق مضت قال عمر قره محمد: لفعل ذلك عليك ارسال الـ Blob الذي تنشئه عند كل تسجيل بالشكل التالي : لقد فهمت شكرا لك اخي هل فقط نرسل هذا المتغير audioBlob مع الفورم الذي انشئناه، هل هذا كل مافي الامر للعلم انا اعرف كيفية رفع الملفات بالاجاكس او الدالة فيتش شكرا جزيلا اقتباس
0 عمر قره محمد نشر 21 يوليو 2022 أرسل تقرير نشر 21 يوليو 2022 بتاريخ الآن قال علي الكاسر: لقد فهمت شكرا لك اخي هل فقط نرسل هذا المتغير audioBlob مع الفورم الذي انشئناه، هل هذا كل مافي الامر للعلم انا اعرف كيفية رفع الملفات بالاجاكس او الدالة فيتش شكرا جزيلا نعم اخي علي هكذا فقط، وللتعلم اكثر عن الامر قم بالبحث على الويب : how to send Blob to server كما قمت كذلك بتجريب الامر مع سيرفر node وعمل كما ينبغي وقمت بتحميل الصوت من جهة السيرفر. 1 اقتباس
السؤال
علي الكاسر
السلام عليكم ورحمة الله وبركاته
هذا الكود يقوم بالصول للميكرفون وتسحيل الصوت وانشاء رابط للصوت ومن ثم تحميل الصوت في الجهاز
أنا لا اريد تحميله بل اريد ارساله فورا للسيرفر عبر اجاكس عند الضغط على stop ماهي الكيفية لفعل ذلك.
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.