Rock it HTML5! Jsonic ultrasonic front-end interaction !, Html5jsonic

Rock it HTML5! Jsonic ultrasonic front-end interaction !, Html5jsonic

A few years ago, a canvas game was used to create html5 games. I believe many of you have relived Newton's Law in a high school physics course. Do you still remember the physical laws of various mechanical waves in the chapter after Newton's Law? Optical fiber, wifi, Bluetooth, and broadcast all appear in the circle. It can be said that mechanical waves bridge the information age. As the front-end audio interaction framework, Jsonic also provides interfaces for data transmission using sound waves. Before introducing the API, we will share some native web audio Code.

Read the first two blog posts in this series, rock it, HTML5! Sound frontend interaction! (1) HTML5 with rock! Sound frontend interaction! (Hello, Jsonic !) You should be able to use web audio to generate a sound wave at a specific frequency. The so-called ultrasonic wave is a sound wave with a frequency of more than 20000 hz. The normal human ears can receive a sound wave range of 20-hz. Secondary sound waves below 20Hz are not recommended because their frequencies are similar to some organs of the human body and may cause damage to the human body. In this case, it is easy to initiate an ultrasound. The Code is as follows: Use the oscillaor node.

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

It is worth noting that the start method of the oscillator node can be called only once. Once the stop method of oscillator is called and the sound at this frequency is sent, a new object can be created. In web audio, we can also use the gain node with the oscillator method to regularly send specified sound waves. You can regard the gain node as a signal strength regulator. By setting the value of gain. gain. value, you can control the signal strength. The value range is 0 ~ 1. Those who have played the speaker and those who have worked on these things should have a better understanding. In fact, web audio can be used to connect nodes with various effects. (For reference only)

　　　

Return to the Code world:

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);

With the above Code, a 20 000Hz ultrasonic signal can be sent within 1-2 seconds. Call the setValueAtTime method to change the value of the gain node. Shows the waveform change process. There are various methods for gain nodes to change the signal strength to the preset value. You can check the web audio API on your own.

You can use the gain node control signal and the oscillator start and stop methods to control the signal. With the signal source, the next step is the reception problem. Many articles have introduced html5 audio visualization. Its core is to obtain data through the analyser node. Here are several methods for analyser nodes to obtain data.

// Obtain the time-domain data var data = new Float32Array (analyser. fftSize); analyser. getFloatTimeDomainData (data); // obtain the frequency-domain data var data = new Float32Array (analyser. fftSize); analyser. getFloatFrequencyData (data); // obtain the time domain data var data = new Uint8Array (analyser. fftSize); analyser. getByteTimeDomainData (data); // use the Uint8 array to obtain the frequency-domain data var data = new Uint8Array (analyser. fftSize); analyser. getByteFrequencyData (data );

Time-domain and frequency-domain signals can be converted to each other through Fourier variation. Jsonic selects the unit8 array to obtain the frequency-domain signal. The following code obtains the frequency-domain data.

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){});

The data array here obtains data of all frequencies. How can we find the corresponding frequency data? I'm going to take another physics class ...... The nequest theorem is used here. If you do not understand it, you can directly look at formula B = 2 W. Through the sampleRate attribute of the audioContext node, we can obtain the sampling rate (generally 192000) in the current web audio context. Then, through the nequest theorem, this sampling rate/2 is the range of signal frequencies that 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 divides the acoustic data of 0-96000hz into 1024 frequencies for storage. Now we can get the frequency data. Although the sampling range is very wide, the frequency limit of acoustic waves produced by different devices through the oscillator node is different. I used to test the iPhone 5 at around Hz.

The following describes how to use Jsonic to send and receive ultrasonic data.GoJsonic.net.

In versions earlier than jsonic, the data is decoded using the peak value analysis method. Recently, a new version is released, which uses waveform analysis and a new Band object. A band instance is created in Jsonic, regardless of the receiver or sender.

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

AcceptorDemo(After clicking the start button, you need to authorize the browser to use the microphone)

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

TransmitterDemo(Power Amplifier, text in the input box)

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

Add the github address.Https://github.com/ArthusLiang/jsonic Pass by and give a star :). We also look forward to joining the front-end experts.

Indicate the source for forwarding: Http://www.cnblogs.com/Arthus/p/4281442.html