web audio

我们在听音乐的时候，可能会注意到音乐播放器里面总是会有各种各样，跟随着音乐节拍律动的特效。但是有没有思考过它是如何实现的呢？今天就来研究研究这个主题——音频可视化。 音频可视化的应用非常广泛，凡是将音频的信息通过视觉方式呈现出来的，都是音频可视化。比如我们使用录音软件时，呈现的曲线 或者测试设备麦克风🎤的时候显示的音量 甚至一些大型的音乐喷泉，舞台灯光效果等都可以算是音频可视化。 web 音频可视化依赖于 web audio 提供的 api，我在《Web Audio 概览》中已经分享过常用 api 的概念和用法，这篇文章就不再赘述。 声音信号 在写代码之前，我们先了解一下声音信号，以及可视化依赖的基础理论知识。 我们都知道，声音是通过物体振动产生的，它在空气中以波的形式传播，也称为声波。声音有三个要素：响度、音调、音色。 原始的声音信号可以看作是一个连续的信号，我们可以通过一个余弦函数来研究声音信号。下面是余弦函数 y = cos(x) 的时域图像。 上面的图像中，标出了周期和振幅，它们分别对应了三要素中的音调和响度： 周期（通常转换成频率使用）越短，频率越高则音调越高 振幅越大，响度就越大 还有一个音色，从时域分析（后面会从频域分析），它与波形有关。比如下面这个函数，他的波形和前一个看起来不太一样，对应的播放出来音色也会有区别。 声音信号的三个要素都携带了特定的信息，而当我们听音乐的时候，优美的旋律通常都是音调的组合、变化，所以对于音乐来说，声音信号的频率携带了音乐的关键信息。 所以在音频可视化的应用场景中，以频率的可视化居多，随着音乐节奏律动的效果也大都是基于声音的频率制作的。这篇文章也主要基于频率来介绍音频可视化。 那么我们应该如何使用这个频率呢？上面的图例是一个基本的模型，他只有一个频率，仅依靠这个数据是无法实现丰富的动效的，而声音的波形也会非常复杂，并且随时间变化。这时候就需要使用傅立叶变换了。 傅立叶变换 对于傅立叶变换，有兴趣的可以深入学习，这里我们只需要知道它是做什么的即可。 傅立叶变换（Fourier transform）是一种线性积分变换，用于信号在时域时域（或空域）和频域之间的变换，在(物理学)和(工程学)中有许多应用。 下面的图片可以看到，一个方波信号被拆分成多个正弦信号的叠加，这实际上涉及到了傅立叶变换的前置知识——傅里叶级数。 🔼图片来自：维基百科 上面引用了维基百科的例子，同时我找了一个静态的图片来理解傅立叶变换。它的作用就是通过一系列数学变换，得到一个函数的频域图像（频谱），频域图像即以频率为横坐标，系数为纵坐标的图形。 🔼图片来自：维基百科 通过傅立叶变换，我们就可以获得声音信号中包含的不同成分（谐波分量）的频率，也就是频谱，然后就可以使用频谱来制作动效了。 扩展：前面说到的音色，从频域分析，除了基波频率外，其它谐波分量不同，导致了音色的差异。它反映到时域就是波的形状差别。 获取音频的频谱 大概了解了傅立叶变换后，我们来看一下如何获取一个音频的频谱数据。web audio 提供了一个 AnalyserNode，它是 AudioNode 中的一种，我们可以使用 audioContext.createAnalyser() 来创建这个节点。 const ac = new AudioContext(); // 创建音频分析节点 const analyser = ac.createAnalyser(); analyser.fftSize = 2048; // 使用正弦波做示例 const source = ac.createOscillator(); source.type = 'sine' source....

Web Audio提供了一个强大的音频处理系统，在我们现有的业务场景中，很少有使用到Web Audio，很多时候用到也仅限于播放一段音频。 除此之外，还能实现丰富的功能，比如：可视化、音色合成器、动态混音、声音特效、3D空间音频、均衡器、环境混响等，可以应用在音乐播放器、电子音乐软件、游戏音效、音乐游戏、直播互动等领域。 这篇文章是我在学习Web Audio的过程中写的一些总结和Demo，简单介绍一些API基础用法。 文章中所有示例：https://web-audio.johnsonlee.site/ AudioContext AudioContext为音频处理提供一个上下文环境，相当于一个中央控制器，控制着音频路由图中的各个音频模块。 在开始音频处理之前，都需要创建一个AudioContext实例，并且可以全局共享同一个。所有（相关）的音频节点都需要包含在同一个AudioContext中，每个音频节点，只能关联一个AudioContext。 音频节点 音频节点即AudioNode，它是一个基类，作为一个音频路由图中的基本单位，它的工作依赖于AudioContext。 音频节点拥有自己的输入/输出，可以通过connect方法将一个节点的输出连接至另一个节点的输入。比如我们可以将一个音频节点连接至audioContext.destination节点来进行音频播放。 audioBufferSourceNode.connect(audioContext.destination) 上面的audioContext.destination是音频节点中的一种，音频节点可以分为三类： Source Node：能产生音频的节点，只有输出，没有输入。 Process Node：对音频进行处理的节点，有输入（可能有多个）和输出。 Destination Node：通常为音频播放设备，如扬声器。 有的音频处理节点会有多个输出，比如ChannelSplitterNode，可以将音频拆分为多个声道，对应的，也有一个合并声道的节点ChannelMergerNode，有多个输入和一个输出。 路由图 Web Audio 提供的是模块化的API，在AudioContext中，各个音频节点的连接，构建了一个路由图，audioContext控制着整个路由图的运转。比如下面一个简单的音频播放示例 const ac = new AudioContext() const $audio = document.querySelector('#audio'); const sourceNode = ac.createMediaElementSource($audio); // 从audio标签创建一个音频源节点 const gainNode = ac.createGain(); // 创建一个增益节点 gainNode.gain.value = 0; // 将增益设置为0（相当于音量设置为0） $audio.addEventListener('play', () => { gainNode.gain.exponentialRampToValueAtTime(1, 1); // 在1秒的时间内指数增长到1，实现一个播放渐入效果 }); sourceNode.connect(gainNode); // 音频源节点连接到增益节点 gainNode.connect(ac.destination); // 增益节点连接到destination进行播放 音频源 web中音频源包括： audio节点 网络加载的音频文件 实时音频流（webRTC、麦克风） 能产生音频信号的音频节点（如：OscillatorNode） 从标签加载音频源 网络加载的音频文件，需要将其转换成音频源节点，才能连接到路由图中，比如我们经常使用的<audio>标签，它是不能直接连接到其它音频节点的...