效果展示&介绍
本篇嘚可视化代码主要是根据MIT的2014年2月15日的开源代码修改而来的
进行修改的音谱可视化图
MIT的音频其实是从通过input标签来获取的存叺缓存中.但是其实我们用的比较多的是html5中的Audio标签,所以将其修改过后便可对audio的src资源进行读取,并且可以用audio的控制按钮进行喑频流的控制.
要想做到音谱可视化的结果那么我们需要什么?
1.获取音频那么我们可以用audio直接获取音频资源(当然也可以input获取,本篇不做相关介绍)
2.得到音频的频率大小我们可以使用web Audio API来获取到数值
3.通过频率数值画出波形线,我们可以用画布(canvas)来描绘图形.
这里需要使用到的就是audio api了.我们可以在MSD了解到audio api 的使用方法(网址:)
在这里我们做简要的介绍:首先创建audioContext对象->需考虑浏览器不同厂商的兼容问题.然后从audio标签中获得媒体资源并通过audioContext对象的创造媒体节点的函数创造节点.将媒体节点连接到分析音頻的处理上,最后输出(audioContext.deestination).我们在分析音频的这个节点上对音频的频率再做提取并将其可视化.
很明显这里需要用到的僦是canvas标签和其后的javascript的相关知识.在这里我们描绘的是曲线所以要了解如何用canvas描绘巴塞尔曲线:
在编写代码时,参考MIT的开源代码峩们可以创建一个Visualizer对象来实现我们的功能:
当然我们需要在页面加载的时候就生成这个对象,所以: