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

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

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

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

Wael Aljamal · 20 يوليو 2022

بتاريخ On 20‏/7‏/2022 at 13:52 قال علي الكاسر:

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

أظهر المزيد

قمت بتعديل الشيفرة، حيث أن المشكلة في مجال الوصول للمتيغرات، و عدم تطبيق دالة 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>

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

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

بتاريخ On 20‏/7‏/2022 at 11:21 قال 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

بتاريخ On 20‏/7‏/2022 at 11:21 قال 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>

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

بتاريخ On 20‏/7‏/2022 at 19:37 قال Wael Aljamal:
قمت بتعديل الشيفرة، حيث أن المشكلة في مجال الوصول للمتيغرات، و عدم تطبيق دالة stop لتفعيل حدث stop للبدء بإجراءات حفظ الملف
 
أظهر المزيد

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

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

Wael Aljamal · 21 يوليو 2022

بتاريخ On 21‏/7‏/2022 at 06:26 قال علي الكاسر:

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

أظهر المزيد

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

abc.html

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

السؤال

علي الكاسر

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

Recommended Posts

Wael Aljamal

Hassan Hedr

علي الكاسر

علي الكاسر

علي الكاسر

Wael Aljamal

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية