كيفية تسجيل الصوت من ميكروفون المستخدم

François Beaufort

يمكن الوصول إلى كاميرا المستخدم وميكروفونه على النظام الأساسي للويب من خلال واجهة برمجة تطبيقات التقاط الوسائط والبث. تطلب طريقة getUserMedia() من المستخدم الوصول إلى كاميرا و/أو ميكروفون لالتقاط صورة كبث وسائط. ويمكن بعد ذلك تسجيل هذا البث باستخدام MediaRecorder API أو مشاركته مع مستخدمين آخرين عبر الشبكة. يمكن حفظ التسجيل في ملف محلي باستخدام طريقة showOpenFilePicker().

يوضِّح المثال أدناه كيف يمكنك تسجيل الصوت من ميكروفون المستخدم بتنسيق WebM وحفظ التسجيل في نظام ملفات المستخدم.

let stream;
let recorder;

startMicrophoneButton.addEventListener("click", async () => {
  // Prompt the user to use their microphone.
  stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  recorder = new MediaRecorder(stream);
});

stopMicrophoneButton.addEventListener("click", () => {
  // Stop the stream.
  stream.getTracks().forEach(track => track.stop());
});

startRecordButton.addEventListener("click", async () => {
  // For the sake of more legible code, this sample only uses the
  // `showSaveFilePicker()` method. In production, you need to
  // cater for browsers that don't support this method, as
  // outlined in https://web.dev/patterns/files/save-a-file/.

  // Prompt the user to choose where to save the recording file.
  const suggestedName = "microphone-recording.webm";
  const handle = await window.showSaveFilePicker({ suggestedName });
  const writable = await handle.createWritable();

  // Start recording.
  recorder.start();
  recorder.addEventListener("dataavailable", async (event) => {
    // Write chunks to the file.
    await writable.write(event.data);
    if (recorder.state === "inactive") {
      // Close the file when the recording stops.
      await writable.close();
    }
  });
});

stopRecordButton.addEventListener("click", () => {
  // Stop the recording.
  recorder.stop();
});

المتصفحات المتوافقة

MediaDevices.getUserMedia()

واجهة برمجة تطبيقات MediaRecorder

واجهة برمجة التطبيقات showSaveFileChooseer() الخاصة بـ File System Access API

محتوى إضافي للقراءة

• مواصفات ملفات البث والتقاط الوسائط من W3C
• مواصفات تسجيل W3C MediaStream
• مواصفات الوصول إلى نظام ملفات WICG

الخصائص الديموغرافية

فتح العرض التوضيحي