इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

François Beaufort

वेब प्लैटफ़ॉर्म पर, Media Capture and Streams API की मदद से, उपयोगकर्ता के कैमरे और माइक्रोफ़ोन को ऐक्सेस किया जा सकता है. getUserMedia() तरीके से, उपयोगकर्ता को मीडिया स्ट्रीम के तौर पर कैप्चर करने के लिए, कैमरे और/या माइक्रोफ़ोन को ऐक्सेस करने के लिए कहा जाता है. इसके बाद, इस स्ट्रीम को अलग Web Audio थ्रेड में प्रोसेस किया जा सकता है. इसके लिए, AudioWorklet का इस्तेमाल किया जाता है. इससे ऑडियो को बहुत कम समय में प्रोसेस किया जा सकता है.

नीचे दिए गए उदाहरण में बताया गया है कि उपयोगकर्ता के माइक्रोफ़ोन से मिले ऑडियो को बेहतर तरीके से कैसे प्रोसेस किया जा सकता है.

let stream;

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

  // Load and execute the module script.
  await context.audioWorklet.addModule("processor.js");
  // Create an AudioWorkletNode. The name of the processor is the
  // one passed to registerProcessor() in the module script.
  const processor = new AudioWorkletNode(context, "processor");

  source.connect(processor).connect(context.destination);
  log("Your microphone audio is being used.");
});

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

  log("Your microphone audio is not used anymore.");
});

// processor.js
// This file is evaluated in the audio rendering thread
// upon context.audioWorklet.addModule() call.

class Processor extends AudioWorkletProcessor {
  process([input], [output]) {
    // Copy inputs to outputs.
    output[0].set(input[0]);
    return true;
  }
}

registerProcessor("processor", Processor);

ब्राउज़र समर्थन

MediaDevices.getUserMedia()

Browser Support

Source

Web Audio

Browser Support

Source

AudioWorklet

Browser Support

Source

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

डेमो

डेमो खोलें