周末献礼 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.οnlοad=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浏览器，并允许网页使用你的麦克风。一行代码绘制出麦克风的波形，并且有语音识别，是不是很酷炫。之后的博文我会对源码进行分析，祝大家周末玩的愉快。

　　转发请注明出处：http://www.cnblogs.com/Arthus/p/3884442.html

转载于:https://www.cnblogs.com/Arthus/p/3884442.html

周末献礼 MyVoix2.0.js 麦克风波形绘制(一)相关推荐

SVG.js 基础图形绘制整理（二）
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
three.js SVG 学习绘制三维地图
three.js SVG 学习绘制地图 https://www.js-css.cn/jscode/other/other43/ 找到一个不错的资源,不过每个省份的svg数据太小了,不精确. 主要的是这 ...
基于 function-plot.js 开源库绘制数学函数图像实现兼文档翻译
一.前言: 前段时间移动项目想实现一个能实时绘制数学函数图像的H5小应用, app 通过 webview 进行嵌入,目前网上提供了大致有两种方法: ①.Chart.js 结合 Plugins 绘制 = ...
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
p5js怎么导入html,如何链接P5.js设置和绘制与HTML画布？
我确信这是一件非常简单的事情,但我被困在这里. 情况如下: 我有一个带有div和canvas元素的HTML页面(不确定我是否需要这个) 我还有两个使用p5.js的javascript文件,其中包含设置 ...
ArcGis js api 简单绘制点线面
Arcgsi js api 简单绘制点线面 <!DOCTYPE html> <html><head><meta http-equiv="Conten ...
php绘制正方体,Three.js利用顶点绘制立方体方法
本文主要给大家介绍了关于Three.js利用顶点绘制立方体的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧.希望能帮助到大家. 前言之前我们在学些WebGL基础的时候 ...
D3.js 使用geojson绘制地图
D3.js 使用geojson绘制地图前言初始化项目获取数据并绘图 http请求数据定义坐标并绘图总结前言利用geojson文件或者类似包含对象属性和坐标(只要坐标是在统一参考系下)的文 ...
d3.js 7×6 日历绘制附加单格背景
d3.js 7×6 日历绘制附加单格背景先来个效果图减少错进者的时间时间对于我们来说太宝贵了先来个效果图减少错进者的时间时间对于我们来说太宝贵了 ** 第一次写文章不喜欢请喷我您的支 ...

周末献礼 MyVoix2.0.js 麦克风波形绘制(一)

周末献礼 MyVoix2.0.js 麦克风波形绘制(一)相关推荐

最新文章

热门文章