Kullanıcının mikrofonundan gelen ses nasıl işlenir?

François Beaufort
François Beaufort

Web platformunda Media Capture and Streams API ile kullanıcının kamerasına ve mikrofonuna erişmek mümkündür. getUserMedia() yöntemi, kullanıcıdan medya akışı olarak yakalamak için kamera ve/veya mikrofona erişmesini ister. Bu akış daha sonra çok düşük gecikmeli ses işleme sağlayan bir AudioWorklet ile ayrı bir Web Audio iş parçacığında işlenebilir.

Aşağıdaki örnekte, kullanıcının mikrofonundan gelen sesin nasıl yüksek performanslı bir şekilde işlenebileceği gösterilmektedir.

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);

Tarayıcı desteği

MediaDevices.getUserMedia()

Browser Support

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

Source

Web Audio

Browser Support

  • Chrome: 35.
  • Edge: 12.
  • Firefox: 25.
  • Safari: 14.1.

Source

AudioWorklet

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 76.
  • Safari: 14.1.

Source

Daha fazla bilgi

Demo

Demoyu aç