उपयोगकर्ता के माइक्रोफ़ोन से ऑडियो रिकॉर्ड करने का तरीका

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

  • Chrome: 53.
  • Edge: 12.
  • Firefox: 36.
  • Safari: 11.

Source

MediaRecorder API

Browser Support

  • Chrome: 47.
  • Edge: 79.
  • Firefox: 25.
  • Safari: 14.1.

Source

File System Access API के showSaveFilePicker() का इस्तेमाल

Browser Support

  • Chrome: 86.
  • Edge: 86.
  • Firefox: not supported.
  • Safari: not supported.

Source

इस बारे में और पढ़ें

डेमो

डेमो खोलें