J*aScript媒体处理_Web Audio API音频分析

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048; // 设置FFT大小，影响频率分辨率

// 假设你有一个 audio 元素
const audioElement = document.getElementById('myAudio');
const source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioContext.destination); // 继续输出到扬声器

const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);
const timeData = new Uint8Array(bufferLength);
<p>// 在动画循环中更新数据
function update() {
analyser.getByteFrequencyData(frequencyData);
analyser.getByteTimeDomainData(timeData);
// 可在此处绘图或处理数据
requestAnimationFrame(update);
}
update();</p>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
<p>function drawSpectrum() {
requestAnimationFrame(drawSpectrum);
analyser.getByteFrequencyData(frequencyData);</p><p>ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);</p><p>const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;</p><p>for (let i = 0; i < bufferLength; i++) {
const barHeight = frequencyData[i];
ctx.fillStyle = <code>rgb(${barHeight + 100}, 50, 50)</code>;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
drawSpectrum();</p>