如何利用Web Audio API制作个性化的长尾词音频可视化效果？

本文共计2766个文字，预计阅读时间需要12分钟。

网页音视频接口最有趣的特性之一是可以获取频率、波形以及其他来自声源的数据，这些数据可用于音视频可视化。本文将解释如何实现可视化，并提供了一些基础使用案例。

网页音频接口最有趣的特性之一它就是可以获取频率、波形和其它来自声源的数据，这些数据可以被用作音频可视化。这篇文章将解释如何做到可视化，并提供了一些基础使用案例。
基本概念节
要从你的音频源获取数据，你需要一个 AnalyserNode节点，它可以用 AudioContext.createAnalyser() 方法创建，比如：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser();

然后把这个节点（node）连接到你的声源：

source = audioCtx.createMediaStreamSource(stream); source.connect(analyser); analyser.connect(distortion);

// etc.
注意： 分析器节点(Analyser Node) 不一定输出到另一个节点，不输出时也可以正常使用。但前提是它必须与一个声源相连（直接或者通过其他节点间接相连都可以）。