تمت ترجمة هذه الصفحة بواسطة 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);