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

十年前，阿捷的一本《網(wǎng)站重構(gòu)》，為我們開啟了新的篇章；
八年前，我們研究yahoo.com，驚嘆它在IE5下都表現(xiàn)得如此完美；
六年前，Web標(biāo)準(zhǔn)化成了我們的基礎(chǔ)技能，我們開始研究網(wǎng)站性能優(yōu)化；
四年前，我們開始研究自動化工具，自動化測試，誰沒玩過nodejs都不好意思說是頁面仔；
二年前，各種終端風(fēng)起云涌，響應(yīng)式、APP開發(fā)都成為了我們研究的范圍，CSS3動畫開始風(fēng)靡；

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

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

來源：騰訊游戲TGideas（tgideas-hr）

原標(biāo)題：后HTML5時(shí)代I

目錄：

一、讓音樂隨心而動 - 音頻處理 Web audio API
二、捕捉用戶攝像頭 - 媒體流 Media Capture
三、你是逗逼？ - 語音識別 Web Speech API
四、讓我盡情呵護(hù)你 - 設(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ù)進(jìn)行分析、處理的能力，比如混音、過濾。

系統(tǒng)要求：

ios6+、android chrome、android firefox

實(shí)例：

核心代碼：

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

技術(shù)分析：

當(dāng)我們加載完音頻數(shù)據(jù)后，我們將創(chuàng)建一個(gè)全局的AudioContext對象來對音頻進(jìn)行處理，AudioContext可以創(chuàng)建各種不同功能類型的音頻節(jié)點(diǎn)AudioNode，比如
1、源節(jié)點(diǎn)（source node）
我們可以使用兩種方式加載音頻數(shù)據(jù)：
<1>、audio標(biāo)簽
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;
 source.connect(context.destination);
 }
}

xhr.send();

2、分析節(jié)點(diǎn)（analyser node）
我們可以使用AnalyserNode來對音譜進(jìn)行分析，例如：
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;var bufferLength = analyser.frequencyBinCount;var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);function draw() {
 drawVisual = requestAnimationFrame(draw);
 analyser.getByteTimeDomainData(dataArray); // 將dataArray數(shù)據(jù)以canvas方式渲染出來};

draw();

3、處理節(jié)點(diǎn)（gain node、panner node、wave shaper node、delay node、convolver node等）
不同的處理節(jié)點(diǎn)有不同的作用，比如使用BiquadFilterNode調(diào)整音色（大量濾波器）、使用ChannelSplitterNode分割左右聲道、使用GainNode調(diào)整增益值實(shí)現(xiàn)音樂淡入淡出等等。
需要了解更多的音頻節(jié)點(diǎn)可能參考：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

4、目的節(jié)點(diǎn)（destination node）
所有被渲染音頻流到達(dá)的最終地點(diǎn)
思維發(fā)散：
1、可以讓CSS3動畫跟隨背景音樂舞動，可以為我們的網(wǎng)頁增色不少；
2、可以嘗試制作H5酷酷的變聲應(yīng)用，增加與用戶的互動；

3、甚至可以嘗試H5音樂創(chuàng)作。

看看google的創(chuàng)意：

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

簡介：

通過getUserMedia捕捉用戶攝像頭獲取視頻流和通過麥克風(fēng)獲取用戶聲音。

系統(tǒng)要求：

android chrome、android firefox

實(shí)例：

捕獲用戶麥克風(fēng)

核心代碼：

1、攝像頭捕捉
navigator.webkitGetUserMedia ({video: true}, function(stream) {
 video.src = window.URL.createObjectURL(stream);
 localMediaStream = stream;
}, function(e){

})

2、從視頻流中拍照
btnCapture.addEventListener('touchend', function(){ if (localMediaStream) {
canvas.setAttribute('width', video.videoWidth);
canvas.setAttribute('height', video.videoHeight);
ctx.drawImage(video, 0, 0);
}

}, false);

3、用戶聲音錄制
navigator.getUserMedia({audio:true}, function(e) {
context = new audioContext();
audioInput = context.createMediaStreamSource(e);
volume = context.createGain();
recorder = context.createScriptProcessor(2048, 2, 2);
recorder.onaudioprocess = function(e){
recordingLength += 2048;
recorder.connect (context.destination); 
}

}, function(error){});

4、保存用戶錄制的聲音
var buffer = new ArrayBuffer(44 + interleaved.length * 2);var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob… audio.src = event.target.result;

思維發(fā)散：

1、從視頻拍照自定義頭像；
2、H5視頻聊天；
3、結(jié)合canvas完成好玩的照片合成及處理；

4、結(jié)合Web Audio制作有意思變聲應(yīng)用。

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

簡介：

1、將文本轉(zhuǎn)換成語音；

2、將語音識別為文本。

系統(tǒng)要求：

ios7+，android chrome，android firefox

測試實(shí)例：

核心代碼：

1、文本轉(zhuǎn)換成語音，使用SpeechSynthesisUtterance對象；
var msg = new SpeechSynthesisUtterance();var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1msg.text = ‘識別的文本內(nèi)容’;
msg.lang = 'en-US';

speechSynthesis.speak(msg);

2、語音轉(zhuǎn)換為文本，使用SpeechRecognition對象。
var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){ var interim_transcript = ''; 
for (var i = event.resultIndex; i < event.results.length; ++i) {
final_transcript += event.results[i][0].transcript;
}
};

測試結(jié)論：

1、Android支持不穩(wěn)定；語音識別測試失敗（暫且認(rèn)為是某些內(nèi)置接口被墻所致）。

思維發(fā)散：

