最近更新了之前发布的语音识别框架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. EditText输入长度动态控制，最大长度为16位，小数点后面最大为2位，输入整数只能为13位

    首先在xml 中把inputType设置为numberDecimal (包含小数点)然后在把maxLeng设置为16 package com.example.numbertest; import an ...

  2. perl中执行linux命令，及其区别

    1. system("date '+%Y-%m-%d %H:%M:%S'") 该命令返回的是-1.(应该是date命令的main函数的返回值) 2. `date '+%Y-%m-% ...

  3. 使用 FreeMarker 替换 JSP 的 10 个理由

    你还在使用 Java 服务器页面(俗称JSP)吗?我曾经也是,但是几年前我抛弃了它们,并且再也没有用过JSP了.JSP 是个很好的概念,但是它却剥夺了 web 开发的乐趣. 对我而言,这些都是小事,比 ...

  4. 【深入了解cocos2d-x 3.x】定时器（scheduler）的使用和原理探究（3）

    上篇文章分析到了定时器的定义.这篇的重点就是定时器是怎样执行起来的. 1.从main中寻找定时器的回调 讲定时器的执行,就不得不触及到cocos2dx的main函数了,由于定时器是主线程上执行的.并非 ...

  5. vs2008打包公布程序

    vs2008打包公布程序 一vs2008中新建 安装项目,确定(新建 安装向导 也能够) 二.加入内容 1.加入主要内容: 应用程序目录=>右键=>加入=>文件,找到须要的文件,包含 ...

  6. valgrind 的使用及错误信息分析

          这里记录一下使用valgrind查找你的应用程序中的各种潜在的错误信息,并举例说明. 经常使用valgrind查找一下你的代码的内存有关错误,对移植到嵌入系统后的系统稳定性来说有着重要的意 ...

  7. [转] Linux Shell 文本处理工具集锦

    内容目录: find 文件查找 grep 文本搜索 xargs 命令行参数转换 sort 排序 uniq 消除重复行 用tr进行转换 cut 按列切分文本 paste 按列拼接文本 wc 统计行和字符 ...

  8. php递归json类实例代码

    这篇文章主要介绍了php递归json类的实现方法,可以实现对索引数组及数字数组的解析,进而实现递归数组返回json字符串的功能.具体实现代码如下: <?php /* * @ anthor:QD ...

  9. WordPress程序流程分析

    index.php 统一入口文件 包含wp-blog-heaer.php 包含wp-load.php 包含wp-config.php 数据库.语言包配置等 包含wp-setting.php 对各种运行 ...

  10. MyEclipse汉化后问题

    今天为了教学生如何汉化MyEclipse10.7,所以讲IDE汉化了一下. 个人还是喜欢用英文版,所以就将D:\MyEclipse\MyEclipse 10目录下的配置文件myeclipse.ini里 ...