كيف يمكن الوصول للميكروفون في لغة جافا سكربت

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

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

كيف يمكن الوصول للميحرفون وبدء التسجيل الصوتي في لغة جافا سكربت وكيف يمكن حفظ الصوت المسجل قبل ارساله للسيرفر

Hassan Hedr · 20 يوليو 2022

يجب أولًا طلب تسجيل الصوت من المستخدم وذلك باستدعاء التابع getUserMedia وطلب الصوت فقط كالتالي:

navigator.mediaDevices.getUserMedia({ audio: true })

سيعيد الاستدعاء السابق وعد Promise عند نجاحه يكون المستخدم قد وافق على السماحية بالوصول للمايكروفون، والآن يمكن الاستعانة بالصنف MediaRecorder لتسجيل الصوت، حيث نمرر له المجرى stream الناتج عن طلب الوصول السابق كالتالي:

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(); // بدء التسجيل
  });

ونستفيد من الحدث dataavailable لتخزين بيانات الصوت ضمن مصفوفة مثلًا كالتالي:

const audioChunks = []; // بيانات الصوت
mediaRecorder.addEventListener("dataavailable", event => {
  audioChunks.push(event.data);
});

ولإنهاء تسجيل الصوت يمكن استدعاء التابع stop سواء عند ضغط المستخدم على زر ما أو بحسب حالة تطبيقك كالتالي:

mediaRecorder.stop();

نستفيد من الحدث stop الذي سيطلق بعد إنتهاء التسجيل لتحويل بيانات الصوت التي خزناها مسبقًا إلى ملف وحفظه كالتالي:

mediaRecorder.addEventListener("stop", () => {
  const audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
  const audioUrl = URL.createObjectURL(audioBlob);
  
  // تحميل ملف الصوت
  var a = document.getElementById("a");
  a.href = audioUrl;
  a.download = "recording.webm";
  document.body.appendChild(a);
  a.click();
});

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

بتاريخ 1 ساعة قال Hassan Hedr:
يجب أولًا طلب تسجيل الصوت من المستخدم وذلك باستدعاء التابع getUserMedia وطلب الصوت فقط كالتالي:
navigator.mediaDevices.getUserMedia({ audio: true })
سيعيد الاستدعاء السابق وعد Promise عند نجاحه يكون المستخدم قد وافق على السماحية بالوصول للمايكروفون، والآن يمكن الاستعانة بالصنف MediaRecorder لتسجيل الصوت، حيث نمرر له المجرى stream الناتج عن طلب الوصول السابق كالتالي:
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(); // بدء التسجيل
  });
ونستفيد من الحدث dataavailable لتخزين بيانات الصوت ضمن مصفوفة مثلًا كالتالي:
const audioChunks = []; // بيانات الصوت
mediaRecorder.addEventListener("dataavailable", event => {
  audioChunks.push(event.data);
});
ولإنهاء تسجيل الصوت يمكن استدعاء التابع stop سواء عند ضغط المستخدم على زر ما أو بحسب حالة تطبيقك كالتالي:
mediaRecorder.stop();
نستفيد من الحدث stop الذي سيطلق بعد إنتهاء التسجيل لتحويل بيانات الصوت التي خزناها مسبقًا إلى ملف وحفظه كالتالي:
mediaRecorder.addEventListener("stop", () => {
  const audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
  const audioUrl = URL.createObjectURL(audioBlob);
  
  // تحميل ملف الصوت
  var a = document.getElementById("a");
  a.href = audioUrl;
  a.download = "recording.webm";
  document.body.appendChild(a);
  a.click();
});

جميل اخي هل ممكن تعمل كود كامل html and js لهذه العمليه فمن الصعب جمع هذه الاكواد بنفسي لانها لن تشتغل ولم افهمها جيدا

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

بتاريخ 8 ساعات قال Hassan Hedr:

يجب أولًا طلب تسجيل الصوت من المستخدم وذلك باستدعاء التابع getUserMedia وطلب الصوت فقط كالتالي:

اخي لقد كتبت هذا الكود ولكن ما بعرف كيف يمكنني اخراج الصوت وتشغيله او حفظ الملف، اخي قم بتعديل الكود التالي واجعله يعمل واعد ارساله

<html>
  <body>
    <button onclick="samah();">تسجيل صوتي</button>
    <button onclick="stops();">stop</button>
    <script>
      function samah(){
        navigator.mediaDevices.getUserMedia({ audio: true })
          .then(stream => {
          const mediaRecorder = new MediaRecorder(stream);
          mediaRecorder.start(); // بدء التسجيل
        });

        const audioChunks = []; // بيانات الصوت
        mediaRecorder.addEventListener("dataavailable", event => {
          audioChunks.push(event.data);
        });
      }
      function stops(){
        mediaRecorder.addEventListener("stop", () => {
          const audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
          const audioUrl = URL.createObjectURL(audioBlob);

          // تحميل ملف الصوت
          var a = document.getElementById("a");
          a.href = audioUrl;
          a.download = "recording.webm";
          document.body.appendChild(a);
          a.click();
        });
      }

    </script>

  </body>
</html>

Wael Aljamal · 20 يوليو 2022

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

اخي لقد كتبت هذا الكود ولكن ما بعرف كيف يمكنني اخراج الصوت وتشغيله او حفظ الملف، اخي قم بتعديل الكود التالي واجعله يعمل واعد ارساله

قمت بتعديل الشيفرة، حيث أن المشكلة في مجال الوصول للمتيغرات، و عدم تطبيق دالة stop لتفعيل حدث stop للبدء بإجراءات حفظ الملف

<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;

    function samah() {
      navigator.mediaDevices.getUserMedia({audio: true})
        .then(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);

        // تحميل ملف الصوت
        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>

وهو يعمل بشكل جيد كما المطلوب

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

بتاريخ 11 ساعات قال Wael Aljamal:
قمت بتعديل الشيفرة، حيث أن المشكلة في مجال الوصول للمتيغرات، و عدم تطبيق دالة stop لتفعيل حدث stop للبدء بإجراءات حفظ الملف
 

شكرا لك اخي لقد عمل بشكل جيد، ولكن يوجد فقط مشكلة صغيرة وهي عند الضغط على stop لا يتوقف المايك ويبقى شغال وايقونة المايك تبقى ظاهره في شريط المهام العلوي من الشاشه للهاتف

تم التعديل في 21 يوليو 2022 بواسطة علي الكاسر

Wael Aljamal · 21 يوليو 2022

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

شكرا لك اخي لقد عمل بشكل جيد، ولكن يوجد فقط مشكلة صغيرة وهي عند الضغط على stop لا يتوقف المايك ويبقى شغال وايقونة المايك تبقى ظاهره في شريط المهام العلوي من الشاشه للهاتف

تمام، كان يتوجب إيقاف القناة Stream عالجت الموضوع

abc.html

كيف يمكن الوصول للميكروفون في لغة جافا سكربت

السؤال

علي الكاسر

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

Recommended Posts

Hassan Hedr

علي الكاسر

علي الكاسر

Wael Aljamal

علي الكاسر

Wael Aljamal

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية