AudioContext: createMediaElementSource() 方法

Baseline 已廣泛支援

此特性已得到良好支援，可在多種裝置和瀏覽器版本上使用。自 2021 年 4 月起，所有瀏覽器均已支援此特性。

AudioContext 介面的 createMediaElementSource() 方法用於根據一個現有的 HTML <audio> 或 <video> 元素建立一個新的 MediaElementAudioSourceNode 物件，該物件的音訊可以被播放和操作。

有關媒體元素音訊源節點的更多詳細資訊，請參閱 MediaElementAudioSourceNode 參考頁。

語法

createMediaElementSource(myMediaElement)

引數

myMediaElement: 一個 HTMLMediaElement 物件，您想將其饋送到音訊處理圖中進行操作。

這個簡單的示例使用 createMediaElementSource() 從一個 <audio> 元素建立了一個源，然後將音訊透過一個 GainNode 傳遞，最後將其饋送到 AudioDestinationNode 進行播放。當滑鼠指標移動時，將呼叫 updatePage() 函式，該函式將當前增益計算為滑鼠 Y 座標除以整個視窗高度的比率。因此，您可以透過上下移動滑鼠指標來增加和減小正在播放的音樂的音量。

注意：您也可以檢視此示例的即時執行，或檢視原始碼。

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

注意：呼叫 createMediaElementSource() 的結果是，來自 HTMLMediaElement 的音訊播放將被重新路由到 AudioContext 的處理圖中。因此，仍然可以透過媒體元素 API 和播放器控制元件來播放/暫停媒體。