基於HTML5的Web跨裝置超音波通訊方案詳解

        基於HTML5的Web跨裝置超音波通訊方案詳解：

前言：Chirp#在iPhone上掀起了有聲傳輸檔案的序幕，我們再也不需要彩色信件、藍牙配對、IM來傳送資料。它透過「嘰嘰喳喳」的小鳥叫聲來分享數據，簡單有趣，而且可以快速的實現一對多的分享。

        此外支付寶曾經試推過“聲波支付”，利用手機發送超音波至終端作為交易密碼進一步完成交易。然而支付寶的技術目前只是使用在了支付上，而需要可接受聲波支付的特定售貨機方可使用。

        《Advanced Sound for Games and Interactive Apps - WebAudio API》的作者Boris Smus用HTML5的Web Audio API實作了一個基於Web的超音波互聯方案，透過這種方式不需要安裝任何用戶端，也不需要藍牙或NFC的支持，就能夠將兩台用瀏覽器上網的裝置連接在一起並傳遞圖片、音樂、影片等檔案。這個idea很酷，幫助我們在Web#的功能和應用程式層面邁進了一大步（這個想法也許你都想所未想，聞所未聞），下面我們就一起來看看具體的原理和實現過程。

……………………………………✄……………………………………華麗的分隔線

        你口袋裡的手機是一個酷炫的、美觀的、有許多功能的工具。但是當它想要和其它設備對話時，例如電視或筆記本，用戶體驗就大幅下降。 Bill Buxton關於這個主題有一個極富感染力的演講，描述了高科技演化的三個階段：

#        1、#裝置工作：功能的完整性與穩定度

##        2、 裝置流暢：良好的使用者體驗

        3、 許多裝置一起運作

#        我們已經隨著iPhone的發布，正式的進入了第2#個階段，但是連接設備是一件令人痛苦的事。有許多方法可以實現這一點：藍牙、藍牙LE、WiFi直連、透過本地##WiFi 網路發現等等。這篇文章透過一個完全讓人意想不到的角度來解決這個問題：利用超音波來廣播和在相鄰設備間發送資料。最重要的是，這種方法採用Web Audio API#，使得純Web應用程式的連線成為可能。

示範影片

        裝置的通天塔

        #Airplay C 和 Chromecast

是解決相同生態系統（例如蘋果或Google）內裝置連線問題的偉大方法 #，但是普遍問題仍然難以解決。         因為有許多可能的技術途徑，所以可能剛好你要連接的裝置間沒有共同的方法。即便兩個設備都有藍牙，其中一個或許需要配置，但是另外一個卻不支持，或者是支持不同版本的標準。現在這對藍牙來說尤其普遍，許多裝置硬體上支援藍牙4.0

（又名BTLE），但是很多裝置卻因為各種原因不支持這個最新的協議。         在Web上這種情況甚至更糟，因為低階裝置的連線API

因為安全沙盒方面的原因並沒有提供。而由於Web的發展非常緩慢，所以很難想像這種情況能夠在短時間內解決。

        以有趣的方式傳送資料        #        Electric Imp提供的

Blinkup

是一種跨端通訊的有趣方式。它使用了一系列閃光來在智慧型手機和Imp – 一種形似小型SD卡並帶有光線感測器的設備間傳輸資料。

        

撥接數據機做了類似的事情。它們在類比電話線上編碼和解碼數位資料。還記得那些惱人的連結噪音嗎？撥號數據機會打開揚聲器來讓使用者了解正在進行握手。如果你忘記了這些，可以在這裡複習#一下。即使在今天的類比電話裡，你在鍵盤上按下數字鍵時聽到的聲音也相當於電話系統用於模擬數字轉換的頻率。這個轉換使用了

雙音多頻訊號（DTMF）。

        

你的手機和周圍的其它許多裝置都有揚聲器和麥克風。這兩種硬體可以用聲音來發送和接收數據，類似於調製解調器在電話線路上所做的事情。更棒的是，如果作業系統支援發送和接收的頻率夠高，我們可以創建一個無聲的資料通道。         用聲音傳送資料

