前些年吹过一阵canvas制作html5游戏的东风,相信不少同学重温了一把高中物理课本上的牛顿定律。时光如梭,你是否还记得牛顿定律后面一章的各种机械波的物理定律?环视四周,光纤、wifi、蓝牙、广播都有波的身影,可以说机械波桥接了信息时代。Jsonic作为前端的音频交互框架,也有利用声波进行数据传输的接口,在介绍API之前,先分享一些web audio原生编码的干货。

  读了这系列前两篇博文摇滚吧HTML5!有声前端交互!(一)摇滚吧HTML5!有声前端交互!(Hello, Jsonic!)的同学,应该已经能够使用web audio产生一个特定频率的声波了。所谓的超声波,就是频率超过20000hz的声波,正常成人人耳能接收的声波范围是20-20000hz。20hz以下的次声波因为频率和人体一些器官相近,可能对人体造成损伤,所以不建议使用。这么一看,发出超声波就很简单了,代码如下,使用oscillaor节点。

var context = new webkitAudioContext(),
osc = context.createOscillator();
osc.frequency.value = 20000;
osc.connect(context.destination);
osc.start(0);

  这里有一点值得注意,oscillator节点的start方法只能调用一次。一旦调用了oscillator的stop方法,想要再发出这个频率的声音,就只能再创建一个新的对象了。在web audio中,我们还可以使用gain节点配合oscillator的方法,定期发出指定的声波。你可以把gain节点理解为一个信号强度调节器,通过设置gain.gain.value的值,可以控制信号的强弱。这个值取值范围是0~1。玩过音箱,效果器这些东西的同学应该就比较好理解了,其实web audio可以串联各种效果的节点。(下图仅供参考)

   

  回到代码的世界:

var context = new webkitAudioContext(),
gain = _ctx.createGain(),
osc = context.createOscillator();
osc.frequency.value =20000;
gain.gain.value=0;
osc.connect(gain);
gain.connect(context .destination);
osc.start(0);
gain.gain.setValueAtTime(1,1);
gain.gain.setValueAtTime(0,2);

  通过以上代码,可以在1-2秒这个时间区间内发出一个20000hz的超声波信号。这里调用setValueAtTime方法改变gain节点的值,波形变化过程如下图所示。gain节点有各种不同的方法,这些方法使信号强度到达预设值有不同的变化过程,读者可自行查阅web audio的API。

  通过gain节点控制信号和直接使用oscillator的start和stop方法控制信号各有利弊,具体使用大家可自行考虑。有了信号源,接下来就是接收的问题了。很多文章都介绍过html5的音频可视化,其核心就是通过analyser节点获取数据。这里简单罗列下analyser节点获取数据的几种方法。

//通过浮点数组获取时域数据
var data = new Float32Array(analyser.fftSize);
analyser.getFloatTimeDomainData(data); //通过浮点数组获取频域数据
var data = new Float32Array(analyser.fftSize);
analyser.getFloatFrequencyData(data); //通过 Uint8数组获取时域数据
var data = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(data); //通过 Uint8数组获取频域数据
var data = new Uint8Array(analyser.fftSize);
analyser.getByteFrequencyData(data);

  时域信号和频域信号可以通过傅里叶变化互相转换,Jsonic选择的是unit8数组获取频域信号,以下是获取频域数据的代码。

var ctx = new webkitAudioContext();
navigator.webkitGetUserMedia({
audio:{optional:[{echoCancellation:false}]}
},function(stream){
var analyser = ctx.createAnalyser(),
_input = ctx.createMediaStreamSource(stream),
data = new Float32Array(analyser.fftSize);
_input.connect(analyser);
analyser.getFloatFrequencyData(data);
},function(e){});

  这里的data数组获取的是所有频率的数据,那么怎么找到对应的频率数据呢?又要上物理课了。。。。。。这里要用到 奈奎斯特定理,不懂的同学可以直接看公式B=2W。通过audioContext节点sampleRate属性,我们可以获取在当前web audio上下文的采样率(一般是192000),那么通过奈奎斯特定理,这个采样率/2就是我们能采集到的信号频率的范围了。上面我们采集到的data数组长度默认是1024。以192000的采样率为例,data数组就是把0-96000hz的声波数据均分成1024个频率存储。到这里我们就能获取到频率数据了。虽然采样范围很广,但是不同设备通过oscillator节点能产生的声波的频率极限不同,我之前用iphone5测试的时候在22500hz左右。

下面简单介绍下怎么用Jsonic收发超声波数据,更多信息可以自行捣鼓jsonic.net

  在jsonic之前的版本中,使用的是峰值分析法解码数据。最近发布了新的版本,使用的是波形分析法,使用了新的Band对象。无论接收还是发送端,在Jsonic中都要创建一个band实例。

var band = new Jsonic.Band();
band.initDefaultChannel();

接收端 demo (点击start按钮后,需要授权浏览器使用麦克风)

navigator.webkitGetUserMedia({
audio:{optional:[{echoCancellation:false}]}
},function(stream){
_input = band.AudioContext.createMediaStreamSource(stream);
band.listenSource(_input);
band.scanEnvironment();
},function(e){});

发射端 demo (功放,发射输入框中的文字)

band.send('Hello Jsonic',function(){
//call back
});

最后附上github地址 https://github.com/ArthusLiang/jsonic 走过路过,给个star :),同时也期待前端大神加盟。

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

摇滚吧HTML5!Jsonic超声波前端交互!的更多相关文章

  1. 摇滚吧HTML5!有声前端交互!(Hello, Jsonic!)

    软件工程师们摆弄1和0编写他们的乌托邦,音乐人门把玩12平均律上的音符构筑他们的伊甸园.最近,我偶然看了<蓝色骨头>这部电影,片中的男主角是位黑客,同时又兼具音乐创作的才华.在现实生活中, ...

  2. 摇滚吧HTML5!有声前端交互!(一)

    生命的伊始,婴儿用明亮的哭声宣告一个新生命的诞生,睁开双眼之前,一双小耳朵已经开始聆听这个世界.在如今的用户体验领域,几乎所有公司都会有视觉设计师,却鲜有注重听觉交互的公司.随着各大厂商对HTML5支 ...

  3. HTML5纯Web前端也能开发直播,不用开发服务器(使用face2face)

    前段时间转载了某位大神的一篇文章,开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室.非常有意思.看起来非常简单,但作为一名前端开发人员来说,还是有难度.因为要开发服务器端 ...

  4. SpringBoot学习笔记(4):与前端交互的日期格式

    SpringBoot学习笔记(4):与前端交互的日期格式 后端模型Date字段解析String 我们从前端传回来表单的数据,当涉及时间.日期等值时,后端的模型需将其转换为对应的Date类型等. 我们可 ...

  5. 了解php数据转json格式与前端交互基础

    php数据转json格式与前端交互 ArryJson1.php <?php $test=array(); $word=array("我12","要43", ...

  6. 在Html5中与服务器交互

    转自原文 在Html5中与服务器交互 刚刚涉足职场,上头就要我研究HTML5,内嵌到手机上,这对我来说完全是一个陌生的领域,不过也正好给自己一个机会来学习,最近做到要跟服务器交互这部分,这部分可是卡了 ...

  7. 首次接触Winform前端交互

    首次接触到在winform中加入网页,且跟前端脚本交互.找了一下这方面的资料 此博文转载原地址为:http://www.cnblogs.com/Charles2008/archive/2009/08/ ...

  8. 基于HTML5 Canvas实现用户交互

    很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用到HT for Web(http://www.hightopo.com/guide/guide/core/b ...

  9. 初步认识Swiper_前端交互控制神器_滚动3D切换等特效简单制作

    前言: 本人在项目的工作中负责研发,页面及交互基本都是交给前端去做的.以前前端写的东西大概都知道,都是一些JS,CSS和HTML等的一些基本控制,都懂!但是今天前端突然做了一个具有特殊效果的DOM:页 ...

随机推荐

  1. js编写验证码

    这是一个简单的js编写的验证码,自己已经亲自验证,没有问题了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. 使用libevent进行多线程socket编程demo

    最近要对一个用libevent写的C/C++项目进行修改,要改成多线程的,故做了一些学习和研究. libevent是一个用C语言写的开源的一个库.它对socket编程里的epoll/select等功能 ...

  3. RMQ——忠诚题解

    题目:忠诚 描述: [题目描述] 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满 意.但是由于一些人的 ...

  4. shell编程(一)--常用变量及表达式

    $? 表示执行上一个命令的返回值:如果为0表示执行成功,非0表示执行失败$1.$2.... 分别表示参数1.参数2....$# 表示这个程序的参数个数$*/$@ 表示这个程序的所有参数$$ 表示这个程 ...

  5. 数据库 —— mySQL 的安装

    [转载Link]MySQL-5.6.24免安装版配置方法,有需要的朋友可以参考下. 1. 下载MySQL Community Server 5.6.24 2. 解压MySQL压缩包 将以下载的MySQ ...

  6. HDU H204 阿牛的EOF牛肉串

    阿牛的EOF牛肉串 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  7. Android 适配

    给定字体大小适配时应按照12sp,14sp,18sp,22sp 这几种字体的大小设置,以避免字体大小混乱12sp以上大小,14sp 18sp 22sp 字体首选大小,不要使用奇数.小数,否则会造成精度 ...

  8. Android Monkey具体解释

    Monkey是一个执行在Android设备或者虚拟机上的程序,它能随机模拟一系列用户的操作.点击,滑动,能够用它来做压力測试. 在Monkey执行的过程中,它会产生并发送一系列的事件给系统,而且监听系 ...

  9. Qemu之Network Device全虚拟方案一:前端网络流的建立

    KVM在I/O虚拟化方面,传统的方式是使用Qemu纯软件的方式来模拟I/O设备,当中包含常常使用的网卡设备.这次我们重点分析Qemu为实现网络设备虚拟化的全虚拟化方案.本主题从三个组成方面来完整描写叙 ...

  10. tomcat安全配置之禁用Directory Listing

    什么是Directory Listing?通俗点讲,就是在webapp的目录下如果没有放置index.html或者类似的文件,如果从IE或者其它浏览器文章这个路径时,会惊喜的发现这个目录下的文件列表被 ...