איך מקליטים אודיו מהמיקרופון של המשתמש

François Beaufort
François Beaufort

הגישה למצלמה ולמיקרופון של המשתמש אפשרית בפלטפורמת האינטרנט באמצעות Media Capture and Streams API. השיטה 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()

תמיכה בדפדפן

  • 53
  • 12
  • 36
  • 11

מקור

ממשק API של MediaRecorder

תמיכה בדפדפן

  • 47
  • 79
  • 25
  • 14.1

מקור

ערך showSaveFilePicker() של File System Access API

תמיכה בדפדפן

  • 86
  • 86
  • x
  • x

מקור

קריאה נוספת

הדגמה (דמו)

פתיחת ההדגמה