###########        ###我應該注意到透過聲音編碼資料並不新穎。 ######音訊浮水印######的創意就是把簽名編碼到音樂中，聽眾通過人類的方式並無法識別，但是卻能夠被另外一台設備所理解。這是一種防止盜版的聰明方式。 ######

        #大多數普通的揚聲器能夠產生44.1KHz取樣率的聲音（這導致最高的頻率為# 22KHz - 根據香農取樣定理）。這讓我們將數據不僅編碼為聲音，還會產生成人無法聽到的音訊。不過兒童和動物仍然有可能會聽到：）

        技術上需要注意的是，麥克風有時候與揚聲器不相容，尤其是在手機上，因為它們經常會針對人們的通話進行最佳化，透過更低的取樣率來讓聲音效果更佳。在其他情況下，即便硬體相容，韌體也需要運行在低取樣率上來保證電量供應。如果是這樣的話，設備將無法接收聲波，同時基於聲音的連接將只能單向進行。

        SONICNET.JS#Web Audio的實作

        為了說明這些概念，我搭建了一個JavaScript庫#，用於透過聲音傳送和接收數據。我的做法沒有學習複雜的音訊浮水印技術，甚至比DTMF更為簡單。基本上，你可以指定使用一個範圍的頻率，以及可以傳送的字母集合。頻譜被分成對應於所指定開始和結束字母之間的範圍，每個字母/#程式碼對應整個頻率範圍內的一部分。

        傳送端將需要傳送的每個字元轉換為對應頻率範圍的中點數值，並且在一個時間間隔內傳送該頻率。接收端會對訊號進行不連續的傅立葉變換（宇捷註：我的本科專業就是資訊與通訊工程，學過數位訊號處理的朋友應該對此非常了解），並且尋找指定頻率範圍內的峰值。在找到一個訊號間隔內的峰值後，它會將頻率轉換回字元。這基本上是一個單音多頻訊號（STMF）的方案。

        有一個傳送時機的問題：在傳送端，應該多久傳送一個字元；在接收端，應該多久接收？我們用了一個簡單的方案來規避相鄰的重複字元。

        我設計了一個類似socket的#API用於聲波通訊。用戶端程式碼看起來如下：

ssocket = new SonicSocket({alphabet: '0123456789'});
function onButton() {
 ssocket.send('31415');
}

##        服務端看起來像這樣：

sserver = new SonicServer({alphabet: '0123456789'});
sserver.on('message', function(message) {
  //Expect message to be '31415'.
 console.log(message);
});
sserver.start();

        JS 庫支援github。

        #當然，使用它需要一個Web Audio的實作（大多數在傳送端使用#OscillatorNode ，在接收端用AnalyserNode# ）。我已經嘗試過Macbook上Chrome到Chrome，以及 Mac Chrome到Android Chrome的傳輸案例。

        我寫了一對範例來說明這個想法。它們出現在本文開頭所示範的影片裡。第一個範例讓你可以從一台裝置上傳送表情到另外一台。它使用了一個很小的字符集，僅僅包括6個字符，每個對應1#種表情。你可以從6種表情中挑選一個，對應的字元將會透過聲波網路發送出去，在另一端被接收和展示出來。

        一種對sonicnet.js更現實的應用是這個聊天應用，產生不重複的5位元令牌並且用它來在2台裝置間建立連線。這在配對伺服器的幫助下完成，在這兩台設備間透過WebSocket#來建立代理連線。一旦連接建立後，對話本身將透過WebSocket發送。 服務端程式碼託管在nodejitsu#上。

        結論與期望

##        Web Audio API API        Web Audio API API #已經可以演變到讓這樣的應用成為可能，這是一個重大的進步。我迷上了sonicnet.js物聯網上的實作。這是純Web技術，可以用來配對裝置。無所不在的瀏覽器和音訊硬體結合將會是一個巨大的勝利，甚至在硬體層面，Web平台完全不需要等待藍牙或其它近場連接技術的成熟。

###

        如果這篇文章已經激起了你的興趣，你可以嘗試使用sonicnet.js來寫一個應用程式。就像我前文提到的一樣，接收高頻音訊因為硬體/韌體限制並不是在所有的設備上都可用，所以我很想知道哪些可用，而哪些不可以。我的期望是，大多數手機應該只能發送，而大多數筆記本可以同時接收和發送。如果你在你的裝置上嘗試了表情示範，請填寫這份表格。在寫這篇文章的時候，Android平台上Chrome Beta版本不支援即時輸入，所以從手機傳輸資料到筆記本是唯一的選擇。

#

以上是基於HTML5的Web跨裝置超音波通訊方案詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！