基于WebAudio API的频率图实现

SunskyXH -

这个需求来自于小宇宙Studio的试听页面：试听页面本身除了需要支持播放之外，还有着倍速播放以及展示频率图的需求。好在WebAudio API本身内置的功能足以覆盖这些需求。

音频播放部分

浏览器内置播放音频有两种方式，一是使用html5标准中的<audio>标签内置的播放功能，二则是通过WebAudio API来播放。

WebAudio提供了一系列处理音频的能力。在音频处理方面，只要是在某个AudioContext中的Node就拥有着从上一个Node中拿到采样并且处理传递给下一个Node的能力；WebAudio API也有着多种AudioSourceNode，可以通过Stream、Buffer或者MediaElement创建出对应的AudioSourceNode。

在目前的场景下，需要播放的音频是通过URL下载的，因此我们可以通过<audio>标签来完成下载以及解码音频的工作，之后可以通过MediaElementAudioSourceNode来获取解码之后的数据。大致代码如下：

const audioElement: HTMLAudioElement = /* 获取到audio标签 */
const audioContext = new AudioContext()
const sourceNode = MediaElementSourceNode(audioElement)
sourceNode.connect(audioContext.destination)

这样以来，只要触发audio标签的播放，音频的数据不会直接流向正常的播放流程，而且发送到了我们的AudioContext中，这里我们直接将source node和AudioContext的destination相连，音频数据最终就输出到了声卡等其他地方变成声音播放了出来；使用audio标签作为音频的来源还有一个好处就是我们可以使用audio标签自带的诸如playback rate之类的控制，这样就不需要自己重复实现一次了。

获取频率数据

WebAudio API内置了AnalyserNode ，能够对输入的sample数据进行一些分析，例如能进行快速傅立叶变换从而获得输入sample的实时频率以及时域信息。只要指定了fftSize 然后调用对应API时传入一个Uint8Array 就可以获取这些数据了。简单的实现如下：

cconst audioElement: HTMLAudioElement = /* 获取到audio标签 */
const audioContext = new AudioContext()
const sourceNode = audioContext.createMediaElementSource(audioElement)
const analyserNode = audioContext.createAnalyser()
analyserNode.fftSize = 1024

// sourceNode -> analyserNode -> audiocContext.destination
sourceNode.connect(analyserNode)
analyserNode.connect(audioContext.destination)

const LENGTH = analyserNode.frequencyBinCount
const dataArray = new Uint8Array(LENGTH) 

// 每调用一次就会将当前的实时频率数据放入dataArray中
analyserNode.getByteFrequencyData(dataArray)

绘制频率图

有了频率数据后，就可以开始着手绘制频率图了。音频在播放时，每一个瞬间获取到的频率/时域数据都是不一样的，因此我们可以在requestAnimationFrame 函数的回调中通过getByteFrequencyData获取一次数据，并且基于获取到的Uint8Array来进行绘制；在音频领域一般频率信息是使用直方图进行绘制的，恰好小宇宙Studio的波形样式一定程度上也能看做直方图。

如同剪辑页面波形图在绘制上做的优化，这里也可以采用先绘制一堆矩形的path然后一次填充的方式来绘图，这样每一次绘制的步骤比较少；同时由于frequencyBinCount (其值为fftSize的一半）可能会比较大，而这里的频率图对精度没有要求，我们可以将数据分组求平均值然后使用平均值作为矩形的高度。

下面是绘制的代码：

const ctx = canvas.getContext('2d')
// BAR_WIDTH为矩形条的宽度，BAR_GAP为两个矩形条之间的间隔，均为定值
const barCount = Math.floor(CANVAS_WIDTH / (BAR_WIDTH + BAR_GAP))

const draw = () => {
  analyserNode.getByteFrequencyData(dataArray)
  const chunks = chunk(Array.from(dataArray), dataArray.length / barCount)
  
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
  ctx.fillStyle = BAR_COLOR
  ctx.beginPath()
  
  for (let i = 0; i < chunks.length; i++) {
    const chunk = chunks[i]
    const x = i * (BAR_WIDTH + BAR_GAP)
    const avgFrequency = sum(chunk) / chunk.length
    const barHeight = calcBarHeight(avgFrequency, CANVAS_HEIGHT)
    const y = CANVAS_HEIGHT - barHeight
    ctx.rect(x, y / 2, BAR_WIDTH, barHeight)
  }
  
  ctx.closePath()
  ctx.fill()
  requestAnimationFrame(draw)
}

requestAnimationFrame(draw)

最后实际会发现效果不错，浏览器每一帧都会使用当前的实时绘制出图像，频率数据会随着音频实时变化，因此图像也会随着音频实时变化，自然又流畅。

附上这一套代码的架构图以及实际效果图：

试听页面频率图架构
频率图实际效果

如果你想亲自看看上面提到的频率图，可以访问这个页面 (密码是QUHY，点击右上角e可以切换到波形模式)。美中不足的是，由于部分WebKit内核WebAudio播放音频时会有杂音和卡顿，所以在这些浏览器（就不点名批评是谁了）上为了收听体验我们选择fallback到了通过audio播放，因此是没有显示波形图的。

最后， AnalyserNode 提供的能力除了上面提到的getByteFrequencyData之外还有其他很多可以使用的API，读到这里的大家可以试试使用 getByteTimeDomainData 获取时域信息，从而绘制类似示波器的图案。