Audio API - 随音频跳动的Cube

关于Audio API简单介绍

阅读时间：约2 - 3分钟

一切源于一个简单的需求，音乐播放器，一开始就只是写个UI，调用媒体 API，而后加上了经过进度条映射到seek音频进度到功能，再往上加需求的时候，就是音频可视化了。

记得十多年前的电脑上，Windows Media Player、千千静听等音频软件都会有音频可视化的界面，都是各类各样随着音频的变化，绘制不一样规律的图案。但是在浏览器中，作音频分析，对于我来讲真的有点难以想象，直到我看到了AudioContext，它给音频处理打开了一扇门。

什么是AudioContext

AudioContext 是 Audio API 中的音频上下文，一切对于音频的操做，都发生在 AudioContext。用你们熟悉的东西来讲的话 AudioContext 和 Canvas 的上下文是相似的概念。

Audio API 在 W3C 标准中仍是草案状态（Web Audio API），可是很多PC现代主流浏览器已经实现了一部分的功能，因此咱们仍是能够先用Chrome来尝试一番。

建立AudioContext 而且链接音频

// 建立音频上下文，这是一种兼容的写法
let actx = new (window.AudioContext || webkitAudioContext)();
// 咱们从网页的audio元素来链接音频
let audio = document.getElementById("didit");
let source = actx.createMediaElementSource(audio);
复制代码

AudioContext 提供三种方式来提供音频内容

• AudioContext.createBufferSource()

  经过AudioContext.createBuffer建立或AudioContext.decodeAudioData解码音轨来建立内容

• AudioContext.createMediaElementSource()

  经过媒体元素来获取

• AudioContext.createMediaStreamSource()

  经过流媒体获取（如麦克风）

利用Analyzer分析音频内容

// 建立analyzer
let analyzer = actx.createAnalyser();
// 建立用来获取音频数据的缓冲buffer
let bufferLength = analyzer.fftSize;
let dataArray = new Uint8Array(bufferLength);

// 链接analyzer和音频元
source.connect(analyzer)
analyzer.connect(actx.destination)
复制代码

在使用Analyser的时候，我遇到了一个问题，analyzer没有办法获取到当前播放的内容。可是我注意到了在其余示例中，音频上下文和他的工具集之间创建了链接。

这就引出了Audio API的工做方式，他的工具集和音频上下文的目的地直接，是经过connect耦合的，在使用工具的时候，须要两方互相链接。

咱们在这里使用analyzer.connect(actx.destination)链接音频上下文目的地的缘由是，音频的播放信息在AudioContext链接音频元素的时候，就被AudioContext接管了，是它在传输如今播放音频的数据，因此须要如此链接。

一个简单的例子

function getNowText(some) {
  analyzer.getByteTimeDomainData(dataArray);

  let one = (findMax(dataArray) / 128);
  let delta = some - one;

  one = delta * 0.618 + one;

  c.rotate(0.5,0.5,0);
  c.scale(one , one , one );
  c.update();

  requestAnimationFrame(getNowText.bind(this,one))
}
复制代码

使用一个我以前写的css3d库(HakeCSS3D)来进行简单的视觉效果，这里咱们取音频最大值来做为控制变量，并实时更新。（请忽略我这个充满反作用的写法）

analyzer.getByteTimeDomainData(dataArray);是用来获取当前时间的音频分析信息，它返回的信息是128为基准值的整数。

实际效果参考：mcube.hustfe.com/ (请在PC现代浏览器下打开)

浏览器支持状况