转载

后 HTML5 时代（一）

十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；

十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；

八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；

六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；

四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；

二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；

如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？

没错，本文就是以HTML5 Device API为核心，对HTML5的一些新接口作了一个完整的测试，希望能让大家有所启发。

实例：

后 HTML5 时代（一）

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，比如

后 HTML5 时代（一）

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'; // 音频文件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();

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音乐创作。

看看google的创意：

http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html

二、捕捉用户摄像头 - 媒体流 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

测试实例：

后 HTML5 时代（一）

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 1 msg.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;  } };

测试结论：

1、Android支持不稳定；语音识别测试失败（暂且认为是某些内置接口被墙所致）。

思维发散：

1、当语音识别成为可能，那声音控制将可以展示其强大的功能。在某些场景，比如开车、网络电视，声音控制将大大改善用户体验；

2、H5游戏中最终分数播报，股票信息实时声音提示，Web Speech都可以大放异彩。

四、让我尽情呵护你 - 设备电量 Battery API

简介：

查询用户设备电量及是否正在充电。

系统要求：

android firefox

测试实例：

后 HTML5 时代（一）

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>'; }

测试结论：

1、QQ浏览器与UC浏览器支持该接口，但未正确显示设备电池信息；

2、caniuse显示android chrome42支持该接口，实测不支持。

思维发散：

相对而言，我觉得这个接口有些鸡肋。

很显然，并不合适用HTML5做电池管理方面的工作，它所提供的权限也很有限。

我们只能尝试做一些优化用户体验的工作，当用户设备电量不足时，进入省电模式，比如停用滤镜、摄像头开启、webGL、减少网络请求等。

五、获取用户位置 - 地理位置 Geolocation

简介：

Geolocation API用于将用户当前地理位置信息共享给信任的站点，目前主流移动设备都能够支持。

系统要求：

ios6+、android2.3+

测试实例：

后 HTML5 时代（一）

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

测试结论：

1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。

2、初测3g环境下比wifi环境理定位更准确；

3、测试三星 GT-S6358(android2.3) geolocation存在，但显示位置信息不可用POSITION_UNAVAILABLE。

六、把用户捧在手心 - 环境光 Ambient Light

简介：

Ambient Light API定义了一些事件，这些时间可以提供源于周围光亮程度的信息，这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。

系统要求：

android firefox

测试实例：

后 HTML5 时代（一）

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