後HTML5時代項目該如何玩出新意？

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

　　十年前，阿捷的一本《網站重構》，為我們開啟了新的篇章;

　　八年前，我們研究yahoo.com，驚歎它在IE5下都表現得如此完美;

　　六年前，Web標准化成了我們的基礎技能，我們開始研究網站性能優化;

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

　　二年前，各種終端風起雲湧，響應式、APP開發都成為了我們研究的范圍，CSS3動畫開始風靡;

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

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

　　目錄：

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

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

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

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

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

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

　　七、陀螺儀 Deviceorientation

　　八、Websocket

　　九、NFC

　　十、震動 - Vibration API

　　十一、網絡環境 Connection API

　　一、讓音樂隨心而動 - 音頻處理 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，比如

　　1、源節點(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'; // 音頻文件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、分析節點(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();

　　3、處理節點(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

　　4、目的節點(destination node)

　　所有被渲染音頻流到達的最終地點

　　思維發散：

　　1、可以讓CSS3動畫跟隨背景音樂舞動，可以為我們的網頁增色不少;

　　2、可以嘗試制作H5酷酷的變聲應用，增加與用戶的互動;

　　3、甚至可以嘗試H5音樂創作。

　　二、捕捉用戶攝像頭 - 媒體流 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

　　核心代碼：

　　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;

　　思維發散：

　　1、從視頻拍照自定義頭像;

　　2、H5視頻聊天;

　　3、結合canvas完成好玩的照片合成及處理;

　　4、結合Web Audio制作有意思變聲應用。

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

　　簡介：

　　1、將文本轉換成語音;

　　2、將語音識別為文本。

　　系統要求：

　　ios7+，android chrome，android firefox

　　測試實例：

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

　　核心代碼：

　　1、文本轉換成語音，使用SpeechSynthesisUtterance對象;

　　var msg = new SpeechSynthesisUtterance();var voices = window.speechSynthesis.getVoices();

　　msg.volume = 1; // 0 to 1msg.text = ‘識別的文本內容’;

　　msg.lang = 'en-US';

　　speechSynthesis.speak(msg);

　　2、語音轉換為文本，使用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;

　　}

　　};

　　測試結論：