用原生 Audio API 实现一个千千静听

前言

哈喽，大家好，我是海怪。

最近看了一下钟文泽的 Macbook Pro 测评视频（唉，最近又想买电子产品了），他在测评音响的时候，点播了一首蔡琴的《渡口》。

当听到这首歌的时候，我真的是情不自禁地感叹： “爷青回！！”，想当年，第一次听这首歌的时候还是在 Windows XP 系统上的 千千静听 这个播放器里听到的，那时印象最深刻的就是里面的 音频可视化（频谱图） 了。

当我在发呆、无聊的时候，音频频谱图里的小浮块总能让我盯上一整天。而如今，在各大音乐软件中已很少看到这样的频谱图了。那今天就跟大家一起用原生的 Audio API 来实现这个频谱图吧。

项目已经放在 Github，也可以在 这里预览

由于原来的拟物风格实现太难实现了，只能做个粗糙的版本 😃

解决思路

首先我们要理解频谱图里的这些“长条”是什么意思。实际上这是音频里的 频率 Frequency，我们常说的低音炮和美高音就是指在声音在低频区和高频区的表现。

了解了音频频率后，我们可以先理清一下这个小玩具的实现思路：

从音频获取音频流 stream，通过中间的解析器分析出频率值 freqency，将这些频率值通过“长条”的方式绘制在 <canvas> 上，然后以此不断循环就可以实现这样的频谱动态图了。

根据上面的思路，我们首先要准备好这样的页面结构：

const Player: FC = () => {
   
  const {
   visualize} = useAudioVisualization('#canvas', 50);

  const audioRef = useRef<HTMLAudioElement>(null);

  const onPlay = async () => {
   
    if (audioRef.current) {
   
      await audioRef.current.play();
      const stream = (audioRef.current as any).captureStream();
      visualize(stream)
    }
  }

  return (
    <div className={
   styles.player}>
      <div className={
   styles.canvas}>
        <canvas id="canvas" width={
   500} height={
   300}/>
      </div>
      <div className={
   styles.controls}>
        <audio ref={
   audioRef} src={
   audioUrl} onPlay={
   onPlay} controls />
      </div>
    </div>
  )
}

useAudioVisualization

这里使用 React Hook 的方式来封装可视化逻辑：

const useAudioVisualization = (selector: string, length = 50) => {
   
  // 开始可视化
  const visualize = (stream: MediaStream) => {
   
  
  }

  return {
    visualize };
}

visualize

在拿到音频的流之后，我们就可以调用 Audio API 来创建解析器并分析音频了。

// 开始可视化
const visualize = (stream: MediaStream) => {
   
  const canvasEl