نحوه پردازش صدا از میکروفون کاربر

فرانسوا بوفور
François Beaufort

دسترسی به دوربین و میکروفون کاربر در بستر وب با Media Capture and Streams API امکان پذیر است. متد getUserMedia() از کاربر می خواهد که به دوربین و/یا میکروفون دسترسی داشته باشد تا به عنوان یک جریان رسانه عکس بگیرد. سپس می‌توان این جریان را در یک رشته صوتی وب جداگانه با 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

  • کروم: 53.
  • لبه: 12.
  • فایرفاکس: 36.
  • سافاری: 11.

Source

صوتی وب

Browser Support

  • کروم: 35.
  • لبه: 12.
  • فایرفاکس: 25.
  • سافاری: 14.1.

Source

AudioWorklet

Browser Support

  • کروم: 66.
  • لبه: 79.
  • فایرفاکس: 76.
  • سافاری: 14.1.

Source

در ادامه مطلب

نسخه ی نمایشی

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