前端:音频可视化（H5+js版本）

news2024/10/5 15:45:04

一、效果展示

HTML5+JS实现一个简单的音频可视化

二、代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>音频可视化</title>
    <style></style>
  </head>
  <body>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      "
    >
      <div
        class="musicBox"
        style="position: relative; width: 500px; height: 500px"
      >
        <canvas
          id="audioCanvas"
          width="500"
          height="500"
          style="position: absolute; left: 0; top: 0"
        ></canvas
        ><svg
          t="1716202136861"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4458"
          width="68"
          height="68"
          style="
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          "
        >
          <path
            d="M701.6 196.53m-15 0a15 15 0 1 0 30 0 15 15 0 1 0-30 0Z"
            fill="#E159D3"
            p-id="4459"
          ></path>
          <path
            d="M956.29 310.21a482.39 482.39 0 1 0-847.9 452v120.36c0 71.4 58.42 130.76 129.82 130.1a127.79 127.79 0 0 0 100.44-49.85 120.4 120.4 0 0 0 21-103.43c-5.58-21.49-11.71-59-11.71-71.71S354 737.47 359.62 716a120.4 120.4 0 0 0-21-103.43 128.55 128.55 0 0 0-209.75 9.13c-20.91-64.82-25.25-135-11.25-205.6 28.7-144.71 172.14-286.19 317.16-313.27C690.37 55.1 914.24 250.88 914.24 498a402.4 402.4 0 0 1-19.36 123.71 128.55 128.55 0 0 0-209.74-9.13 120.4 120.4 0 0 0-21 103.43c5.58 21.49 11.71 59 11.71 71.71s-6.13 50.22-11.71 71.71a120.4 120.4 0 0 0 21 103.43 127.8 127.8 0 0 0 101.67 49.85 128.59 128.59 0 0 0 128.58-128.62V762.25a483 483 0 0 0 40.9-452z m-767.9 381.87c0-26.24 20.49-48.33 46.71-49.34a48.41 48.41 0 0 1 40.41 18.85 39.94 39.94 0 0 1 6.78 34.34c-5.84 22.48-14.29 68.12-14.29 91.85s8.45 69.37 14.29 91.85a39.94 39.94 0 0 1-6.78 34.37A48.38 48.38 0 0 1 237 932.86a48.64 48.64 0 0 1-48.64-48.64z m647 191.4c0 26.24-20.49 48.33-46.71 49.34a48.41 48.41 0 0 1-40.4-18.82 39.94 39.94 0 0 1-6.78-34.34c5.84-22.48 14.29-68.12 14.29-91.85s-8.45-69.37-14.29-91.85a39.94 39.94 0 0 1 6.78-34.34 48.41 48.41 0 0 1 40.41-18.85c26.22 1 46.71 23.1 46.71 49.34z"
            fill="#E159D3"
            p-id="4460"
          ></path>
          <path
            d="M651.51 154.09a371.39 371.39 0 0 0-419.35 100.28 373.69 373.69 0 0 0-30.07 39.56 15 15 0 1 0 25 16.52A341.48 341.48 0 0 1 512 157a339.17 339.17 0 0 1 128.23 24.93 15 15 0 1 0 11.29-27.79z"
            fill="#E159D3"
            p-id="4461"
          ></path>
          <path
            d="M456.91 668.17c-20.66 1.25-37.52 19.95-37.52 40.65v157.92c0 20.7 16.85 39.4 37.52 40.65a40 40 0 0 0 42.48-39.93V708.1a40 40 0 0 0-42.48-39.93zM563.91 698.12c-20.66 1.25-37.52 19.95-37.52 40.65v98c0 20.7 16.85 39.4 37.52 40.65a40 40 0 0 0 42.48-39.93V738a40 40 0 0 0-42.48-39.88z"
            fill="#48BCFF"
            p-id="4462"
          ></path>
        </svg>
      </div>

      <audio id="audio" src="./audio/游戏城大冒险.mp3" controls></audio>
    </div>
  </body>
  <script>
    //需要可视化的数据
    let audioArr;
    //我们需要一个音乐播放器和一个canvas进行显示
    const audioElement = document.getElementById("audio");
    const canvas = document.getElementById("audioCanvas");

    //canvas的一些基本设置
    const ctx = canvas.getContext("2d");
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 50; // 圆的半径

    //初始化
    let isInit = false;

    let analyser = null;

    // 当音乐播放
    audioElement.onplay = () => {
      if (!isInit) {
        isInit = true;
      }

      const audioContext = new AudioContext(); // 创建音频上下文
      const audioSrc = audioContext.createMediaElementSource(audioElement); // 创建音频源
      analyser = audioContext.createAnalyser(); // 创建分析器
      analyser.fftSize = 128; // 设置傅里叶变换的大小,影响线条密度
      audioArr = new Uint8Array(analyser.frequencyBinCount); // 创建一个无符号字节数组存储频率数据，该API参考ES6文档
      audioSrc.connect(analyser); // 连接音频源和分析器
      analyser.connect(audioContext.destination); // 连接分析器和音频目的地

      //动画开始
      animate();
    };

    // 绘制圆形
    const drawGradientCircle = () => {
      ctx.beginPath();
      // 创建一个从中心点向外的径向渐变
      const grd = ctx.createLinearGradient(
        centerX - radius,
        centerY - radius,
        centerX + radius,
        centerY + radius
      );
      grd.addColorStop("0", "purple");
      grd.addColorStop("0.3", "magenta");
      grd.addColorStop("0.5", "blue");
      grd.addColorStop("0.6", "green");
      grd.addColorStop("0.8", "yellow");
      grd.addColorStop(1, "red");

      ctx.strokeStyle = grd;

      ctx.arc(centerX, centerY, radius - 2, 0, Math.PI * 2); // 绘制一个完整的圆

      ctx.stroke(); // 画圆复制代码
    };

    //绘制线条
    const drawLinesFromCircle = () => {
      ctx.lineWidth = 2;

      //使用音频的频率数据绘制线条
      //为了美观，我们绘制两条线，一条是频率数据，另一条是对称的
      //也可以去使用其它的方式绘制线条
      audioArr.forEach((value, index) => {
        const baseAngle = (index / audioArr.length) * Math.PI * 2; // 基础角度
        const angle1 = baseAngle; // 第一条线的角度
        const angle2 = baseAngle + Math.PI; // 对称线的角度，相差π(180度)

        // 绘制第一条线
        {
          const endX1 = centerX + radius * Math.cos(angle1);
          const endY1 = centerY + radius * Math.sin(angle1);
          const startX1 = centerX + (radius + value * 0.4) * Math.cos(angle1); // 使用value控制长度
          const startY1 = centerY + (radius + value * 0.4) * Math.sin(angle1);

          ctx.beginPath();
          ctx.moveTo(startX1, startY1);
          ctx.lineTo(endX1, endY1);
          ctx.strokeStyle = `hsl(${index * 3.6}, 100%, 50%)`;
          ctx.stroke();
        }

        // 绘制对称的第二条线
        {
          const endX2 = centerX + radius * Math.cos(angle2);
          const endY2 = centerY + radius * Math.sin(angle2);
          const startX2 = centerX + (radius + value * 0.4) * Math.cos(angle2);
          const startY2 = centerY + (radius + value * 0.4) * Math.sin(angle2);

          ctx.beginPath();
          ctx.moveTo(startX2, startY2);
          ctx.lineTo(endX2, endY2);
          ctx.strokeStyle = `hsl(${
            (index + audioArr.length / 2) * 3.6
          }, 100%, 50%)`; // 调整颜色以保持对称性且有所区别
          ctx.stroke();
        }
      });
    };

    //播放动画
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
      if (!isInit) return;
      analyser.getByteFrequencyData(audioArr); // 获取频率数据
      drawGradientCircle(); // 绘制圆形
      drawLinesFromCircle(); // 绘制伸展的线条
      requestAnimationFrame(animate); // 重复绘制以创建动画效果
    };
  </script>
</html>