十二年前，无论多么复杂的布局，在我们神奇的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;

　　}

　　};

　　测试结论：