js音乐播放器的实现以及可视化

前言

我们尝试用原生js写一个音乐播放器，对音频做一个简单的可视化。

最终的效果如下图：

思路还是比较明显的，第一，我们要拿到音频的什么数据进行可视化，如何获取？第二，如何可视化，第二个问题就比较简单了，用canvas来操作。

获取音频相关的数据可以用 Web Audio API , 这里我们可以去 MDN 或者 W3C上查看相关的文档。

audio API

我们都知道在web中播放音频用audio这个标签来操作。Web Audio API 是对audio标签功能上的补充，它可以：

1. 一秒内同时发出多个声音
2. 把音频流独立出来，进行复杂操作
3. 将音频输出到多个地方，比如canvas，从而实现可视化

audio node 有入口和出口，多个节点构成类似链表一样的结构，从一个或者多个音源出发，经过一个或者多个处理节点，最终输出到输出节点。web audio 的一个简单处理过程如下：

1. 创建AudioContext对象
2. 在AudioContext对象内设置音源，例如标签
3. 创建affcet node(效果节点)
4. 选择音频的最终输出节点
5. 音频经过效果节点处理后，然后输入到下一个节点

// 获取AudioContext对象
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
// 创建AudioContext对象实例
var actx = new AudioContext();
// 创建AuidoSource，此处的audios为<audio>标签
var audioSrc = actx.createMediaElementSource(audios);
var analyser = actx.createAnalyser();
// 输入的连接
audioSrc.connect(analyser);
// 输出的连接
analyser.connect(actx.destination);
// 本例子中我们获取音高数据来进行可视化
var voiceHigh = new Uint8Array(analyser.frequencyBinCount)