实现音频可视化

这里主要使用了web audio api和canvas来实现的（当然也可以使用svg，因为canvas会有失帧的情况，svg的写法如果有大佬会的话，可以滴滴我一下）

背景

最近听音乐的时候，看到各种动效，突然好奇这些音频数据是如何获取并展示出来的，于是花了几天功夫去研究相关的内容，这里只是给大家一些代码实例，具体要看懂、看明白，还是建议大家大家结合相关api来阅读这篇文章。
参考资料地址：Web Audio API – Web API 接口参考 | MDN (mozilla.org)

实现思路

首先画肯定是用canvas去画，关于音频的相关数据(如频率、波形)如何去获取，需要去获取相关audio的DOM 或通过请求处理去拿到相关的音频数据，然后通过Web Audio API 提供相关的方法来实现。(当然还要考虑要音频请求跨域的问题，留在最后。)

一个简单而典型的 web audio 流程如下(取自MDN)：


1.创建音频上下文<br>
2.在音频上下文里创建源 — 例如 <audio>, 振荡器，流<br>
3.创建效果节点，例如混响、双二阶滤波器、平移、压缩<br>
4.为音频选择一个目的地，例如你的系统扬声器<br>
5.连接源到效果器，对目的地进行效果输出<br>
1.创建音频上下文<br>
2.在音频上下文里创建源 — 例如 <audio>, 振荡器，流<br>
3.创建效果节点，例如混响、双二阶滤波器、平移、压缩<br>
4.为音频选择一个目的地，例如你的系统扬声器<br>
5.连接源到效果器，对目的地进行效果输出<br>
1.创建音频上下文<br>
2.在音频上下文里创建源 — 例如 <audio>, 振荡器，流<br>
3.创建效果节点，例如混响、双二阶滤波器、平移、压缩<br>
4.为音频选择一个目的地，例如你的系统扬声器<br>
5.连接源到效果器，对目的地进行效果输出<br>

