编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML5的势头，同志们，你看到的这些，可都是钱呐。
十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；
十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；
八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；
六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；
四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；
二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；
如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？
一、让音乐随心而动-音频处理WebaudioAPI二、捕捉用户摄像头-媒体流MediaCapture三、你是逗逼？-语音识别WebSpeechAPI四、让我尽情呵护你-设备电量BatteryAPI五、获取用户位置-地理位置GeolocationAPI六、把用户捧在手心-环境光AmbientLightAPI七、陀螺仪Deviceorientation八、Websocket九、NFC十、震动-VibrationAPI十一、网络环境ConnectionAPI
简介：
Audio对象提供的只是音频文件的播放，而WebAudio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。
系统要求：
ios6+、androidchrome、androidfirefox
实例：
核心代码：
varcontext=newwebkitAudioContext();varsource=context.createBufferSource();//创建一个声音源source.buffer=buffer;//告诉该源播放何物createBufferSourcesource.connect(context.destination);//将该源与硬件相连source.start(0);//播放技术分析：
当我们加载完音频数据后，我们将创建一个全局的AudioContext对象来对音频进行处理，AudioContext可以创建各种不同功能类型的音频节点AudioNode，比如
1、源节点（sourcenode）
我们可以使用两种方式加载音频数据：<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、分析节点（analysernode）
我们可以使用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、处理节点（gainnode、pannernode、waveshapernode、delaynode、convolvernode等）
不同的处理节点有不同的作用，比如使用BiquadFilterNode调整音色（大量滤波器）、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。
4、目的节点（destinationnode）
所有被渲染音频流到达的最终地点
思维发散：
通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。
androidchrome、androidfirefox
捕获用户摄像头捕获用户麦克风
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);//androidchromeaudio不支持blob…audio.src=event.target.result;思维发散：
1、从视频拍照自定义头像；2、H5视频聊天；3、结合canvas完成好玩的照片合成及处理；4、结合WebAudio制作有意思变声应用。
1、将文本转换成语音；2、将语音识别为文本。
系统要求：ios7+，androidchrome，androidfirefox
测试实例：
1、文本转换成语音，使用SpeechSynthesisUtterance对象；
varmsg=newSpeechSynthesisUtterance();varvoices=window.speechSynthesis.getVoices();msg.volume=1;//0to1msg.text=‘识别的文本内容’;msg.lang='en-US';speechSynthesis.speak(msg);2、语音转换为文本，使用SpeechRecognition对象。
varnewRecognition=newwebkitSpeechRecognition();newRecognition.onresult=function(event){ varinterim_transcript=''; for(vari=event.resultIndex;i 1、Android支持不稳定；语音识别测试失败（暂且认为是某些内置接口被墙所致）。 1、当语音识别成为可能，那声音控制将可以展示其强大的功能。在某些场景，比如开车、网络电视，声音控制将大大改善用户体验；2、H5游戏中最终分数播报，股票信息实时声音提示，WebSpeech都可以大放异彩。 查询用户设备电量及是否正在充电。 androidfirefox varbattery=navigator.battery||navigator.webkitBattery||navigator.mozBattery||navigator.msBattery;varstr='';if(battery){str+=' 你的浏览器支持HTML5BatteryAPI 你的设备正在充电 你的设备未处于充电状态 你的设备剩余'+parseInt(battery.level*100)+'%的电量 你的浏览器不支持HTML5BatteryAPI
相对而言，我觉得这个接口有些鸡肋。很显然，并不合适用HTML5做电池管理方面的工作，它所提供的权限也很有限。我们只能尝试做一些优化用户体验的工作，当用户设备电量不足时，进入省电模式，比如停用滤镜、摄像头开启、webGL、减少网络请求等。
GeolocationAPI用于将用户当前地理位置信息共享给信任的站点，目前主流移动设备都能够支持。
ios6+、android2.3+
这段代码实现感应用前当前环境光强度，调整网页背景和文字颜色。
vardomInfo=$('#info');if(!('ondevicelight'inwindow)){ domInfo.innerHTML='你的设备不支持环境光AmbientLightAPI';}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' } });}思维发散：
该接口适合的范围很窄，却能做出很贴心的用户体验。
2、该接口也可以应用于H5游戏场景，比如日落时分，我们可以在游戏中使用安静祥和的游戏场景；