AudioContext：createMediaElementSource() 方法

基线广泛可用

此功能已建立良好，可在许多设备和浏览器版本上运行。它自 2021 年 4 月.

报告反馈

AudioContext 接口的 createMediaElementSource() 方法用于创建一个新的 MediaElementAudioSourceNode 对象，该对象基于现有的 HTML <audio> 或 <video> 元素，可以播放和操作其音频。

此简单示例使用 createMediaElementSource() 从 <audio> 元素创建源，然后将音频通过 GainNode 传递，最后馈送到 AudioDestinationNode 进行播放。当鼠标指针移动时，会调用 updatePage() 函数，该函数会计算当前增益，增益是鼠标 Y 位置除以窗口总高度的比率。因此，您可以通过上下移动鼠标指针来增加和减少正在播放的音乐的音量。

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

const audioCtx = new AudioContext();
const myAudio = document.querySelector("audio");

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// Create a gain node
const gainNode = audioCtx.createGain();

// Create variables to store mouse pointer Y coordinate
// and HEIGHT of screen
let curY;
const HEIGHT = window.innerHeight;

// Get new mouse pointer coordinates when mouse is moved
// then set new gain value
document.onmousemove = updatePage;

function updatePage(e) {
  curY = e.pageY;
  gainNode.gain.value = curY / HEIGHT;
}

// 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(gainNode);
gainNode.connect(audioCtx.destination);