1、當(dāng)語音識別成為可能，那聲音控制將可以展示其強(qiáng)大的功能。在某些場景，比如開車、網(wǎng)絡(luò)電視，聲音控制將大大改善用戶體驗(yàn)；
2、H5游戲中最終分?jǐn)?shù)播報(bào)，股票信息實(shí)時(shí)聲音提示，Web Speech都可以大放異彩。

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

簡介：

查詢用戶設(shè)備電量及是否正在充電。

系統(tǒng)要求：

android firefox

測試實(shí)例：

核心代碼：

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;var str = '';if (battery) {
 str += '<p>你的瀏覽器支持HTML5 Battery API</p>'; if(battery.charging) {
 str += '<p>你的設(shè)備正在充電</p>';
} else {
 str += '<p>你的設(shè)備未處于充電狀態(tài)</p>';
}
 str += '<p>你的設(shè)備剩余'+ parseInt(battery.level*100)+'%的電量</p>';
} else {
 str += '<p>你的瀏覽器不支持HTML5 Battery API</p>';
}

測試結(jié)論：

1、QQ瀏覽器與UC瀏覽器支持該接口，但未正確顯示設(shè)備電池信息；

2、caniuse顯示android chrome42支持該接口，實(shí)測不支持。

思維發(fā)散：

相對而言，我覺得這個(gè)接口有些雞肋。
很顯然，并不合適用HTML5做電池管理方面的工作，它所提供的權(quán)限也很有限。
我們只能嘗試做一些優(yōu)化用戶體驗(yàn)的工作，當(dāng)用戶設(shè)備電量不足時(shí)，進(jìn)入省電模式，比如停用濾鏡、攝像頭開啟、webGL、減少網(wǎng)絡(luò)請求等。

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

簡介：

Geolocation API用于將用戶當(dāng)前地理位置信息共享給信任的站點(diǎn)，目前主流移動設(shè)備都能夠支持。

系統(tǒng)要求：

ios6+、android2.3+

測試實(shí)例：

核心代碼：

var domInfo = $("#info");// 獲取位置坐標(biāo)if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
domInfo.innerHTML="抱歉，你的瀏覽器不支持地理定位！";
}// 使用騰訊地圖顯示位置function showPosition(position) {
var lat=position.coords.latitude; var lon=position.coords.longitude;

mapholder = $('#mapholder')
mapholder.style.height='250px';
mapholder.style.width = document.documentElement.clientWidth + 'px'; var center = new soso.maps.LatLng(lat, lon); var map = new soso.maps.Map(mapholder,{
center: center,
zoomLevel: 13
}); var geolocation = new soso.maps.Geolocation(); var marker = null;
geolocation.position({}, function(results, status) {
console.log(results); var city = $("#info"); if (status == soso.maps.GeolocationStatus.OK) {
map.setCenter(results.latLng);
domInfo.innerHTML = '你當(dāng)前所在城市: ' + results.name; if (marker != null) {
marker.setMap(null);
} // 設(shè)置標(biāo)記
marker = new soso.maps.Marker({
map: map,
position:results.latLng
});
} else {
alert("檢索沒有結(jié)果，原因: " + status);
}
});
}

測試結(jié)論：

1、Geolocation API的位置信息來源包括GPS、IP地址、RFID、WIFI和藍(lán)牙的MAC地址、以及GSM/CDMS的ID等等。規(guī)范中沒有規(guī)定使用這些設(shè)備的先后順序。
2、初測3g環(huán)境下比wifi環(huán)境理定位更準(zhǔn)確；
3、測試三星 GT-S6358(android2.3) geolocation存在，但顯示位置信息不可用POSITION_UNAVAILABLE。

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

簡介：

Ambient Light API定義了一些事件，這些時(shí)間可以提供源于周圍光亮程度的信息，這通常是由設(shè)備的光感應(yīng)器來測量的。設(shè)備的光感應(yīng)器會提取出輝度信息。

系統(tǒng)要求：

android firefox

測試實(shí)例：

核心代碼：

這段代碼實(shí)現(xiàn)感應(yīng)用前當(dāng)前環(huán)境光強(qiáng)度，調(diào)整網(wǎng)頁背景和文字顏色。

var domInfo = $('#info');if (!('ondevicelight' in window)) {
domInfo.innerHTML = '你的設(shè)備不支持環(huán)境光Ambient Light API';
} else { var lightValue = document.getElementById('dl-value');
window.addEventListener('devicelight', function(event) {
domInfo.innerHTML = '當(dāng)前環(huán)境光線強(qiáng)度為：' + Math.round(event.value) + 'lux'; var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
document.body.style.backgroundColor = backgroundColor; if(event.value < 50) {
document.body.style.color = '#fff'
} else {
document.body.style.color = '#000'
}
});
}

思維發(fā)散：

該接口適合的范圍很窄，卻能做出很貼心的用戶體驗(yàn)。

1、當(dāng)我們根據(jù)Ambient Light強(qiáng)度、陀螺儀信息、當(dāng)?shù)貢r(shí)間判斷出用戶正躺在床上準(zhǔn)備入睡前在體驗(yàn)我們的產(chǎn)品，我們自然可以調(diào)整我們背景與文字顏色讓用戶感覺到舒適，我們還可以來一段安靜的音樂，甚至使用Web Speech API播報(bào)當(dāng)前時(shí)間，并說一聲“晚安”，何其溫馨；

2、該接口也可以應(yīng)用于H5游戲場景，比如日落時(shí)分，我們可以在游戲中使用安靜祥和的游戲場景；

3、當(dāng)用戶在工作時(shí)間將手機(jī)放在暗處，偷偷地瞄一眼股市行情的時(shí)候，我們可以用語音大聲播報(bào)，“親愛的，不用擔(dān)心，你的股票中國中車馬上就要跌停了”，多美的畫面。

參考文獻(xiàn)：

https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com
http://www.w3.org/2009/dap
（未完待續(xù)）