اذهب إلى المحتوى

السؤال

نشر

السلام عليكم ورحمة الله وبركاته 

هذا الكود يقوم بالصول للميكرفون وتسحيل الصوت وانشاء رابط للصوت ومن ثم تحميل الصوت في الجهاز 

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

Recommended Posts

  • 0
نشر

لفعل ذلك عليك ارسال الـ 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();
}

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

  • 0
نشر
بتاريخ 28 دقائق مضت قال عمر قره محمد:
بتاريخ 29 دقائق مضت قال عمر قره محمد:

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

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

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

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

شكرا جزيلا

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

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

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

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

شكرا جزيلا

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

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

how to send Blob to server

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...