Web Audio API之手把手教你用web api处理声音信号 - GabrielChenCN_H5之家

1.Web Audio API 介绍

Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统，这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各种源中的声音，处理声音，使声音可视化等。

　　要使用Web Audio API，我们还是先来简单的了解一下它的工作流程：

其兼容性如下：

　　桌面端：

浏览器 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)

支持版本 14
23 未实现 15 6

　　移动端：

浏览器

Android

Chrome

Firefox Mobile (Gecko)

Firefox OS

IE Phone

Opera Mobile

Safari Mobile

支持版本未实现 28
25 1.2 未实现未实现 6

2.示例代码　　"talking is cheap , show me the codes."

　　我知道各位看官并不想听什么时域频域变换，什么傅立叶变换，什么web audio api原理，那我就废话不多说，直接放码过来了，先看看效果再来给大家解释。

　　尽情复制粘贴，然后拿个现代一点的浏览器跑一下（用IE的请点右上角红叉，谢谢）。

注意：audio标签的src属性内容请自己在本机找一个浏览器支持的声音源格式。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta contect="GabrielChen"> <meta contect="Web Audio API"> <title>Web Audio API 学习</title> <script> var canvas; var ctx; var audioContext; var analyser; var mic; function init() { canvasOne = document.getElementById('canvasOne'); ctx = canvasOne.getContext("2d"); canvasTwo = document.getElementById('canvasTwo'); ctx2 = canvasTwo.getContext("2d"); } 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); analyser= audioContext.createAnalyser(); analyser.fftSize = 256; mic.connect(analyser); drawSpectrum(); },function(){}); function drawSpectrum() { var WIDTH = canvasOne.width; var HEIGHT= canvasOne.height; var array = new Uint8Array(128); analyser.getByteFrequencyData(array); 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); } 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); }; </script> <style> #canvasOne { border: 1px solid #ddd; } </style> </head> <body> <h1>从audio源获取声音</h1> <audio src="./Fatbros.ogg" controls="controls">你的浏览器不支持audio标签</audio> <h1>audio读取声音</h1> <canvas></canvas> <h1>频域图模仿</h1> <canvas></canvas> <h1>圆形声波图</h1> <canvas></canvas> <script type="text/javascript"> 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) { 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); ctxfa.clearRect(0, 0, WIDTH, HEIGHT); for ( var i = 0; i < (array.length); i++ ){ var value = array[i]; 　　　　　　　　 ctxfa.fillRect(i*5,HEIGHT-value,3,HEIGHT); } requestAnimationFrame(drawSpectrumfa); } </script> </body> </html>

3.代码分析

我们从body部分入手分析

<body> <h1>从audio源获取声音</h1> <audio src="./Fatbros.ogg" controls="controls">你的浏览器不支持audio标签</audio> <h1>audio读取声音</h1> <canvas></canvas> <h1>频域图模仿</h1> <canvas></canvas> <h1>圆形声波图</h1> <canvas></canvas>

用onload属性调用初始化函数init(),主要在页面生成之后初始化一些变量，避免读不到相关DOM。

function init() { canvasOne = document.getElementById('canvasOne'); ctx = canvasOne.getContext("2d"); canvasTwo = document.getElementById('canvasTwo'); ctx2 = canvasTwo.getContext("2d"); }

第一块canvas：从audio源获取声音

首先一个audio标签，在本机选定一个src，设置controls属性代表浏览器显示播放器控制页面，设置id为audio。

再设置一个id为"canvasFormAudio"的画布canvas。

<audio src="./Fatbros.ogg" controls="controls">你的浏览器不支持audio标签</audio> <h1>audio读取声音</h1> <canvas></canvas>

获取声音源以及绘图