html音频从10秒播放至30秒,Web Audio介绍

Web Audio还是一个比较新的JavaScript API,它和HTML5中的<audio>是不同的,简单来说,<audio>标签是为了能在网页中嵌入音频文件,和播放器一样,具有操作界面,而Web Audio则是给了开发者对音频数据进行处理、分析的能力,例如混音、过滤等,类似于对音频数据进行PS。

一般的网站应用应该是用不倒这些API中的,但是一些游戏引擎或者在线音乐编辑等类型的网站应该用得到。

Web Audio API紧紧围绕着一个概念设计:audio context,它就像是一个有向图,途中的每个节点都是一个audio node,音频数据从源节点按照程序中指定的边一步一步的走的目的节点。

如果你接触过directshow开发,audio context就像filter manager,而audio node则是各种filter,当然,如果你是个linux开发者,这有看起来像是pipe。一个audio context中的audio node可以有很多,上面的是最简单的形式了。而audio node又包括四种,

1. 源节点(source node)

2. 处理节点(gain node、panner node、wave shaper node、oscillator node、delay node、convolver node等)

4. 目的节点(destination node)

初始化audio context

现在只有firefox和webkit系的浏览器(chrome、safari、opera)都支持web audio api,不过和其他新标准一样,每家浏览器还是使用了特定的前缀,所以在调用API时,要考虑一下这个问题。

一个audio context对象可以支持多个节点,包括source和destination节点,每个新创建的audio context都有一个默认的目的节点,通常代表当前机器上的默认音频输出设备,可以通过context.destination来获取。

创建audio node

播放声音

所谓巧妇难为无米之炊,没有声音再好的API也出不来。那么如何得到音频数据呢?既然成为Web Audio,数据肯定是从web上来。下面就是从服务器端下载音频文件,然后解码播放的代码片段。

时间控制

web audio提供了非常精准的时间控制,所有的时间都是以秒来计数的。是的,你没看错,是秒,不过这里的秒在底层都是使用高精度的浮点数存储的,其实际精确度是很高的。在创建的audio context中都有一个同步系统,用来对外提供绝对时间,这个时间可以通过context.currentTime获取。这个绝对时间从0开始,而且一旦新建context,就开始走了。

使用代码source.start(time)中,则要求在绝对时间为time时开始播放,当然,如果这个时间time小于context.currentTime则会立即播放,所以上面代码片段中的source.start(0),其实就是立即播放的意思,如果要指定在N秒后播放,则要使用source.start(context.currentTime + N)。

source.start还可以指定另外两个参数,一个是音频的开始时间,一个音频的持续时间,例如一个一分钟的视频,你可以使用source.start(10, 20, 30)来指定10秒后播放音频文件20秒到20 + 30秒之间的内容。至于暂停、继续功能,则需要自己手工的记录时间点,web audio自身是不提供这些功能的,另外一点就是,web audio的定时功能是不可取消的,嫁出去的姑娘,泼出去的水啊。

到此为止,就是web audio最基本的应用。当然,web audio不止这么简单,使用其他类型的audio node,基本可以完成一个小型的混音室。

原文:http://www.cnblogs.com/ericHTML5/p/4039530.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值