音乐律动动画效果，轻松实现音乐可视化

前端

2023-11-30 12:50:58

前言

前两天在网易云听歌的时候，看到有个功能叫鲸鱼音效，点进去长下面这个样子。

[图片]鲸鱼音效音乐律动动画效果

这是一个很常见的音乐律动动画，在音乐播放的过程中，CD 周围的曲线抖动，给听者带来一些听觉视觉上的双重冲击。

今天尝试用代码来实现一个【类似】的效果，着急的朋友可以跳过文章，直接查看最终效果。喜欢的朋友不要忘记点赞和评论支持一下。

实现原理

音乐律动动画效果的实现原理很简单，就是通过获取音乐的频谱数据，然后根据频谱数据来控制动画的运动。

频谱数据是反映声音频率强度的图表，它可以将声音分解成不同的频率分量，并显示出每个频率分量的强度。

我们可以通过使用傅里叶变换来获取音乐的频谱数据，傅里叶变换是一种将信号分解成不同频率分量的数学方法。

代码实现

下面是使用 JavaScript 实现音乐律动动画效果的代码：

// 获取音乐频谱数据
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();

// 将音频源连接到分析器
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);

// 获取频谱数据
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// 创建动画
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 添加画布到页面中
document.body.appendChild(canvas);

// 渲染动画
function render() {
  // 获取频谱数据
  analyser.getByteFrequencyData(dataArray);

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制频谱
  for (let i = 0; i < bufferLength; i++) {
    // 获取频谱数据的强度
    const value = dataArray[i];

    // 绘制矩形
    ctx.fillStyle = `rgb(0, ${value}, 0)`;
    ctx.fillRect(i, canvas.height - value, 1, value);
  }

  // 请求下一次渲染
  requestAnimationFrame(render);
}

// 启动动画
render();