html制作频谱,HTML5 WebAudioAPI(三)--绘制频谱图

var url=‘../content/audio/海阔天空.mp3‘;if (!window.AudioContext) {

alert(‘您的浏览器不支持AudioContext‘);

}else{//创建上下文

var atx = newAudioContext();var source = null;//使用Ajax获取音频文件

var request = newXMLHttpRequest();

request.open(‘GET‘, url, true);

request.responseType= ‘arraybuffer‘;//配置数据的返回类型

//加载完成

request.onload = function() {var arraybuffer =request.response;

atx.decodeAudioData(arraybuffer,function(buffer) {//创建分析器

var analyser =atx.createAnalyser();

source=atx.createBufferSource();//将source与分析器链接

source.connect(analyser);//将分析器与destination链接，这样才能形成到达扬声器的通路

analyser.connect(atx.destination);//将解码后的buffer数据复制给source

source.buffer =buffer;//播放

source.start(0);//开始绘制频谱图

var canvas = document.getElementById(‘canvas‘),

cwidth=canvas.width,