后HTML5时代项目该如何玩出新意？

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

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。