编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？没错，本文就是以HTML5DeviceAPI为核心，对HTML5的一些新接口作了一个完整的测试，希望能让大家有所启发。目录：一、让音乐随心而动 – 音频处理 Web audioAPI二、捕捉用户摄像头 – 媒体流 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>、XMLHttpRequestvar 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_API4、目的节点（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.htmlhttp://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 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测试实例：http://sy.qq.com/brucewan/device-api/battery.html核心代码：var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
str += '
你的浏览器支持HTML5Battery 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核心代码：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测试实例：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'
}
});
}思维发散：该接口适合的范围很窄，却能做出很贴心的用户体验。1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品，我们自然可以调整我们背景与文字颜色让用户感觉到舒适，我们还可以来一段安静的音乐，甚至使用Web Speech API播报当前时间，并说一声“晚安”，何其温馨；2、该接口也可以应用于H5游戏场景，比如日落时分，我们可以在游戏中使用安静祥和的游戏场景；3、当用户在工作时间将手机放在暗处，偷偷地瞄一眼股市行情的时候，我们可以用语音大声播报，“亲爱的，不用担心，你的股票中国中车马上就要跌停了”，多美的画面。参考文献：https://developer.mozilla.org/en-US/docs/Web/APIhttp://webaudiodemos.appspot.com/http://www.w3.org/2009/dap/【走在时代前列的腾讯HTML 5精品好文】DNF实战总结好文！《腾讯游戏实战！DNF浴火新生H5项目总结》优化HMTL 5页面的6个技巧！《腾讯精品文！六大奇招带你优化HTML5移动页面》H5页面设计实战总结！《春雨先知！腾讯移动端H5页面设计实战分享》原文地址：tgideas.qq作者：万技师【优设网 原创文章 投稿邮箱：2650232288@qq.com】================关于优设网================“优设网uisdc.com“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。【特色推荐】设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。设计微博：拥有粉丝量97万的人气微博@优秀网页设计，欢迎关注获取网页设计资源、下载顶尖设计素材。设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com———————————————————–想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？添加 优秀网页设计 微信号：【youshege】优设哥的全拼您也可以通过扫描下方二维码快速添加：相关文章春雨先知！腾讯移动端H5页面设计实战分享神器推荐！零代码制作属于你的第一个酷炫H5页面腾讯精品文！六大奇招带你优化HTML5移动页面腾讯游戏实战！DNF浴火新生H5项目总结月中福利！献给网页设计师的HTML5/CSS3/JS便捷工具推荐！35款值得网站开发者收藏的JavaScript图形图表库Tag优设哥向您推荐：腾讯游戏实战！DNF浴火新生H5项目总结腾讯ecd招聘【广州招聘】腾讯大粤网腾讯技术文！浅议内滚动布局的概念与实现方法如此风骚！2014年刷爆朋友圈的十大 HTML5 技术案例无觅原文地址：http://www.uisdc.com/tgideas-html5-api-test-1