https://www.jmqz1000.com

后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,比如

后HTML5时代项目该如何玩出新意? 学知网

  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;

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

相关文章阅读