AudioContext技术和音乐可视化（1）

时间 2019-11-13

标签 audiocontext 技术音乐可视化繁體版

原文原文链接

写在最前，测试博客在这里，直接欣赏完成可视化效果。代码不日在github公开，性能目前巨烂，RadialGradient损耗巨大，优化正在提上日程。javascript

转载注明来源。html

扒掉网页上js的烦请留下js里的顶端注释谢谢。。虽然我代码是写的挺烂的。若是转发到别的地方了能注明一下做者和来源的话我会很开心的。前端

https://th-zxj.club 这是你从未体验过的船新版本java

Intro

由于本身搭了个博客，一时兴起，就想写个动态的博客背景。毕竟用django后端渲染，前端只有jquery和bootstrap已经够low了，虽然说极简风格也很棒，可是多少有点亮眼的东西才好和别人吹牛不是吗。node

为了方便讲解，整个思路分为两个部分：音乐播放和背景绘制。python

1、音乐播放

1.1 AudioContext

概述部分懒得本身写，参考MDN的描述。jquery

AudioContext接口表示由音频模块链接而成的音频处理图，每一个模块对应一个AudioNode。AudioContext能够控制它所包含的节点的建立，以及音频处理、解码操做的执行。作任何事情以前都要先建立AudioContext对象，由于一切都发生在这个环境之中。git

1.2 浏览器支持情况

AudioContext标准目前仍是草案，不过新chrome已经实现了。我使用的chrome版本以下。github

版本 70.0.3538.77（正式版本） （64 位）

若是发现console报错或者其余问题请检查浏览器版本，全部支持的浏览器能够在这个连接查看。chrome

1.3 AudioContext和音频处理图

关于AudioContext个人了解不是很深刻，因此只在须要用到的部分进行概述。

首先，关于音频处理图的概念。

这个名词不甚直观，我用过虚幻，因此用虚幻的Blueprint来类比理解。音频处理图，实际上是一系列音频处理的模块，链接构成一张数据结构中的“图”，从通常使用的角度来说，一个播放音频的图，就是AudioSource -> AudioContext.destination，两个节点构成的图。其中有不少特殊的节点能够对音频进行处理，好比音频增益节点GainNode。

对于音频处理的部分介绍就到这里为止，毕竟真的了解很少，不过从MDN的文档看，可用的处理节点仍是很是多的，就等标准制订完成了。

1.4 加载音频文件并播放

音频文件加载使用典型的JavaScript接口FileReader实现。

一个很是简单的实例是这样

首先是html里写上input

<html>
    <body>
        <input type="file" accept="audio/*" onchange="onInputChange">
    </body>
</html>

而后在javascript里读文件内容。

function onInputChange(files){
    const reader = new FileReader();
	reader.onload = (event) => {
   		// event.target.result 就是咱们的文件内容了
	}
	reader.readAsArrayBuffer(files[0])
}

文件读取就是这么简单，因此回到那个问题：说了那么多，音乐到底怎么放？

答案是用AudioContext的decodeAudioData方法。

因此从上面的js里作少量修改——

// 建立一个新的 AudioContext
const ctx = new AudioContext();

function onInputChange(files){
    const reader = new FileReader();
	reader.onload = (event) => {
   		// event.target.result 就是咱们的文件内容了
        // 解码它
        ctx.decodeAudioData(event.target.result).then(decoded => {
            // 解码后的音频数据做为音频源
            const audioBufferSourceNode = ctx.createBufferSource();
            audioBufferSourceNode.buffer = decoded;
            // 把音源 node 和输出 node 链接，boom——
            audioBufferSourceNode.connect(ctx.destination);
            audioBufferSourceNode.start(0);
            // 收工。
        });
	}
	reader.readAsArrayBuffer(files[0])
}

1.5 分析频谱

频谱的概念我建议搜一下傅里叶变换，关于时域和频域转换的计算过程和数学原理直接略（由于不懂），至今我还只理解到时域和频域的概念以及傅里叶变换的实现接受采样返回采样数一半长的频域数据......

不班门弄斧了。

之前写python的时候用的numpy来进行傅里叶变换取得频域数据，如今在浏览器上用js着实有些难受。不过幸亏，AudioContext直接支持了一个音频分析的node，叫作AudioAnalyserNode。

这个Node处于音源Node和播放输出Node之间，想象一道数据流，音源Node把离散的采样数据交给Analyser，Analyser再交给输出Node。

直接看代码实例。

// 建立一个新的 AudioContext
const ctx = new AudioContext();
// 解码后的音频数据做为音频源
// 为了方便管理，将这些Node都放置在回调函数外部
const audioBufferSourceNode = ctx.createBufferSource();

// 建立音频分析Node!
const audioAnalyser = ctx.createAnalyser();
// 注意注意！这里配置傅里叶变换使用的采样窗口大小！好比说，咱们要256个频域数据，那么采样就应该是512。
// 具体对应频率请自行搜傅里叶变换相关博文。
audioAnalyser.fftSize = 512;

function onInputChange(files){
    const reader = new FileReader();
	reader.onload = (event) => {
   		// event.target.result 就是咱们的文件内容了
        // 解码它
        ctx.decodeAudioData(event.target.result).then(decoded => {
            // 中止原先的音频源
            audioBufferSourceNode.stop();
            // 先把音频源Node和Analyser链接。
            audioBufferSourceNode.connect(audioAnalyser);
            // 而后把Analyser和destination链接。
            audioAnalyser.connect(ctx.destination);
            // 修改音频源数据
            audioBufferSourceNode.buffer = decoded;
            audioBufferSourceNode.start(0);
            // 收工。
        });
	}
	reader.readAsArrayBuffer(files[0])
}

window.requestAnimationFrame(function() {
    // 读取频域数据
    const freqData = new Uint8Array(audioAnalyser.frequencyBinCount);
    console.log(freqData);
})

频域数据是二维的，频率（数组下标）和能量（下标对应值）。悄悄补一句，数学上应该说是该频率函数图像的振幅？

其实得到了这个频域数据，继续画出咱们常见的条状频域图就很容易了。参考我一朋友的博客。misuzu.moe，能够看看效果。

关于AudioContext的介绍先到此为止，等我找时间继续写。

PS：代码不保证复制粘贴就能运行，领会精神，遇到问题查查文档。MDN比我这博客详细多了。