9、Web Audio API：音频分析、加载与播放的全面指南-CSDN博客

Web Audio API：音频分析、加载与播放的全面指南

1. AnalyserNode 详解

1.1 基本属性

smoothingTimeConstant ：取值范围在 0 到 1 之间，默认值为 0.8。它是当前缓冲区和 AnalyserNode 处理的上一个缓冲区之间的指数平均值，能使值随时间变化更加平滑。值越高，结果越平滑，变化越慢；值为 0 则不应用平滑处理，频域数据只是给定时间窗口内信号频率内容的快照。
frequencyBinCount ：只读属性，值为 fftSize/2，代表频域数据的大小。虽然不是严格必需的暴露属性，但由于时域数据量是频域数据的两倍，将其作为单独属性便于跟踪。

1.2 方法列表

方法名	功能
getFloatTimeDomainData(array)	将下混后的时域数据复制到长度为 fftSize 的数组中。
getByteTimeDomainData(array)	将时域数据复制到大小为 fftSize 的 8 位无符号整数（0 到 255）数组中。对于时域数据 x[k]，字节值为 b[k] = ⌊128(1 + x[k])⌋，b[k] 会被限制在 0 到 255 的范围内。
getFloatFrequencyData(array)	将以分贝为单位的频域数据复制到长度为 frequencyBinCount 的数组中。
getByteFrequencyData(array)	将频域数据复制到大小为 frequencyBinCount 的 8 位无符号整数（0 到 255）数组中。如果 Y[k] 是加窗和平滑后的频域数据，则字节值为 b[k] = ⌊255 ⌋（这里 ⌊ ⌋ 表示向下取整），dBmin 是 minDecibels，dBmax 是 maxDecibels，b[k] 会被限制在 0 到 255 的范围内。

1.3 频域数据计算流程

graph TD;
    A[时域输入数据 x[n]] --> B[应用 Blackman 窗口];
    B --> C[应用快速傅里叶变换（FFT）];
    C --> D[频域数据平滑处理];
    D --> E[转换为分贝];
    E --> F[输出频域数据 Y[k]];

具体步骤如下：
1. 加窗处理 ：对时域输入数据 x[n]（n = 0, …, N - 1，N 为 fftSize）应用 Blackman 窗口，得到加窗后的信号。
2. FFT 变换 ：对加窗后的时域输入数据应用快速傅里叶变换（FFT），得到复频域数据。对于 k = 0, …, N/2 - 1，其中 WN = ej2π/N。这本质上是将原始时域数据表示为正弦波的和，每个正弦波的频率是基频的倍数，X[k] 表示第 k 个正弦波在原始信号中的含量。
3. 平滑处理 ：使用公式对频域数据进行平滑处理，其中是复傅里叶变换值的幅度，是上一个块的平滑值（如果是第一个块则设为 0），τ 是 smoothingTimeConstant。
4. 转换为分贝 ：最后将结果转换为分贝，得到数组 Y[k]，这就是 getFloatFrequencyData() 的输出。对于 getByteFrequencyData()，Y[k] 会被限制在 minDecibels 和 maxDecibels 之间，然后进行缩放以适应无符号字节，使得 minDecibels 表示为 0，maxDecibels 表示为 255。

1.4 AnalyserNode 的使用

1.4.1 连接方式

AnalyserNode 可以作为额外的目标节点，没有输出；也可以插入两个连接的节点之间，此时它会将输入无延迟地传递到输出。以下两个语句是等效的：

firstNode.connect(analysisNode).connect(nextNode);

firstNode.connect(analysisNode);
firstNode.connect(nextNode);

1.4.2 获取数据

定义数组来存储时域或频域数据，例如：

var freqData = new Float32Array(analysisNode.frequencyBinCount);

然后可以随时调用 AnalyserNode 的方法获取相关数据，例如：

analysisNode.getFloatFrequencyData(Magnitudes);

这里，Magnitudes 是一个 32 位浮点数数组，对应每个频率 bin 的幅度。输出的索引可以线性映射到 0 到奈奎斯特频率（采样率的一半）之间。例如，Magnitudes[n] 表示频率 n·fs / N 附近的内容强度，其中 fs 是采样频率，N 是 FFT 大小。同样，频率值为 f 的内容位于数组索引为 ⌊ N · f / fs ⌉ 的 bin 中（⌊ ⌋ 表示四舍五入到最接近的整数）。

