AudioContext: createMediaStreamSource() 方法

基线广泛可用

此功能已久经考验，可在许多设备和浏览器版本中使用。它自 2021 年 4 月.

报告反馈

createMediaStreamSource() 方法是 AudioContext 接口的方法，用于创建一个新的 MediaStreamAudioSourceNode 对象，该对象使用媒体流（例如来自 MediaDevices.getUserMedia 实例的媒体流），其音频可以播放和操作。

语法

有关媒体流音频源节点的更多详细信息，请查看 MediaStreamAudioSourceNode 参考页面。

createMediaStreamSource(stream)

js

参数: stream

一个 `MediaStream`，用作要馈送到音频处理图以供使用和操作的音频源。

返回值

示例

一个新的 MediaStreamAudioSourceNode 对象，表示从指定源流获取其媒体的音频节点。

在此示例中，我们从 navigator.getUserMedia 获取媒体流（音频+视频），将媒体馈送到 <video> 元素以播放，然后静音音频，但也将音频馈送到 MediaStreamAudioSourceNode。接下来，我们将此源音频馈送到低通 BiquadFilterNode（它实际上用作低音增强器），然后馈送到 AudioDestinationNode。

<video> 元素下方的范围滑块控制低通滤波器的增益量 - 增加滑块的值，使音频声音更低沉！

有关媒体流音频源节点的更多详细信息，请查看 MediaStreamAudioSourceNode 参考页面。

const pre = document.querySelector("pre");
const video = document.querySelector("video");
const myScript = document.querySelector("script");
const range = document.querySelector("input");

// getUserMedia block - grab stream
// put it into a MediaStreamAudioSourceNode
// also output the visuals into a video element

if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((stream) => {
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        video.play();
        video.muted = true;
      };

      // Create a MediaStreamAudioSourceNode
      // Feed the HTMLMediaElement into it
      const audioCtx = new AudioContext();
      const source = audioCtx.createMediaStreamSource(stream);

      // Create a biquadfilter
      const biquadFilter = audioCtx.createBiquadFilter();
      biquadFilter.type = "lowshelf";
      biquadFilter.frequency.value = 1000;
      biquadFilter.gain.value = range.value;

      // connect the AudioBufferSourceNode to the gainNode
      // and the gainNode to the destination, so we can play the
      // music and adjust the volume using the mouse cursor
      source.connect(biquadFilter);
      biquadFilter.connect(audioCtx.destination);

      // Get new mouse pointer coordinates when mouse is moved
      // then set new gain value

      range.oninput = () => {
        biquadFilter.gain.value = range.value;
      };
    })
    .catch((err) => {
      console.log(`The following gUM error occurred: ${err}`);
    });
} else {
  console.log("getUserMedia not supported on your browser!");
}

// dump script to pre element

pre.textContent = myScript.textContent;