BaseAudioContext: createAnalyser() 方法
BaseAudioContext 介面的 createAnalyser() 方法建立一個 AnalyserNode，它可用於公開音訊的時間和頻率資料，並建立資料視覺化。
注意： 建立 AnalyserNode 的推薦方法是使用 AnalyserNode() 建構函式；請參閱 建立 AudioNode。
注意： 有關使用此節點的更多資訊，請參閱 AnalyserNode 頁面。
語法
js
createAnalyser()
引數
無。
返回值
一個 AnalyserNode。
示例
以下示例演示了 AudioContext 的基本用法，用於建立 Analyser 節點，然後使用 requestAnimationFrame() 迴圈收集時域資料，並繪製當前音訊輸入的“示波器風格”輸出。有關更完整的應用示例/資訊，請檢視我們的 Voice-change-O-matic 演示（相關程式碼請參見 app.js 的 108-193 行）。
js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// …
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
// draw an oscilloscope of the current audio source
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = "rgb(200 200 200)";
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = "rgb(0 0 0)";
canvasCtx.beginPath();
const sliceWidth = (WIDTH * 1.0) / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = (v * HEIGHT) / 2;
if (i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height / 2);
canvasCtx.stroke();
}
draw();
規範
| 規範 |
|---|
| Web Audio API # dom-baseaudiocontext-createanalyser |
瀏覽器相容性
載入中…