周末献礼 MyVoix2.0.js 麦克风波形绘制(一)
最近更新了之前发布的语音识别框架MyVoix,加入了麦克风的波形分析效果。没有看过MyVoix介绍的同学请猛戳(传送门) Github地址
在新的更新中,波形分析可以绑定麦克风源,也可以单独配合别的音源使用。首先看一下对麦克风进行波形绘制的代码。
<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="myvoix2.0.js" ></script> <script type="text/javascript"> window.onload=function(){ var _myVoix = new MyVoix(); _myVoix.createSoundWave({ canvas:document.getElementById('myCanvas'), height:600, width:800, noise:0.01, F:2 }); } </script> </head> <body style=" background:black;"> <canvas id='myCanvas' style='width:800px; height:600px;'></canvas> </body> </html>
可以看到,你只需一个canvas,然后要调用createSoundWave方法就可以绘制波形了,效果如下。
当然,你需要使用Chrome浏览器,并允许网页使用你的麦克风。一行代码绘制出麦克风的波形,并且有语音识别,是不是很酷炫。之后的博文我会对源码进行分析,祝大家周末玩的愉快。