<audio>到波形或频谱图像，无需在Chrome中播放</audio>

Question

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

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

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.我怀疑在OfflineAudioContext中也可能破坏AnalyserNode。

使用OfflineAudioContext可以“回放”整个声音文件，然后根据创建的输出缓冲区绘制画布。

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

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

编辑：

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