後HTML5時代

十二年前，不管多麼複雜的佈局，在咱們神奇的table面前，都不是問題；
十年前，阿捷的一本《網站重構》，爲咱們開啓了新的篇章；
八年前，咱們研究yahoo.com，驚歎它在IE5下都表現得如此完美；
六年前，Web標準化成了咱們的基礎技能，咱們開始研究網站性能優化；
四年前，咱們開始研究自動化工具，自動化測試，誰沒玩過nodejs都很差意思說是頁面仔；
二年前，各類終端風起雲涌，響應式、APP開發都成爲了咱們研究的範圍，CSS3動畫開始風靡；
現在，CSS3動畫、Canvas、SVG、甚至webGL你已經很是熟悉，你是否開始探尋，接下來，咱們能夠玩什麼，來爲咱們項目帶來一絲新意？
沒錯，本文就是以HTML5 Device API爲核心，對HTML5的一些新接口做了一個完整的測試，但願能讓你們有所啓發。

1、讓音樂隨心而動 - 音頻處理 Web audio API
2、捕捉用戶攝像頭 - 媒體流 Media Capture
3、你是逗逼？ - 語音識別 Web Speech API
4、讓我盡情呵護你 - 設備電量 Battery API
5、獲取用戶位置 - 地理位置 Geolocation API
6、把用戶捧在手心 - 環境光 Ambient Light API

 

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

簡介：
Audio對象提供的只是音頻文件的播放，而Web Audio則是給了開發者對音頻數據進行分析、處理的能力，好比混音、過濾。

系統要求：
ios6+、android chrome、android firefox

實例：

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

核心代碼：

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

技術分析：
當咱們加載完音頻數據後，咱們將建立一個全局的AudioContext對象來對音頻進行處理，AudioContext能夠建立各類不一樣功能類型的音頻節點AudioNode，好比：

 一、源節點（source node）
咱們可使用兩種方式加載音頻數據：
<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'; // 音頻文件URL
var 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();

二、分析節點（analyser node）
咱們可使用AnalyserNode來對音譜進行分析，例如：

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數據以canvas方式渲染出來
};

draw();

三、處理節點（gain node、panner node、wave shaper node、delay node、convolver node等）
不一樣的處理節點有不一樣的做用，好比使用BiquadFilterNode調整音色（大量濾波器）、使用ChannelSplitterNode分割左右聲道、使用GainNode調整增益值實現音樂淡入淡出等等。
須要瞭解更多的音頻節點可能參考：
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
四、目的節點（destination node）
全部被渲染音頻流到達的最終地點

思惟發散：
一、可讓CSS3動畫跟隨背景音樂舞動，能夠爲咱們的網頁增色很多；
二、能夠嘗試製做H5酷酷的變聲應用，增長與用戶的互動；
三、甚至能夠嘗試H5音樂創做。
看看google的創意：
http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html

 

 

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

簡介：
經過getUserMedia捕捉用戶攝像頭獲取視頻流和經過麥克風獲取用戶聲音。

系統要求：
android chrome、android firefox

實例：

捕獲用戶攝像頭	捕獲用戶麥克風
http://sy.qq.com/brucewan/ device-api/camera.html	http://sy.qq.com/brucewan/ device-api/microphone-usermedia.html

核心代碼：
一、攝像頭捕捉

navigator.webkitGetUserMedia ({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
    }, function(e){}
)

二、從視頻流中拍照

btnCapture.addEventListener('touchend', function(){
	if (localMediaStream) {
		canvas.setAttribute('width', video.videoWidth);
		canvas.setAttribute('height', video.videoHeight);
		ctx.drawImage(video, 0, 0);
	}
}, false);

三、用戶聲音錄製

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

四、保存用戶錄製的聲音

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;

思惟發散：
一、從視頻拍照自定義頭像；
二、H5視頻聊天；
三、結合canvas完成好玩的照片合成及處理；
四、結合Web Audio製做有意思變聲應用。

 

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

簡介：
一、將文本轉換成語音；
二、將語音識別爲文本。

系統要求：
ios7+，android chrome，android firefox

測試實例：

http://sy.qq.com/brucewan/device-api/microphone-webspeech.html

核心代碼：
一、文本轉換成語音，使用SpeechSynthesisUtterance對象；

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘識別的文本內容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);

