最近更新了之前发布的语音识别框架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浏览器，并允许网页使用你的麦克风。一行代码绘制出麦克风的波形，并且有语音识别，是不是很酷炫。之后的博文我会对源码进行分析，祝大家周末玩的愉快。

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

周末献礼 MyVoix2.0.js 麦克风波形绘制(一)的更多相关文章

  1. MyVoix2.0.js 源码分析 WebSpeech与WebAudio篇

    楔 子 随着移动互联网时代的开启,各种移动设备走进了我们的生活.无论是日常生活中人手一部的手机,还是夜跑者必备的各种智能腕带,亦或者是充满未来科技感的google glass云云,它们正渐渐改变着我们 ...

  2. SVG.js 基础图形绘制整理（二）

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  3. vue中使用raphael.js实现地图绘制

    一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> &l ...

  4. JQuery 分页显示jquery-pager-1.0.js

    原版是jquery-pager-1.0.js,经过变更修改加上按照项目中的一些需要修改过来. //初始化分页控件 PagerOptions为配置参数 url为要提交的url地址,如果不需要提交则可以为 ...

  5. jweixin-1.1.0.js微信接口“分享给朋友”文字和图片配置

    在npm官网找到了:微信官方 js-sdk CommonJS 版https://www.npmjs.com/package/weixin-js-sdk 步骤一:引入JS文件在需要调用JS接口的页面引入 ...

  6. vue2.0.js基础开发使用心得（结合实际项目对数据的增删改查）

    1.首先申明,没有使用vue 的组件,以及脚手架等,都是一些基础语法的使用. ------------------------------------------------------------- ...

  7. Morris.js和flot绘制折线图的比较

    [文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...

  8. js在web绘制在页上的圆

    在web页,要画一个圆.有很多方法,SVG.canvas我们能够得出. 但文章没有使用这两种方法,但使用的div.div通常一个矩形.但是,假设一个圆形的样式设置border-radius有可能div ...

  9. [js] webgl 初探 - 绘制三角形

    摘要: 1. webgl 概念挺多的, 顶点着色器.片段着色器, 坐标 2. 绘制前期准备工作好多 目前看的比较好的教材: https://developer.mozilla.org/zh-CN/do ...

随机推荐

  1. 关于echo `git branch | grep \*`

    本来想返回一个git当前的分支.但会将这个文件夹下的所有目录与分支一起输出. 原因是  echo `git branch | grep \*`  等价于   echo * master  , 而  e ...

  2. 「Githug」Git 游戏通关流程

    Githug 他喵的这是个啥!?难道不是 GitHub 拼错了么,和 Git 什么关系? 和游戏又有什么关系? 其实,他的元身在这里:https://github.com/Gazler/githug  ...

  3. sqlserver查看索引使用情况以及建立丢失的索引

    --查看表的索引使用情况SELECT TOP 1000o.name AS 表名, i.name AS 索引名, i.index_id AS 索引id, dm_ius.user_seeks AS 搜索次 ...

  4. 史上最全maven pom.xml详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  5. XML FREESWITCH APPLICATION 实现

    XML XML在FS(FreeSwitch)中进行了大量的使用,其中dialplan就是其中非常主要的一快内容.通过下面的描述,我们可以知道在执行XML中的语句: <action applica ...

  6. Android常用的物理按键及其触发事件

    Activity和View都能接收触摸和按键,如果响应事件只需要在继承类里复写事件函数即可:当一个视图(如一个按钮)被触摸时,该对象上的 onTouchEvent() 方法会被调用.不过,为了侦听这个 ...

  7. 关于虚拟继承类的大小问题探索，VC++ 和 G++ 结果是有区别的

    昨天笔试遇到个 关于类占用的空间大小的问题,以前没怎么重视,回来做个试验,还真发现了问题,以后各位笔试考官门,出题时请注明是用什么编译器. vc6/vc8 cl 和 Dev-C 的g++ 来做的测试: ...

  8. Java基础知识强化71：正则表达式之基本规则 和 常用正则表达式

    1. 基本规则: A:字符 x 字符 x.举例:'a'表示字符a \\ 反斜线字符. \n 新行(换行)符 ('\u000A') \r 回车符 ('\u000D') B:字符类 [abc] a.b 或 ...

  9. D3画图学习一

    一.D3画图简介 D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中.你可以使用它用一个数组创建基本的HTML表格,或是 ...

  10. git pull 代码很慢的问题

    办公环境调整,之前开发机是和自己的电脑放同一网段内的,现在开发机放至到本地其他网段内,造成pull 代码很慢的问题,在网上查了一下 以下是原文,链接为 http://blog.sina.com.cn/ ...