بعد الوصول للميكرفون وتسجيل الصوت كيف يمكن ارسال ملف الصوت للسيرفر جافا سكربت

علي الكاسر · 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 ماهي الكيفية لفعل ذلك.

عمر قره محمد · 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();
}

الملف بعض اضافة التعديل المطلوب : التحميل الآن

علي الكاسر · 21 يوليو 2022

بتاريخ 28 دقائق مضت قال عمر قره محمد:

بتاريخ 29 دقائق مضت قال عمر قره محمد:

لفعل ذلك عليك ارسال الـ Blob الذي تنشئه عند كل تسجيل بالشكل التالي :

لقد فهمت شكرا لك اخي

هل فقط نرسل هذا المتغير audioBlob مع الفورم الذي انشئناه، هل هذا كل مافي الامر

للعلم انا اعرف كيفية رفع الملفات بالاجاكس او الدالة فيتش

شكرا جزيلا

عمر قره محمد · 21 يوليو 2022

بتاريخ الآن قال علي الكاسر:

لقد فهمت شكرا لك اخي

هل فقط نرسل هذا المتغير audioBlob مع الفورم الذي انشئناه، هل هذا كل مافي الامر

للعلم انا اعرف كيفية رفع الملفات بالاجاكس او الدالة فيتش

شكرا جزيلا

نعم اخي علي هكذا فقط،

وللتعلم اكثر عن الامر قم بالبحث على الويب :

how to send Blob to server

كما قمت كذلك بتجريب الامر مع سيرفر node وعمل كما ينبغي وقمت بتحميل الصوت من جهة السيرفر.

بعد الوصول للميكرفون وتسجيل الصوت كيف يمكن ارسال ملف الصوت للسيرفر جافا سكربت

السؤال

علي الكاسر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

علي الكاسر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية