Rock Bar html5! Jsonic Ultrasonic front-end interaction!

　　A few years ago blew a canvas to make HTML5 games, I believe many students relive a high school physics textbook Newton's Law. Time flies, do you remember the laws of physics of various mechanical waves in the following chapter of Newton's Law? Around the world, optical fiber, WiFi, Bluetooth, Radio has a wave of the figure, it can be said that mechanical wave bridging the information age. Jsonic as the front-end audio interaction framework, also has the use of sound waves for data transmission interface, before introducing the API, first share some of the web audio native coded dry.

Read this series of top two blog posts Rock html5! Audio Front-end interaction! (a) and Rock bar html5! Audio Front-end interaction! (Hello, jsonic!) , students should have been able to use web audio to produce a specific frequency of sound waves. The so-called ultrasound, is the frequency of more than 20000hz of sound waves, normal adult human ear can receive the range of sound waves is 20-20000hz. Observedin below 20hz because of the frequency and some organs of the human body similar, may cause damage to the human body, so it is not recommended. In such a look, it is very simple to emit an ultrasound, the code is as follows, using the Oscillaor node.

var New Webkitaudiocontext (),    osc  == 20000; osc.connect (context.destination); Osc.start ( 0);

It is worth noting here that the start method of the oscillator node can only be called once. Once the Stop method of the oscillator is called and you want to make the sound of that frequency again, you can only create a new object. In Web audio, we can also use the gain node with the oscillator method to periodically emit the specified sound waves. You can understand the gain node as a signal strength regulator, and by setting the value of the Gain.gain.value, you can control the strength of the signal. The value range is 0~1. Played speakers, effects of these things students should be better understand, in fact, the Web audio can cascade various effects of the node. (for reference only)

　　　

Back to the world of code:

var New Webkitaudiocontext (),     = _ctx.creategain (),    osc  ==20000; gain.gain.value=0; Osc.connect (gain); Gain.connect (context. Destination); Osc.start (0); gain.gain.setValueAtTime,gain.gain.setValueAtTime(0,2);

With the above code, a 20000hz ultrasonic signal can be emitted within this time interval of 1-2 seconds. This calls the Setvalueattime method to change the value of the gain node, as shown in the waveform change process. The gain node has a variety of different methods that allow the signal strength to arrive at a preset value in a different way, and the reader can consult the API of the Web audio itself.

Control signals through the gain node and direct use of the oscillator start and stop methods have advantages and disadvantages, specific use can be considered by themselves. With the signal source, the next question is the reception. Many articles have introduced HTML5 audio visualization, the core of which is to obtain data through the analyser node. Here is a simple list of the next analyser node to obtain data of several methods.

//get time domain data from a floating-point groupvardata =NewFloat32array (analyser.fftsize); analyser.getfloattimedomaindata (data);//get frequency domain data from floating point groupvardata =NewFloat32array (analyser.fftsize); analyser.getfloatfrequencydata (data);//get time domain data by Uint8 arrayvardata =NewUint8array (analyser.fftsize); analyser.getbytetimedomaindata (data);//get the frequency domain data from the Uint8 arrayvardata =NewUint8array (analyser.fftsize); analyser.getbytefrequencydata (data);

Time-domain signals and frequency-domain signals can be converted to each other by Fourier variation, and Jsonic selects the UNIT8 array to obtain the frequency domain signal, and the following is the code to obtain the frequency domain data.

 var  ctx = new   Webkitaudiocontext (); Navigator.webkitgetusermedia ({audio:{optional:[{echocancellation:  false   function   var  analyser = = Ctx.createmediastreamsource (stream), dat    A  = new   Float32array (analyser.fftsize);    _input.connect (analyser); Analyser.getfloatfrequencydata (data),  function  (e) {}); 

The data array here gets all the frequencies, so how do we find the corresponding frequency data? It's a physics class again. Here to use the Nyquist theorem, do not understand the students can directly see the formula b=2w. With the Audiocontext node Samplerate property, we can get the sample rate in the current Web audio context (typically 192000), then through the Nyquist theorem, this sample rate/2 is the range of signal frequencies we can collect. The length of the data array we collected above is 1024 by default. Taking the sampling rate of 192000 as an example, the data array is to divide the 0-96000hz sound wave into 1024 frequency storage. We can get the frequency data here. Although the sampling range is very wide, but different devices through the oscillator node can produce a different frequency limit of the sound wave, I used to iphone5 test in the time around 22500hz.

Below is a brief introduction of how to send and receive ultrasonic data with jsonic, more information can be self go to tinker with jsonic.net.

In previous versions of Jsonic, the data was decoded using the peak analysis method. Recently released a new version, using the waveform analysis method, using the new band object. A band instance is created in Jsonic, regardless of the receiving or sending side.

var New Jsonic.band (); Band.initdefaultchannel ();

Receiving End Demo (after clicking the Start button, you need to authorize the browser to use the microphone)

Navigator.webkitgetusermedia ({    audio:{optional:[{echocancellation:false}]}    },  function(stream) {        = Band. Audiocontext.createmediastreamsource (stream);        Band.listensource (_input);        Band.scanenvironment ();},function(e) {});

Launch demo (amplifier, text in the input box)

Band.send (' Hello jsonic ',function() {    //Call back});

Finally attach GitHub address https://github.com/ArthusLiang/jsonic passed by, to a star:), but also look forward to the front-end big God to join.

forwarding Please specify the source :http://www.cnblogs.com/Arthus/p/4281442.html

Rock Bar html5! Jsonic Ultrasonic front-end interaction!