利用 web audio api 实现音频可视化

音频可视化实现之后真的很酷，虽然这次只是跟着MDN上的教程学习了一下，照着Demo敲了一遍而已。但收获颇多，记录于此。

web audio api

先来感受一下 web audio api 的基础概念，下面截取一段MDN上的介绍。具体的请移步文档

Web audio 概念与使用

Web Audio API使用户可以在音频上下文(AudioContext)中进行音频操作，具有模块化路由的特点。在音频节点上操作进行基础的音频，它们连接在一起构成音频路由图。即使在单个上下文中也支持多源，尽管这些音频源具有多种不同类型通道布局。这种模块化设计提供了灵活创建动态效果的复合音频的方法。

在跟着文档和Demo走了一遍之后，我自己的理解就是，我们可以通过const audioCtx = new (window.AudioContext || window.webkitAudioContext)()这样的形式来获取/创建一个音频上下文，这个audioCtx中有许多可供使用的属性方法。这里只会稍微描述一下实现音频可视化要用的属性。具体的可以参考文档。

其实这个AudioContext能做的事不光是音频可视化。首先它支持获取音频的输入，也就是接下来会提到的定义音频源。然后它能够定义音效，或许你要是知道怎么把一段声音做成电音的算法，那你可以试试，然后教教我。哈哈哈，当然一些基础的控制音频源的输出音量这些都是有的。

接下来就继续谈音频可是化啦

音频可视化

首页我们需要选择一个用来展示音频的工具，这里其实用的就是Canvas，当然如果你会用Svg也可以尝试着做一下。这里我不会svg，嗯。打算学（but, who knows when）。

那么这里就只剩下用来显示的数据了。

前面提到过，AudioContext中有许多属性和方法，其中就有createAnalyser()方法，可以供我们获取AnalyserNode这个对象。这个对象会提供给我们用来显示（可以被我们处理成用来显示的）的所需要的数据。

AnalyserNode

这里还是得简单提一下AnalyserNode，我们接下来需要用到它的几个属性和方法

AnalyserNode.fftSize
一个无符号长整形(unsigned long)的值, 用于确定频域的 FFT (快速傅里叶变换) 的大小。
AnalyserNode.getByteFrequencyData()
将当前频域数据拷贝进Uint8Array数组（无符号字节数组）。
AnalyserNode.getByteTimeDomainData()
将当前波形，或者时域数据拷贝进 Uint8Array数组（无符号字节数组）。

这里直接copy了MDN的内容。然后我再根据自己的理解来描述一下。

AnalyserNode.fftSize
首先我们可以通过设置AnalyserNode.fftSize来控制将要用来显示的数据（数组，这里后面会处理成数组）的个数（长度），简单点说就是，如果我们想用柱状图来显示数据，fftSize设置的越大，那我们显示的柱子的数量就会越多。反之同理。不过这个值是有范围的，并且必须是2的n次幂。范围：[32, 32768]，超出或小于会报错。
AnalyserNode.getByteFrequencyData()
这个在文档中描述是获取当前频域的数据，我理解成就是如果要显示成柱状图的形式，那么就用这个。因为我试过了用getByteTimeDomainData结果并不是很好。因为getByteTimeDomainData是用用来展示波形的，这里我理解的就是文档的字面意思。不展开描述

好的，这里要用到的关键的基础知识介绍完毕。接下来就是要做事了，直接上代码了。

实现一下

接下来是一些供描述的代码，具体的代码在我的Github上，其实直接看MDN提供的Demo的源代码也行。

// 获取页面中的audio对象
const myAudio = document.querySelector('audio')
// 获取web audio 上下文对象
const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
// 获取声音源
const source = audioCtx.createMediaElementSource(myAudio)
// 获取分析对象
const analyser = audioCtx.createAnalyser()
// 设置fftSize
analyser.fftSize = 1024
const bufferLength = analyser.fftSize
// 因为这里analyser返回的数据js不能直接使用，所以要通过Uint8Array来转换一下，让js认识一下
const dataArray = new Uint8Array(bufferLength)
// 连接解析器
source.connect(analyser)
// 输出音频
source.connect(audioCtx.destination)

以上就已经可以获取当前audio对象所播放音频的可供我们js使用的数据了，话有点绕，其实这里要用到的就是这个daraArray，我们需要在接下来编写canvas的代码中用到这个数组中的数据。

画重点

这里我踩了个坑，我一开始没写source.connect(audioCtx.destination)便运行了上面剩余的代码，发现页面没有声音，但是我如果不写这些代码。直接用audio标签autoplay，声音是很洪亮的。但是用了上面的代码就是没声音。

然后我注意到Demo中还有一句source.connect(audioCtx.destination)我没写。加上之后，确实出了声音。于是我看了一下文档得知，这个是用来定义音频目的地的。也就是说，在我们把音频源传入AudioContext之后，这个音频源就被AudioContext托管了。然后AudioContext并不会自动播放声音，这里需要手动设置一下音频的归属地（通常是输出到你的扬声器）

那么接下来就是把数据显示出来了，这里我直接粘贴处理canvas的代码了（困了，现在半夜12:13）

const draw = () => {
  // 获取当前声音的波形；将当前波形，或者时域数据拷贝进 Uint8Array数组（无符号字节数组）
  analyser.getByteTimeDomainData(dataArray)
  ctx.clearRect(0, 0, W, H)
  ctx.fillStyle = 'rgb(200,200,200)'
  ctx.fillRect(0, 0, W, H)
  ctx.strokeStyle = 'rgb(0,0,0)'
  ctx.beginPath()
  const sliceWidth = W * 1.0 / bufferLength
  let x = 0
  for (let i = 0; i < bufferLength; i++) {
    let v = dataArray[i] / 128.0
    let y = v * H / 2
    if (i === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
    x += sliceWidth
  }
  ctx.lineTo(W, H / 2)
  ctx.stroke()
  requestAnimationFrame(draw)
}

const draw2 = () => {
  // 获取当前频域数据；将当前频域数据拷贝进Uint8Array数组（无符号字节数组）
  analyser.getByteTimeDomainData(dataArray)
  ctx.clearRect(0, 0, W, H)
  ctx.fillStyle = 'rgb(0,0,0)'
  ctx.fillRect(0, 0, W, H)

  const barWidth = (W / bufferLength) * 2.5
  let barHeight
  let x = 0

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i] / 2
    ctx.fillStyle = `rgb(${barHeight + 100},50,50)`
    ctx.fillRect(x, H - barHeight, barWidth, barHeight)
    x += barWidth + 1
  }

  requestAnimationFrame(draw2)
}

这里有两个方法，分别：draw是用来显示波形的，draw2是可以显示成柱状图的样子，我个人更喜欢draw2画出来的样子。

因为这次是分享web audio api，而且上面canvas的代码比较简单，看看就好了。就不展开讲了。