n网页重构on 2015-06-25 16:24:43 by万技师
十二年前,无论多么复杂的布局,在我们神奇的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
核心代码:
varcontext =newwebkitAudioContext();varsource = context.createBufferSource();// 创建一个声音源source.buffer = buffer;// 告诉该源播放何物createBufferSourcesource.connect(context.destination);// 将该源与硬件相连source.start(0);//播放
技术分析:
当我们加载完音频数据后,我们将创建一个全局的AudioContext对象来对音频进行处理,AudioContext可以创建各种不同功能类型的音频节点AudioNode,比如
1、源节点(source node)
我们可以使用两种方式加载音频数据:
<1>、audio标签
varsound, audio =newAudio();audio.addEventListener('canplay',function() { sound = context.createMediaElementSource(audio); sound.connect(context.destination);});audio.src ='/audio.mp3';
<2>、XMLHttpRequest
varsound, context = createAudioContext();varaudioURl ='/audio.mp3';// 音频文件URLvarxhr =newXMLHttpRequest();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来对音谱进行分析,例如:
varaudioCtx =new(window.AudioContext || window.webkitAudioContext)();varanalyser = audioCtx.createAnalyser();analyser.fftSize =2048;varbufferLength = analyser.frequencyBinCount;vardataArray =newUint8Array(bufferLength);analyser.getByteTimeDomainData(dataArray);functiondraw(){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 =newaudioContext();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、保存用户录制的声音
varbuffer =newArrayBuffer(44+ interleaved.length *2);varview =newDataView(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对象;
varmsg =newSpeechSynthesisUtterance();varvoices = window.speechSynthesis.getVoices();msg.volume =1;// 0 to 1msg.text = ‘识别的文本内容’;msg.lang ='en-US';speechSynthesis.speak(msg);
2、语音转换为文本,使用SpeechRecognition对象。
varnewRecognition =newwebkitSpeechRecognition();newRecognition.onresult =function(event){varinterim_transcript ='';for(vari = 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
测试实例:
http://sy.qq.com/brucewan/device-api/battery.html
核心代码:
varbattery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;varstr ='';if(battery) { str +='
你的浏览器支持HTML5 Battery API
';if(battery.charging) { str +='你的设备正在充电
';}else{ str +='你的设备未处于充电状态
';} str +='你的设备剩余'+ parseInt(battery.level*100)+'%的电量
';}else{ str +='你的浏览器不支持HTML5 Battery API
';}测试结论:
1、QQ浏览器与UC浏览器支持该接口,但未正确显示设备电池信息;
2、caniuse显示android chrome42支持该接口,实测不支持。
思维发散:
相对而言,我觉得这个接口有些鸡肋。
很显然,并不合适用HTML5做电池管理方面的工作,它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作,当用户设备电量不足时,进入省电模式,比如停用滤镜、摄像头开启、webGL、减少网络请求等。
五、获取用户位置 - 地理位置 Geolocation
简介:
Geolocation API用于将用户当前地理位置信息共享给信任的站点,目前主流移动设备都能够支持。
系统要求:
ios6+、android2.3+
测试实例:
http://sy.qq.com/brucewan/device-api/geolocation.html
核心代码:
vardomInfo = $("#info");// 获取位置坐标if(navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition,showError);}else{domInfo.innerHTML="抱歉,你的浏览器不支持地理定位!";}// 使用腾讯地图显示位置functionshowPosition(position){varlat=position.coords.latitude;varlon=position.coords.longitude;mapholder = $('#mapholder')mapholder.style.height='250px';mapholder.style.width = document.documentElement.clientWidth +'px';varcenter =newsoso.maps.LatLng(lat, lon);varmap =newsoso.maps.Map(mapholder,{center: center,zoomLevel:13});vargeolocation =newsoso.maps.Geolocation();varmarker =null;geolocation.position({},function(results, status) {console.log(results);varcity = $("#info");if(status == soso.maps.GeolocationStatus.OK) {map.setCenter(results.latLng);domInfo.innerHTML ='你当前所在城市: '+ results.name;if(marker !=null) {marker.setMap(null);}// 设置标记marker =newsoso.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
测试实例:
http://sy.qq.com/brucewan/device-api/ambient-light.html
核心代码:
这段代码实现感应用前当前环境光强度,调整网页背景和文字颜色。
vardomInfo = $('#info');if(!('ondevicelight'inwindow)) {domInfo.innerHTML ='你的设备不支持环境光Ambient Light API';}else{varlightValue = document.getElementById('dl-value');window.addEventListener('devicelight',function(event) {domInfo.innerHTML ='当前环境光线强度为:'+ Math.round(event.value) +'lux';varbackgroundColor ='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'}});}
思维发散:
该接口适合的范围很窄,却能做出很贴心的用户体验。
1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品,我们自然可以调整我们背景与文字颜色让用户感觉到舒适,我们还可以来一段安静的音乐,甚至使用Web Speech API播报当前时间,并说一声“晚安”,何其温馨;
2、该接口也可以应用于H5游戏场景,比如日落时分,我们可以在游戏中使用安静祥和的游戏场景;
3、当用户在工作时间将手机放在暗处,偷偷地瞄一眼股市行情的时候,我们可以用语音大声播报,“亲爱的,不用担心,你的股票中国中车马上就要跌停了”,多美的画面。
参考文献:
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/
(未完待续)
tgideas