文档介绍：基于HTML5的音频频谱分析工具
一、课题设计
HTNfL （Hyper Text Markup Language）,即超文本标记语言，是一套标记标签， HTML使用标记标签来描述网页。Web浏览器的作用是读取HTML文档，并以网页的基于HTML5的音频频谱分析工具
一、课题设计
HTNfL （Hyper Text Markup Language）,即超文本标记语言，是一套标记标签， HTML使用标记标签来描述网页。Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。由于它是一台标记语言，它可以被网上任何其他人用任何平台浏览到，具有简易、通用的特点。
HTML5是互联网的下一代标准，加入了诸多新特性。如canvas元素，该元素通过自带的API结合使用JavaScript脚本语言在网页上绘制图形和处理，使得浏览器无需Flash或Silverlight等插件就能直接显示图形或动画图像。如＜audio＞标签来实现对多媒体中的音频使用的支持，只要在Web网页中嵌入这个标签，而无需第三方插件（如Flash）就可以实现音频的播放功能。canvas元素极大方便了数据可视化、物理实验内容的直观图像，＜audio＞标签对于音频处理的便利，直接促成了本课题的产生。
本课题实验思路为：通过浏览器获取电脑麦克风权限，获取麦克风采样率、位数、声道数等基础数据，采集音频或直接通过文件解码得到原始PCM数据，基于傅里叶变换进行频谱分析。
二、实验过程：

I AudioContext
图1原始的Web Audio流程
直接输出至日的地（扬声器、文件）。但通
在使用JavaScript编写Web代码时，有许多Web API可供调用。其中，Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统。
图1为Web浏览器处理音频的一般流程，音频从源（麦克风、流媒体）过Web Audio API,我们可以在音频上下文(AudioContext)中进行音频操作，源、效果器、目的地被处理成不同的音频节点(AudioNode) o音频节点通过它们的输入输出相互连接，形成一个链或者一个简单的网。这种模块化设计提供了灵活创建动态效果的复合音频的方法。
图2为使用Web Audio API后，一个简单而典型的Web Audio流程：
创建音频上下文
在音频上下文里创建源
创建效果节点
为音频选择一个目的地
接源到效果器，对目的地进行效果输出
Aud»oContcxt
图 2 使用 Web Audio API 的 Web Audio 流程
2. 2数据可视化
在音频采集时，使用Canvas实时展示音频波形，如图3所示，使用Canvas绘制效率高、可实时刷新，但是交互功能设计复杂，画坐标系、文字等图例比较困难。考虑到Canvas的缺陷，引入Echart作为补充，Echart是基于Canvas的一个纯 Javascript图标库，如图4所示，它可以自动设置坐标轴、具有多种交互工具，在非实时显示时，作为可互动展示工具，比Canvas更直观，但在面临大于100万的大数据量时会内存溢出，因此在使用中需一定优