نحوه ضبط صدا از میکروفون کاربر

فرانسوا بوفور
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/articles/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()

Browser Support

  • کروم: ۵۳.
  • لبه: ۱۲.
  • فایرفاکس: ۳۶.
  • سافاری: ۱۱.

Source

رابط برنامه‌نویسی کاربردی ضبط رسانه

Browser Support

  • کروم: ۴۷.
  • لبه: ۷۹.
  • فایرفاکس: ۲۵.
  • سافاری: ۱۴.۱.

Source

تابع showSaveFilePicker() در API دسترسی به سیستم فایل

Browser Support

  • کروم: ۸۶.
  • لبه: ۸۶.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: پشتیبانی نمی‌شود.

Source

مطالعه بیشتر

نسخه آزمایشی

نسخه آزمایشی را باز کنید