音谱可视化:Audio API开发

效果展示&介绍

本篇的可视化代码主要是根据ＭＩＴ的2014年２月15日的开源代码修改而来的
ＭＩＴ音谱可视化－＞Github
ＭＩＴ音谱可视化图：
　
进行修改的音谱可视化图
　

ＭＩＴ的音频其实是从通过input标签来获取的，存入缓存中．但是其实我们用的比较多的是ｈｔｍｌ５中的Audio标签，所以将其修改过后，便可对audio的src资源进行读取，并且可以用audio的控制按钮进行音频流的控制．

　

分析过程

要想做到音谱可视化的结果，那么我们需要什么？
1.获取音频，那么我们可以用audio直接获取音频资源（当然也可以input获取，本篇不做相关介绍）
2.得到音频的频率大小，我们可以使用web Audio API来获取到数值
3.通过频率数值画出波形线，我们可以用画布(canvas)来描绘图形．

获取音频

我们可以直接在ｈｔｍｌ文档中加入audio标签即可：
<audio src="./mp3/Approaching Nirvana - You.mp3" id="audio"></audio>
audio的更多信息参考W3cschool

得到音频的频率大小

这里需要使用到的就是audio api了．我们可以在MSD了解到audio api 的使用方法（网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API）
在这里我们做简要的介绍：首先创建audioContext对象－＞需考虑浏览器不同厂商的兼容问题.然后从audio标签中获得媒体资源，并通过audioContext对象的创造媒体节点的函数创造节点．将媒体节点连接到分析音频的处理上，最后输出（audioContext.deestination）.我们在分析音频的这个节点上对音频的频率再做提取，并将其可视化．

画出可视化图形

很明显这里需要用到的就是canvas标签和其后的javascript的相关知识．在这里我们描绘的是曲线所以要了解如何用canvas描绘巴塞尔曲线：

绘制一条二次巴塞尔曲线

代码呈现

在编写代码时，参考MIT的开源代码，我们可以创建一个Visualizer对象来实现我们的功能：

var Visualizer = fun