音频可视化

加班是不可能的，除非双倍日工资

已于 2024-08-15 08:50:10 修改

阅读量311

点赞数 7

文章标签：音视频 javascript css3

于 2024-08-15 08:49:04 首次发布

本文链接：https://blog.csdn.net/weixin_45591772/article/details/141205668

版权

能跟着音乐节奏实时起伏的音频可视化效果

能跟着音乐节奏实时起伏的效果,想必你见过不少,但是怎么实现呢? 看起来很复杂,但是代码却只有不超过20行的代码就可以实现,只需要js 以及 html 基础以及 canvas 就能实现.
那么废话话不多说先上效果图
在这里插入图片描述

下面是实现过程以及步骤

html部分

<body>
  <canvas id="myCanvas"></canvas>
  <audio src="./赵希予 - 星光派对.mp3" controls id="myAudio"></audio>
  <script src="./音频可视化.js"></script>
</body>

css部分

 <style>
    #myCanvas {
      position: fixed;
      top: 0;
      left: 0;
      /* width: 100%; */
      background-color: black;
    }

    #myAudio {
      position: absolute;
      top: 54%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>

js 部分

// 获取元素
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let audioEle = document.getElementById("myAudio");
// 初始化 画布
function initCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight / 2;
}

initCanvas()

// 点击播放  
let isInit = false;
let dataArray, analyser;
audioEle.onplay = function () {

    if (isInit) {
        return
    }
    // 初始化  Web Audio API 接口
    const aduCtx = new AudioContext(); // 创建音频上下文
    const track = aduCtx.createMediaElementSource(audioEle); // 创建音频源节点
    analyser = aduCtx.createAnalyser(); //创建分析器节点 暴露音频时间和频率数据，以及创建数据可视化。
    // 设置分析器窗口
    analyser.fftSize = 512;
    // 数组 用于装
    dataArray = new Uint8Array(analyser.frequencyBinCount); // 512 / 2
    // 音频节点连接 分析器节点
    track.connect(analyser);
    // 分析器 连接到输出设备
    analyser.connect(aduCtx.destination);

    // 分析器分析

    isInit = true;
}
// 波形绘制
function draw() {
    requestAnimationFrame(draw);// 执行动画
    // 清空画布
    const { width, height } = canvas;
    ctx.clearRect(0, 0, width, height);
    if (!isInit) {
        return
    }
    //  分析器分析数据到数组
    analyser.getByteFrequencyData(dataArray)
    // 
    let length = dataArray.length / 2.7;
    let barW = width / length / 2;
    // 设置颜色 
    ctx.fillStyle = '#78c5F7';
    for (let i = 0; i < length; i++) {
        const data = dataArray[i]; // <256
        let barH = (data / 255) * height;
        const x1 = i * barW + width / 2;
        const x2 = width / 2 - (i + 1) * barW;
        const y = height - barH;
        ctx.fillRect(x1, y, barW - 2, barH);
        ctx.fillRect(x2, y, barW - 2, barH)
    }


}

draw();

// 优化 
window.addEventListener('resize', (e) => {
    throttle(initCanvas)()
});

// 节流
function throttle(fn, wait = 500) {
    let timer = null
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            }, wait);
        }
    }
}