1.5 示例：可视化声音

以下是一个完整的示例代码，用于可视化声音的时域或频域数据：

<canvas id='canvas' width='512' height='256' ></canvas>
<br>
<button onclick='audioContext.resume()'>Start</button>
<input type='checkbox' id='Spectrum'>Spectrum<br>
<input type='range' max=4000 value=440 id='Frequency'>Frequency
<script src='Analyser.js'></script>

// Analyser.js
let canvasContext = canvas.getContext('2d');
let audioContext = new AudioContext();
let source = new OscillatorNode(audioContext, { type: 'square' });
let analyser = audioContext.createAnalyser();
source.connect(analyser);
source.start();
var data = new Uint8Array(analyser.frequencyBinCount);
Frequency.oninput = () => source.frequency.value = Frequency.value;
draw();

function draw() {
    let height = canvas.height, width = canvas.width;
    if (Spectrum.checked)
        analyser.getByteFrequencyData(data);
    else
        analyser.getByteTimeDomainData(data);

    canvasContext.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < data.length; i++) {
        if (!Spectrum.checked) {
            canvasContext.fillRect(i, height * (1 - data[i] / 256) - 1, 1, 1);
        } else {
            canvasContext.fillRect(i, height * (1 - data[i] / 256), 1, height * data[i] / 256);
        }
    }
    requestAnimationFrame(draw);
}

该代码使用 HTML5 canvas 绘制时域或频域值，创建了一个简单的可视化工具，用于渲染波形或幅度谱。它生成一个由方波（初始设置为 440 Hz）及其前八个谐波组成的周期性波形，结果会在 canvas 上显示并随时间变化。

2. 音频加载、播放与录制

2.1 核心功能概述

Web Audio API 的核心功能包括从流或文件中播放音频，以及录制或流式传输节点的输出。这些任务虽然相关，但实现方式和复杂程度各不相同。可以通过不同的音频节点将音频从不同来源（如媒体流和媒体元素）引入音频上下文，也可以使用 decodeAudioData 将音频加载到缓冲区，并将其输出到不同的目的地（如媒体流和音频文件）。部分功能还依赖于 Web Audio API 之外的方法，如 MediaStream API 中的 getUserMedia。

2.2 媒体元素的使用

2.2.1 HTML

HTML

2.2.2

<!-- SimpleMediaElement.html -->
<audio controls id='file' src='beat1.mp3'></audio><br>
<input type='range' min=0 max=1 value=0.5 step='any' id='Volume'>
Volume<br>
<input type='range' min=0.25 max=4 value=1 step='any' id='Rate'>
Rate<br>
<input type='checkbox' id='Loop'>Loop
<input type='checkbox' id='Preserve'>Preserve pitch<br>
<button id='Show'>Show position</button>
<span id='Position'></span><br>
<script>
    Show.onclick = () => Position.innerHTML = file.currentTime;
    Rate.oninput = () => file.playbackRate = Rate.value;
    Volume.oninput = () => file.volume = Volume.value;
    Preserve.oninput = () => file.preservesPitch = Preserve.checked;
    Loop.oninput = () => file.loop = Loop.checked;
</script>

在这个示例中，currentTime 表示媒体文件的当前播放位置，单位为秒，范围从 0 到文件的持续时间。volume 类似于增益节点，将信号乘以音量级别，但

2.3 MediaElementAudioSourceNode

2.3.1 功能与创建方式

let theNode = new MediaElementAudioSourceNode(context, options);

let theNode = context.createMediaElementSource(mediaElement);

其中，context 是音频上下文，mediaElement 是被节点包装的音频或视频元素，options 是一个包含 mediaElement 属性的对象，必须指定 mediaElement。需要注意的是，两个 MediaElementAudioSourceNodes 不能使用同一个 mediaElement。

2.3.2 使用示例

<!-- MediaElement.html -->
<audio controls id='file' onplay='context.resume()'>
    <source src='beat1.mp3'>
</audio>
<script>
    let context = new AudioContext();
    let source = context.createMediaElementSource(file);
    let gainNode = new GainNode(context, { gain: 0.5 });
    source.connect(gainNode).connect(context.destination);
</script>

