//直接从audio处理音频源，声明一些必要的变量 var context1; var source; var analyserfa; var canvasFormAudio; var ctxfa; //初始化画布 canvasFormAudio = document.getElementById('canvasFormAudio'); ctxfa = canvasFormAudio.getContext("2d");
//建立一个音频环境，因为浏览器实现不同，做了一点兼容性处理 try { context1 = new (window.AudioContext || window.webkitAudioContext); } catch(e) { throw new Error('The Web Audio API is unavailable'); } //建立一个分析器 analyserfa=context1.createAnalyser(); window.addEventListener('load', function(e) { // 从audio标签获取声音源 source var audio =document.getElementById("audio"); var source = context1.createMediaElementSource(audio); source.connect(analyserfa); analyserfa.connect(context1.destination); //调用绘图函数 drawSpectrumfa(); }, false);
　　　　　　//绘图函数 function drawSpectrumfa() { var WIDTH = canvasFormAudio.width; var HEIGHT= canvasFormAudio.height; var array = new Uint8Array(128); //复制当前的频率值到一个无符号数组中 analyserfa.getByteFrequencyData(array); //clearRect(矩形左上角x坐标，矩形左上角y坐标，清除矩形的宽，清除矩形的高) ctxfa.clearRect(0, 0, WIDTH, HEIGHT); //循环生成长条矩形 for ( var i = 0; i < (array.length); i++ ){ var value = array[i]; //fillRect(矩形左上角x坐标，矩形左上角y坐标，矩形宽，矩形高)
　　　　　　　　　//这里我们的array一共有128组数据，所以我们当时canvas设置的宽度为5*128=640 ctxfa.fillRect(i*5,HEIGHT-value,3,HEIGHT); } //根据浏览器频率绘图或者操作一些非css效果 requestAnimationFrame(drawSpectrumfa); }

第二块：频域图模仿和圆形声波图

这两个图的音源都是利用浏览器调用电脑麦克风取得，所以一定要同意浏览器请求的麦克风权限。

绘图区域

<h1>频域图模仿</h1> <canvas></canvas> <h1>圆形声波图</h1> <canvas></canvas>

初始化init()函数、从麦克风获取音源和绘图函数

var canvas; var ctx; var audioContext; var analyser; var mic; //初始化两个画布的函数，声明为2d绘图 function init() { canvasOne = document.getElementById('canvasOne'); ctx = canvasOne.getContext("2d"); canvasTwo = document.getElementById('canvasTwo'); ctx2 = canvasTwo.getContext("2d"); } //getMedia调用参数如下，返回一个多媒体流
　　　　//constraints可选{ video: true, audio: true },代表获取多媒体的类型
//var stream = navigator.getUserMedia(constraints, successCallback, errorCallback); navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); navigator.getMedia ( { audio: true }, function (stream) { audioContext = new (window.AudioContext || window.webkitAudioContext); //返回一个多媒体流 mic = audioContext.createMediaStreamSource(stream); //creates an AnalyserNode 创建一个分析节点 analyser= audioContext.createAnalyser(); //fftsize默认值2048，是快速傅立叶变换用于频域分析的值，必须为2的幂，而我们得到的数据通常为其的一半，下面会说道 analyser.fftSize = 256; mic.connect(analyser);
　　　　　　//调用绘图函数 drawSpectrum(); },function(){}); 　　　　　//圆形声波绘图和矩形绘图 function drawSpectrum() { var WIDTH = canvasOne.width; var HEIGHT= canvasOne.height; 　　　　　　　//长度为128无符号数组用于保存getByteFrequencyData返回的频域数据 var array = new Uint8Array(128); analyser.getByteFrequencyData(array);
　　　　　　 //以下是根据频率数据画图，主要为canvas知识，不做详细解答 ctx.clearRect(0, 0, WIDTH, HEIGHT); ctx2.clearRect(0, 0, 800, 800); for ( var i = 0; i < (array.length); i++ ){ var value = array[i]; ctx.fillRect(i*5,HEIGHT-value,3,HEIGHT); } //ctx2.clearRect(700, 700, WIDTH, HEIGHT); for ( var i = 0; i < (array.length); i++ ){ var value = array[i]; ctx2.beginPath(); ctx2.arc(300,300,value,0,360,false); ctx2.lineWidth=5; ctx2.strokeStyle="rgba("+value+","+value+",0,0.2)"; ctx2.stroke();//画空心圆 ctx2.closePath(); } // requestAnimationFrame(drawSpectrum); };