上代码


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #000;
      }
      div {
        width: 100%;
        border-top: 1px solid #fff;
        padding-top: 50px;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <div>
      <audio src="./1.mp3" controls></audio>
    </div>
    <script>
      // 获取音频组件
      const audioEle = document.querySelector("audio");
      // 获取canvas元素
      const cvs = document.querySelector("canvas");
      // 创建canvas上下文
      const ctx = cvs.getContext("2d");
      // 初始化canvas的尺寸
      function initCvs() {
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight / 2;
      }
      initCvs();
      // 音频的步骤 音频源 ==》分析器 ===》输出设备
      //是否初始化
      let isInit = false;
      let dataArray, analyser;
      audioEle.onplay = function () {
        if (isInit) return;
        // 初始化
        const audCtx = new AudioContext(); //创建一个音频上下文
        const source = audCtx.createMediaElementSource(audioEle); //创建音频源节点
        analyser = audCtx.createAnalyser(); //拿到分析器节点
        analyser.fftSize = 512; // 时域图变换的窗口大小（越大越细腻）默认2048
        // 创建一个数组，接受分析器分析回来的数据
        dataArray = new Uint8Array(analyser.frequencyBinCount); // 数组每一项都是一个整数 接收数组的长度，因为快速傅里叶变换是对称的，所以除以2
        source.connect(analyser); // 将音频源节点链接到输出设备，否则会没声音哦。
        analyser.connect(audCtx.destination); // 把分析器节点了解到输出设备
        isInit = true;
      };
      // 绘制，把分析出来的波形绘制到canvas上
      function draw() {
        requestAnimationFrame(draw);
        // 清空画布
        const { width, height } = cvs;
        ctx.clearRect(0, 0, width, height);
        // 先判断音频组件有没有初始化
        if (!isInit) return;
        // 让分析器节点分析出数据到数组中
        analyser.getByteFrequencyData(dataArray);
        const len = dataArray.length / 2.5;
        const barWidth = width / len / 2; // 每一个的宽度
        ctx.fillStyle = "#78C5F7";
        for (let i = 0; i < len; i++) {
          const data = dataArray[i]; // <256
          const barHeight = (data / 255) * height; // 每一个的高度
          const x1 = i * barWidth + width / 2;
          const x2 = width / 2 - (i + 1) * barWidth;
          const y = height - barHeight;
          ctx.fillRect(x1, y, barWidth - 2, barHeight);
          ctx.fillRect(x2, y, barWidth - 2, barHeight);
        }
      }
      draw();
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #000;
      }
      div {
        width: 100%;
        border-top: 1px solid #fff;
        padding-top: 50px;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <div>
      <audio src="./1.mp3" controls></audio>
    </div>
    <script>
      // 获取音频组件
      const audioEle = document.querySelector("audio");
      // 获取canvas元素
      const cvs = document.querySelector("canvas");
      // 创建canvas上下文
      const ctx = cvs.getContext("2d");

      // 初始化canvas的尺寸
      function initCvs() {
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight / 2;
      }
      initCvs();

      // 音频的步骤 音频源 ==》分析器 ===》输出设备

      //是否初始化
      let isInit = false;
      let dataArray, analyser;
      audioEle.onplay = function () {
        if (isInit) return;
        // 初始化
        const audCtx = new AudioContext(); //创建一个音频上下文
        const source = audCtx.createMediaElementSource(audioEle); //创建音频源节点
        analyser = audCtx.createAnalyser(); //拿到分析器节点
        analyser.fftSize = 512; // 时域图变换的窗口大小（越大越细腻）默认2048
        // 创建一个数组，接受分析器分析回来的数据
        dataArray = new Uint8Array(analyser.frequencyBinCount); // 数组每一项都是一个整数 接收数组的长度，因为快速傅里叶变换是对称的，所以除以2
        source.connect(analyser); // 将音频源节点链接到输出设备，否则会没声音哦。
        analyser.connect(audCtx.destination); // 把分析器节点了解到输出设备
        isInit = true;
      };

      // 绘制，把分析出来的波形绘制到canvas上
      function draw() {
        requestAnimationFrame(draw);
        // 清空画布
        const { width, height } = cvs;
        ctx.clearRect(0, 0, width, height);
        // 先判断音频组件有没有初始化
        if (!isInit) return;
        // 让分析器节点分析出数据到数组中
        analyser.getByteFrequencyData(dataArray);
        const len = dataArray.length / 2.5;
        const barWidth = width / len / 2; // 每一个的宽度
        ctx.fillStyle = "#78C5F7";
        for (let i = 0; i < len; i++) {
          const data = dataArray[i]; // <256
          const barHeight = (data / 255) * height; // 每一个的高度
          const x1 = i * barWidth + width / 2;
          const x2 = width / 2 - (i + 1) * barWidth;
          const y = height - barHeight;
          ctx.fillRect(x1, y, barWidth - 2, barHeight);
          ctx.fillRect(x2, y, barWidth - 2, barHeight);
        }
      }
      draw();
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #000;
      }
      div {
        width: 100%;
        border-top: 1px solid #fff;
        padding-top: 50px;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <div>
      <audio src="./1.mp3" controls></audio>
    </div>
    <script>
      // 获取音频组件
      const audioEle = document.querySelector("audio");
      // 获取canvas元素
      const cvs = document.querySelector("canvas");
      // 创建canvas上下文
      const ctx = cvs.getContext("2d");

      // 初始化canvas的尺寸
      function initCvs() {
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight / 2;
      }
      initCvs();

      // 音频的步骤 音频源 ==》分析器 ===》输出设备

      //是否初始化
      let isInit = false;
      let dataArray, analyser;
      audioEle.onplay = function () {
        if (isInit) return;
        // 初始化
        const audCtx = new AudioContext(); //创建一个音频上下文
        const source = audCtx.createMediaElementSource(audioEle); //创建音频源节点
        analyser = audCtx.createAnalyser(); //拿到分析器节点
        analyser.fftSize = 512; // 时域图变换的窗口大小（越大越细腻）默认2048
        // 创建一个数组，接受分析器分析回来的数据
        dataArray = new Uint8Array(analyser.frequencyBinCount); // 数组每一项都是一个整数 接收数组的长度，因为快速傅里叶变换是对称的，所以除以2
        source.connect(analyser); // 将音频源节点链接到输出设备，否则会没声音哦。
        analyser.connect(audCtx.destination); // 把分析器节点了解到输出设备
        isInit = true;
      };

      // 绘制，把分析出来的波形绘制到canvas上
      function draw() {
        requestAnimationFrame(draw);
        // 清空画布
        const { width, height } = cvs;
        ctx.clearRect(0, 0, width, height);
        // 先判断音频组件有没有初始化
        if (!isInit) return;
        // 让分析器节点分析出数据到数组中
        analyser.getByteFrequencyData(dataArray);
        const len = dataArray.length / 2.5;
        const barWidth = width / len / 2; // 每一个的宽度
        ctx.fillStyle = "#78C5F7";
        for (let i = 0; i < len; i++) {
          const data = dataArray[i]; // <256
          const barHeight = (data / 255) * height; // 每一个的高度
          const x1 = i * barWidth + width / 2;
          const x2 = width / 2 - (i + 1) * barWidth;
          const y = height - barHeight;
          ctx.fillRect(x1, y, barWidth - 2, barHeight);
          ctx.fillRect(x2, y, barWidth - 2, barHeight);
        }
      }
      draw();
    </script>
  </body>
</html>