Halaman ini diterjemahkan oleh Cloud Translation API.

Cara memproses audio dari mikrofon pengguna

François Beaufort

Mengakses kamera dan mikrofon pengguna dapat dilakukan di platform web dengan Media Capture and Streams API. Metode getUserMedia() meminta pengguna untuk mengakses kamera dan/atau mikrofon untuk merekam sebagai aliran media. Kemudian, aliran ini dapat diproses di thread Web Audio terpisah dengan AudioWorklet yang menyediakan pemrosesan audio dengan latensi sangat rendah.

Contoh di bawah menunjukkan cara memproses audio dari mikrofon pengguna secara berperforma tinggi.

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