动感律动，肆意挥洒：H5录音音频可视化，倾听声波律动之美

前端

2024-02-10 23:48:50

音频可视化的艺术

音乐，是人类灵魂深处最原始、最直接的情感表达方式。而音频可视化，则是将这种抽象的情感以图形化的方式呈现出来，让听众能够同时用耳朵和眼睛来感受音乐的魅力。

音频可视化的手法有很多种，其中最为常见的就是波形图和频率谱图。波形图显示了声音信号随时间变化的幅度，而频率谱图则显示了声音信号中各个频率分量的能量分布。

H5录音音频可视化

随着HTML5技术的不断发展，在浏览器中进行音频可视化操作变得越来越容易。我们可以通过Web Audio API来获取音频数据，然后使用JavaScript来进行处理和绘制。

本篇文章中，我们将使用纯JavaScript代码来实现H5录音音频可视化。该功能将包含以下几个部分：

实时波形频谱绘制
频率直方图
音频播放控制

实时波形频谱绘制

实时波形频谱绘制是音频可视化中最常见的一种形式。它可以直观地显示出声音信号随时间变化的幅度。

要实现实时波形频谱绘制，我们需要先获取音频数据。我们可以通过Web Audio API的getUserMedia()方法来获取麦克风输入的音频数据。获取到音频数据后，我们需要对其进行傅里叶变换（FFT），然后将结果绘制到canvas上。

频率直方图

频率直方图可以显示出声音信号中各个频率分量的能量分布。它可以帮助我们了解声音的音色和特点。

要实现频率直方图，我们需要先对音频数据进行FFT，然后将结果按照频率范围划分为多个区间。每个区间的能量值就是该区间内所有频率分量的能量之和。最后，我们将每个区间的能量值绘制到canvas上，就得到了频率直方图。

音频播放控制

为了让用户能够方便地控制音频的播放，我们需要在页面上添加一些按钮。这些按钮可以用来控制音频的播放、暂停、停止和音量调节。

源码分享

本篇文章中实现的H5录音音频可视化功能的源码如下：

// frequency.histogram.view.js
// 绘制频率直方图

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制频率直方图
function drawHistogram(data) {
  // 计算每个区间的能量值
  const energies = [];
  for (let i = 0; i < data.length; i++) {
    energies.push(0);
    for (let j = 0; j < data[i].length; j++) {
      energies[i] += data[i][j] * data[i][j];
    }
  }

  // 归一化能量值
  const maxEnergy = Math.max(...energies);
  for (let i = 0; i < energies.length; i++) {
    energies[i] /= maxEnergy;
  }

  // 绘制频率直方图
  const width = canvas.width / energies.length;
  for (let i = 0; i < energies.length; i++) {
    const height = energies[i] * canvas.height;
    ctx.fillStyle = 'rgba(0, 255, 0, ' + energies[i] + ')';
    ctx.fillRect(i * width, canvas.height - height, width, height);
  }
}

// lib.fft.js
// 快速傅里叶变换

function fft(data) {
  const n = data.length;
  if (n <= 1) {
    return data;
  }

  // 计算中间值
  const half = Math.floor(n / 2);
  const even = fft(data.slice(0, half));
  const odd = fft(data.slice(half));

  // 合并结果
  const result = new Array(n);
  for (let i = 0; i < half; i++) {
    const angle = -2 * Math.PI * i / n;
    const cos = Math.cos(angle);
    const sin = Math.sin(angle);
    result[i] = even[i] + cos * odd[i] + sin * odd[i + half];
    result[i + half] = even[i] - cos * odd[i] - sin * odd[i + half];
  }

  return result;
}