二、語音轉換爲文本，使用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;
	}
};

測試結論：
一、Android支持不穩定；語音識別測試失敗（暫且認爲是某些內置接口被牆所致）。

思惟發散：
一、當語音識別成爲可能，那聲音控制將能夠展現其強大的功能。在某些場景，好比開車、網絡電視，聲音控制將大大改善用戶體驗；
二、H5遊戲中最終分數播報，股票信息實時聲音提示，Web Speech均可以大放異彩。

 

 

4、讓我盡情呵護你 - 設備電量 Battery API

簡介：
查詢用戶設備電量及是否正在充電。

系統要求：
android firefox

測試實例：

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

核心代碼：

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>你的設備正在充電</p>';
} else {
    str += '<p>你的設備未處於充電狀態</p>';
}
    str += '<p>你的設備剩餘'+ parseInt(battery.level*100)+'%的電量</p>';
} else {
    str += '<p>你的瀏覽器不支持HTML5 Battery API</p>';
}

測試結論：
一、QQ瀏覽器與UC瀏覽器支持該接口，但未正確顯示設備電池信息；
二、caniuse顯示android chrome42支持該接口，實測不支持。

思惟發散：
相對而言，我以爲這個接口有些雞肋。
很顯然，並不合適用HTML5作電池管理方面的工做，它所提供的權限也頗有限。
咱們只能嘗試作一些優化用戶體驗的工做，當用戶設備電量不足時，進入省電模式，好比停用濾鏡、攝像頭開啓、webGL、減小網絡請求等。

 

 

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

簡介：
Geolocation API用於將用戶當前地理位置信息共享給信任的站點，目前主流移動設備都可以支持。

系統要求：
ios6+、android2.3+

測試實例：

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

核心代碼：

var domInfo =  $("#info");

// 獲取位置座標
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 = '你當前所在城市: ' + results.name;
		if (marker != null) {
			marker.setMap(null);
		}
		// 設置標記
		marker = new soso.maps.Marker({
			map: map,
			position:results.latLng
		});
		} else {
			alert("檢索沒有結果，緣由: " + status);
		}
	});
}

測試結論：
一、Geolocation API的位置信息來源包括GPS、IP地址、RFID、WIFI和藍牙的MAC地址、以及GSM/CDMS的ID等等。規範中沒有規定使用這些設備的前後順序。
二、初測3g環境下比wifi環境理定位更準確；
三、測試三星 GT-S6358(android2.3) geolocation存在，但顯示位置信息不可用POSITION_UNAVAILABLE。

 

6、把用戶捧在手心 - 環境光 Ambient Light

簡介：
Ambient Light API定義了一些事件，這些時間能夠提供源於周圍光亮程度的信息，這一般是由設備的光感應器來測量的。設備的光感應器會提取出輝度信息。

系統要求：
android firefox

測試實例：

http://sy.qq.com/brucewan/device-api/ambient-light.html

核心代碼：
這段代碼實現感應用前當前環境光強度，調整網頁背景和文字顏色。

var domInfo = $('#info');
if (!('ondevicelight' in window)) {
	domInfo.innerHTML = '你的設備不支持環境光Ambient Light API';
} else {
	var lightValue = document.getElementById('dl-value');
	window.addEventListener('devicelight', function(event) {
		domInfo.innerHTML = '當前環境光線強度爲：' + 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'
		}
	});
}

思惟發散：
該接口適合的範圍很窄，卻能作出很貼心的用戶體驗。
一、當咱們根據Ambient Light強度、陀螺儀信息、當地時間判斷出用戶正躺在牀上準備入睡前在體驗咱們的產品，咱們天然能夠調整咱們背景與文字顏色讓用戶感受到溫馨，咱們還能夠來一段安靜的音樂，甚至使用Web Speech API播報當前時間，並說一聲「晚安」，何其舒適；
二、該接口也能夠應用於H5遊戲場景，好比日落時分，咱們能夠在遊戲中使用安靜祥和的遊戲場景；
三、當用戶在工做時間將手機放在暗處，偷偷地瞄一眼股市行情的時候，咱們能夠用語音大聲播報，「親愛的，不用擔憂，你的股票中國中車立刻就要跌停了」，多美的畫面。

 

參考文獻：
https://developer.mozilla.org/en-US/docs/Web/API
http://www.w3.org/2009/dap/