<!-- MediaElement2.html -->
<button id='play'>Start</button>
<script>
    context = new AudioContext();
    file = new Audio('beat1.mp3');
    let source = context.createMediaElementSource(file);
    source.connect(context.destination);
    play.onclick = function () {
        context.resume();
        file.play();
    }
</script>

将该节点连接到音频图后，可以像操作其他源节点一样使用 Web Audio API 对其进行操作。渲染的音频将不再直接作为 HTMLMediaElement 被听到，而是通过 MediaElementAudioSourceNode 在图中重新路由。媒体元素的其他方面，如暂停和音量，将像不与该节点一起使用时一样正常工作。

2.4 加载音频样本

2.5 关于音频编码

虽然有 decodeAudioData 方法用于将压缩格式的音频数据解码为线性 PCM，但并没有直接对应的 encodeAudioData 方法。不过在实际应用中，若需要对音频进行编码，可以借助一些第三方库或工具来实现。

2.6 音频操作总结

3. 综合应用与注意事项

3.1 综合示例分析

在前面的可视化声音示例中，结合了 AnalyserNode 和音频源节点，实现了音频数据的可视化。通过不断刷新动画，调用 getByteTimeDomainData 或 getByteFrequencyData 方法获取最新数据进行绘制。这个过程中，虽然采用了浏览器的刷新频率（通常为 60 帧每秒，毫秒级精度）来获取数据，但可能会错过一些细节。对于音乐可视化而言，这种方式是可行的，但如果要对整个音频缓冲区进行全面分析，就需要更精确地控制数据的获取。

3.2 多声道音频处理

需要注意的是，当使用 AnalyserNode 时，多声道输入会进行下混处理。如果想要分析单个声道，应该先使用 ChannelSplitter（这里不详细展开其具体使用，后续可根据需求进一步研究）。

3.3 性能优化建议

数据获取频率 ：根据实际需求调整数据获取的频率，避免不必要的频繁获取，以减少性能开销。
缓冲区管理 ：合理管理音频缓冲区，避免内存占用过高。例如，在处理大量音频数据时，及时释放不再使用的缓冲区。
算法选择 ：对于频域数据的计算，如 FFT 变换，可根据具体情况选择合适的算法和参数，以提高计算效率。

3.4 未来发展展望

随着 Web 技术的不断发展，Web Audio API 也在不断完善和扩展。未来可能会有更多的功能和特性加入，例如更高效的音频处理算法、更丰富的音频效果、更好的跨平台兼容性等。同时，与其他 Web 技术的结合也将更加紧密，为开发者提供更多的创意和应用场景。

4. 总结

4.1 核心要点回顾

AnalyserNode ：具有 smoothingTimeConstant 和 frequencyBinCount 等属性，提供了多种获取时域和频域数据的方法，通过加窗、FFT 变换、平滑处理和转换为分贝等步骤计算频域数据，可用于音频可视化等应用。
音频加载与播放 ：可使用 <audio> 元素进行简单音频播放，通过 MediaElementAudioSourceNode 将其集成到 Web Audio API 中，使用 decodeAudioData 方法加载音频文件数据。
综合应用 ：在实际应用中，要注意数据获取频率、多声道处理和性能优化等问题，同时关注 Web Audio API 的未来发展。

4.2 实践建议

对于想要深入学习和应用 Web Audio API 的开发者，建议多进行实践，尝试不同的音频源和处理方法，结合 HTML5 的其他特性（如 canvas 可视化），开发出更丰富、更有趣的音频应用。同时，关注社区动态，学习他人的优秀经验和代码，不断提升自己的技术水平。

4.3 最后总结

Web Audio API 为开发者提供了强大的音频处理能力，无论是简单的音频播放还是复杂的音频分析和可视化，都能通过合理的使用和配置实现。希望本文能帮助读者更好地理解和应用 Web Audio API，在 Web 开发中创造出精彩的音频体验。

以下是一个 mermaid 流程图，展示音频从加载到可视化的整体流程：

graph LR;
    A[音频文件] --> B[decodeAudioData 解码];
    B --> C[MediaElementAudioSourceNode 或其他源节点];
    C --> D[AnalyserNode];
    D --> E[获取时域或频域数据];
    E --> F[使用 canvas 进行可视化];

通过以上内容，我们全面了解了 Web Audio API 中音频分析、加载、播放与录制的相关知识和应用方法，希望能为你的 Web 音频开发之旅提供有力的支持。