应用 web audio api 完成音频可视化

2023年4月15日 307次阅读来源: 罗高

音频可视化完成以后真的很酷，虽然此次只是随着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的代码比较简朴，看看就好了。就不睁开讲了。