前些年吹過一陣canvas制作html5游戲的東風(fēng)，相信不少同學(xué)重溫了一把高中物理課本上的牛頓定律。時(shí)光如梭，你是否還記得牛頓定律后面一章的各種機(jī)械波的物理定律？環(huán)視四周，光纖、wifi、藍(lán)牙、廣播都有波的身影，可以說(shuō)機(jī)械波橋接了信息時(shí)代。Jsonic作為前端的音頻交互框架，也有利用聲波進(jìn)行數(shù)據(jù)傳輸?shù)慕涌?#xff0c;在介紹API之前，先分享一些web audio原生編碼的干貨。

　　讀了這系列前兩篇博文搖滾吧HTML5！有聲前端交互！（一）和搖滾吧HTML5！有聲前端交互！（Hello, Jsonic!）的同學(xué)，應(yīng)該已經(jīng)能夠使用web audio產(chǎn)生一個(gè)特定頻率的聲波了。所謂的超聲波，就是頻率超過20000hz的聲波，正常成人人耳能接收的聲波范圍是20-20000hz。20hz以下的次聲波因?yàn)轭l率和人體一些器官相近，可能對(duì)人體造成損傷，所以不建議使用。這么一看，發(fā)出超聲波就很簡(jiǎn)單了，代碼如下，使用oscillaor節(jié)點(diǎn)。

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

　　這里有一點(diǎn)值得注意，oscillator節(jié)點(diǎn)的start方法只能調(diào)用一次。一旦調(diào)用了oscillator的stop方法，想要再發(fā)出這個(gè)頻率的聲音，就只能再創(chuàng)建一個(gè)新的對(duì)象了。在web audio中，我們還可以使用gain節(jié)點(diǎn)配合oscillator的方法，定期發(fā)出指定的聲波。你可以把gain節(jié)點(diǎn)理解為一個(gè)信號(hào)強(qiáng)度調(diào)節(jié)器，通過設(shè)置gain.gain.value的值，可以控制信號(hào)的強(qiáng)弱。這個(gè)值取值范圍是0~1。玩過音箱，效果器這些東西的同學(xué)應(yīng)該就比較好理解了，其實(shí)web audio可以串聯(lián)各種效果的節(jié)點(diǎn)。（下圖僅供參考）

　　　

　　回到代碼的世界：

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秒這個(gè)時(shí)間區(qū)間內(nèi)發(fā)出一個(gè)20000hz的超聲波信號(hào)。這里調(diào)用setValueAtTime方法改變gain節(jié)點(diǎn)的值，波形變化過程如下圖所示。gain節(jié)點(diǎn)有各種不同的方法，這些方法使信號(hào)強(qiáng)度到達(dá)預(yù)設(shè)值有不同的變化過程，讀者可自行查閱web audio的API。

　　通過gain節(jié)點(diǎn)控制信號(hào)和直接使用oscillator的start和stop方法控制信號(hào)各有利弊，具體使用大家可自行考慮。有了信號(hào)源，接下來(lái)就是接收的問題了。很多文章都介紹過html5的音頻可視化，其核心就是通過analyser節(jié)點(diǎn)獲取數(shù)據(jù)。這里簡(jiǎn)單羅列下analyser節(jié)點(diǎn)獲取數(shù)據(jù)的幾種方法。

//通過浮點(diǎn)數(shù)組獲取時(shí)域數(shù)據(jù) var data = new Float32Array(analyser.fftSize); analyser.getFloatTimeDomainData(data);//通過浮點(diǎn)數(shù)組獲取頻域數(shù)據(jù) var data = new Float32Array(analyser.fftSize); analyser.getFloatFrequencyData(data);//通過 Uint8數(shù)組獲取時(shí)域數(shù)據(jù) var data = new Uint8Array(analyser.fftSize); analyser.getByteTimeDomainData(data);//通過 Uint8數(shù)組獲取頻域數(shù)據(jù) var data = new Uint8Array(analyser.fftSize); analyser.getByteFrequencyData(data);

　　時(shí)域信號(hào)和頻域信號(hào)可以通過傅里葉變化互相轉(zhuǎn)換，Jsonic選擇的是unit8數(shù)組獲取頻域信號(hào)，以下是獲取頻域數(shù)據(jù)的代碼。

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數(shù)組獲取的是所有頻率的數(shù)據(jù)，那么怎么找到對(duì)應(yīng)的頻率數(shù)據(jù)呢？又要上物理課了。。。。。。這里要用到?奈奎斯特定理，不懂的同學(xué)可以直接看公式B=2W。通過audioContext節(jié)點(diǎn)sampleRate屬性，我們可以獲取在當(dāng)前web audio上下文的采樣率（一般是192000），那么通過奈奎斯特定理，這個(gè)采樣率/2就是我們能采集到的信號(hào)頻率的范圍了。上面我們采集到的data數(shù)組長(zhǎng)度默認(rèn)是1024。以192000的采樣率為例，data數(shù)組就是把0-96000hz的聲波數(shù)據(jù)均分成1024個(gè)頻率存儲(chǔ)。到這里我們就能獲取到頻率數(shù)據(jù)了。雖然采樣范圍很廣，但是不同設(shè)備通過oscillator節(jié)點(diǎn)能產(chǎn)生的聲波的頻率極限不同，我之前用iphone5測(cè)試的時(shí)候在22500hz左右。

下面簡(jiǎn)單介紹下怎么用Jsonic收發(fā)超聲波數(shù)據(jù)，更多信息可以自行去搗鼓jsonic.net。

　　在jsonic之前的版本中，使用的是峰值分析法解碼數(shù)據(jù)。最近發(fā)布了新的版本，使用的是波形分析法，使用了新的Band對(duì)象。無(wú)論接收還是發(fā)送端，在Jsonic中都要?jiǎng)?chuàng)建一個(gè)band實(shí)例。

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

接收端?demo?（點(diǎn)擊start按鈕后，需要授權(quán)瀏覽器使用麥克風(fēng)）

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

發(fā)射端?demo?（功放，發(fā)射輸入框中的文字）

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

最后附上github地址?https://github.com/ArthusLiang/jsonic?走過路過,給個(gè)star :），同時(shí)也期待前端大神加盟。

轉(zhuǎn)發(fā)請(qǐng)注明出處：http://www.cnblogs.com/Arthus/p/4281442.html

?

轉(zhuǎn)載于:https://www.cnblogs.com/Arthus/p/4281442.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的摇滚吧HTML5！Jsonic超声波前端交互！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。