十二年前，無論多么復(fù)雜的布局，在我們神奇的table面前，都不是問題;

　　十年前，阿捷的一本《網(wǎng)站重構(gòu)》，為我們開啟了新的篇章;

　　八年前，我們研究yahoo.com，驚嘆它在IE5下都表現(xiàn)得如此完美;

　　六年前，Web標準化成了我們的基礎(chǔ)技能，我們開始研究網(wǎng)站性能優(yōu)化;

　　四年前，我們開始研究自動化工具，自動化測試，誰沒玩過nodejs都不好意思說是頁面仔;

　　二年前，各種終端風(fēng)起云涌，響應(yīng)式、APP開發(fā)都成為了我們研究的范圍，CSS3動畫開始風(fēng)靡;

　　如今，CSS3動畫、Canvas、SVG、甚至webGL你已經(jīng)非常熟悉，你是否開始探尋，接下來，我們可以玩什么，來為我們項目帶來一絲新意?

　　沒錯，本文就是以HTML5 Device API為核心，對HTML5的一些新接口作了一個完整的測試，希望能讓大家有所啟發(fā)。

　　目錄：

　　一、讓音樂隨心而動 - 音頻處理 Web audio API

　　二、捕捉用戶攝像頭 - 媒體流 Media Capture

　　三、你是逗逼? - 語音識別 Web Speech API

　　四、讓我盡情呵護你 - 設(shè)備電量 Battery API

　　五、獲取用戶位置 - 地理位置 Geolocation API

　　六、把用戶捧在手心 - 環(huán)境光 Ambient Light API

　　七、陀螺儀 Deviceorientation

　　八、Websocket

　　九、NFC

　　十、震動 - Vibration API

　　十一、網(wǎng)絡(luò)環(huán)境 Connection API

　　一、讓音樂隨心而動 - 音頻處理 Web audio API

　　簡介：

　　Audio對象提供的只是音頻文件的播放，而Web Audio則是給了開發(fā)者對音頻數(shù)據(jù)進行分析、處理的能力，比如混音、過濾。

　　系統(tǒng)要求：

　　ios6+、android chrome、android firefox

　　實例：

　　http://sy.qq.com/brucewan/device-api/web-audio.html

　　核心代碼：

　　var context = new webkitAudioContext();var source = context.createBufferSource(); // 創(chuàng)建一個聲音源source.buffer = buffer; // 告訴該源播放何物 createBufferSourcesource.connect(context.destination); // 將該源與硬件相連source.start(0); //播放

　　技術(shù)分析：

　　當我們加載完音頻數(shù)據(jù)后，我們將創(chuàng)建一個全局的AudioContext對象來對音頻進行處理，AudioContext可以創(chuàng)建各種不同功能類型的音頻節(jié)點AudioNode，比如

　　1、源節(jié)點(source node)

　　我們可以使用兩種方式加載音頻數(shù)據(jù)：

　　<1>、audio標簽

　　var sound, audio = new Audio();

　　audio.addEventListener('canplay', function() {

　　sound = context.createMediaElementSource(audio);

　　sound.connect(context.destination);

　　});

　　audio.src = '/audio.mp3';

　　<2>、XMLHttpRequest

　　var sound, context = createAudioContext();var audioURl = '/audio.mp3'; // 音頻文件URLvar xhr = new XMLHttpRequest();

　　xhr.open('GET', audioURL, true);

　　xhr.responseType = 'arraybuffer';

　　xhr.onload = function() {

　　context.decodeAudioData(request.response, function (buffer) {

　　source = context.createBufferSource();

　　source.buffer = buffer;

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。