<audio> 转换为波形或频谱图图像，无需在 Chrome 中播放

Question

在 Chrome 扩展程序中，是否可以仅基于 <audio> 标记的 .wav 文件 URL 创建波形或频谱图图像（或画布）元素？

我认为解决这个问题需要多个步骤：

1. 加载声音文件数据。
2. 将数据转换为可用于绘图的格式，可能是一组样本值，类似于soxformat 的.dat 格式。
3. 生成图像或在画布上绘图。

请提供 JavaScript 代码来转这个：

<audio src="http://goo.gl/hWyNYu" controls />

进入这个：

这需要在不播放音频的情况下完成，而不是 existing solutions 并且不使用 server-side solutions。

在这个过程中，这个问题不是a question about a specific step，而是寻求完整代码的完整答案，以便任何人都可以先测试它，然后再理解它。

Answer 1

嗯，理论上，您应该能够使用那些现有的客户端解决方案而无需播放音频，使用 OfflineAudioContext。不幸的是，这些解决方案都使用 ScriptProcessorNode，据我所知，在 OfflineAudioContext 中使用 ScriptProcessorNode 时现有的实现会被破坏，not likely to be fixed. 我怀疑 AnalyserNode 也可能在 OfflineAudioContext 中被破坏。

使用 OfflineAudioContext 来“播放”整个声音文件，然后根据创建的输出缓冲区绘制画布可能会起作用。

或者您可以使用常规的 AudioContext，但要确保输出听不到声音（例如，将声音通过增益为零的增益节点传送）。这真的很难看、很慢，并且会干扰您页面上任何其他 Web Audio API 的使用。

您也可以尝试将整个文件作为二进制 blob 提取到 ArrayBuffer 中，然后自行解析。 WAV 文件格式并不是那么复杂（或者您可以找到开源代码来执行此操作）。如果您想以这种方式处理 MP3 等压缩格式，您肯定不想从头开始编写解码器。

编辑：

我认为上面基于网络音频的解决方案太复杂了。无论如何，您必须设置一个 AudioBuffer 并使用 decodeAudioData 将音频解码到其中。完成后，甚至不需要创建 AudioBufferSourceNode。您可以通过调用 getChannelData 直接从 AudioBuffer 中获取音频数据。