声学时域频谱图(时频图)又叫声谱图：表示在采样时间内内整个频域范围内的数值强度变化，通常横坐标表示采样音源总时长，纵坐标表示采样的频域范围，人耳能够洞悉2HZ-20KHZ的振动变化，反馈到人耳则表现为低音和高频的刺声逐渐变化的声音，然而自然界声音纷繁复杂，所以在每个时刻每个频域范围内的不同频率所表现的声音强度有所不同，最终叠加形成声音，而对于声音强度的变化则使用色度进行区分。如下图所示
关于如何绘制这种图像，我们应该思考以下几个问题
- 对于横轴和纵轴我们应该如何绘制
- 如何处理不同响度的渐变效果
对于横轴和纵轴我们应该如何绘制
首先针对横轴和纵轴的处理，我们需要确定每个图源表示的数据总量，以及图幅的大小，x轴表示整个音源播放的总时长，并将其平分为多少个区域，每个区域所占用时间片段对应的像素大小，对于纵轴，我们始终需要表示0-20khz的范围，所以反应到图像上，我们需要确定每个像素所表示的具体单位分量。 假设我们的音源在3分钟（一般歌曲的平均时长），我们需要展示的声谱的范围在800x500像素的矩形区域中。
x轴的分辨率
得到每个像素点表示的时间分辨率为225ms
y轴的分辨率
假设样板采集的最大声音频率为20khz，得到每个像素点表示的频率为40hz
图示为
如何处理不同响度的渐变效果
如果按照上面的方式绘制声谱图，会得到一个纯色的图片，此时我们需要根据采集到的响度数据来填充到具体的像素点中。我们假设默认响度从低到高分别为蓝到黄的渐变色，根据并根据RGB来对相应的色度进行填充，然后将渐进值与最终值进行混合得到一个任意响度的中间色。
最终效果如下
左侧为canvas绘制，右侧为ffmpeg生成的分辨率更高的数据段;虽然左侧比较模糊，但是绘制的数据与专业软件生成的大体上区别不大。
