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)

# Development #

#### 初始化audio context ####

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

window.AudioContext = (window.AudioContext || window.webkitAudioContext);
if(window.AudioContext) {
var context = new window.AudioContext();
} else {
console.log('not support web audio api');
}

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

#### 创建audio node ####

// create source node
var source = context.createBufferSource();
// create gain node
var gain = context.createGain();
#### audio node之间的链接、断开操作 #### // connect source to gain
source.connect(gain);
// connect gain to node
gain.connect(context.destination); // disconnect source from gain
source.disconect(0);
// disconnect gain from destination
gain.disconnect(0);

  

#### 播放声音 ####

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

var context = createAudioContext();

var audioURl = 'http://...'; // 这里替换为音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer'; // XMLHttpRequest 2的新东西
xhr.onload = function() {
// 音频数据在request.response中,而不是request.requestText
context.decodeAudioData(request.response, function (buffer) {
source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0); // 0是当前audio context中的同步时间
}
}
xhr.send();

#### 时间控制 ####

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的定时功能是不可取消的,嫁出去的姑娘,泼出去的水啊。

var startOffset = 0; // audio file offset
var startTime = 0; // web audio absolute time function start() {
startTime = context.currentTime;
var source = context.createBufferSource();
source.buffer = buffer;
source.loop = true;
source.connect(context.destination);
source.start(0, startOffset % buffer.duration);
} function pause() {
source.stop();
// 已经播放了多长时间
startOffset += context.currentTime - startTime;
} function resume() {
// 和<audio>标签嵌入的音频文件不同,source node是不能重复播放的,所以继续功能其实就是play
play();
}

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

Web Audio介绍的更多相关文章

  1. Web Audio初步介绍和实践

    Web Audio还是一个比较新的JavaScript API,它和HTML5中的<audio>是不同的,简单来说,<audio>标签是为了能在网页中嵌入音频文件,和播放器一样 ...

  2. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  3. Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo

    1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...

  4. HTML5 ——web audio API 音乐可视化(二)

    上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...

  5. web audio living

    总结网页音频直播的方案和遇到的问题. 代码:(github,待整理) 结果: 使用opus音频编码,web audio api 播放,可以达到100ms以内延时,高质量,低流量的音频直播. 背景: V ...

  6. Web测试介绍2一 安全测试

            安全测试是在IT软件产品的生命周期中,特别是产品开发基本完成到发布阶段,对产品进行检验以验证产品符合安全需求定义和产品质量标准的过程. 主要安全需求包括: (i) 认证 Authent ...

  7. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  8. Web Audio API_基本概念

    Audio Context 音频的工作环境.类比做化学实验,Audio Context 就是为我们提供各种仪器和材料的实验室(严格地来说制造这些仪器材料的方法和工具也一并提供了).通常来说做实验一间实 ...

  9. RDIFramework.NET Web版介绍

    RDIFramework.NET  Web版介绍 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户端最主要的应用软件.这种模式统一了 ...

随机推荐

  1. Delphi多线程的OnTerminate属性(附加一个关于临界区线程同步的例子)

    首先看TThread源码中关于OnTerminate的代码: public .... property OnTerminate: TNotifyEvent read FOnTerminate writ ...

  2. c++ boost asio库初学习

    前些日子研究了一个c++的一个socket库,留下范例代码给以后自己参考. 同步server: // asio_server.cpp : コンソール アプリケーションのエントリ ポイントを定義します. ...

  3. 【转载】 wpf无边框的方法以及拖拽的问题

    今天在做wpf程序的时候遇到了一个制作无边框的窗体并且有透明圆角的问题,我把解决的过程写下来,和大家学习 正常窗体必须把WindowStyle="None"这个属性加上去,但是加上 ...

  4. Mvc HtmlHelper 方法扩展 DropDownListFor

      项目中遇到表单提交中遇到枚举,忽然想起1年前的1小段代码结合HtmlHelper在扩展一下 便于开发中使用 public static class HtmlHelperExtensions { p ...

  5. 深信服务发布SSL站点

    1.不能使用AD自带的HTTPS服务,需要新建一个服务,端口443 2.在“节点池”中添加内网HTTPS服务器的IP,端口443 3.在“策略”中新建一条策略,"服务"选新添加的端 ...

  6. 使用Packet Sniffer抓包和分析(z-stack协议)

    以下内容仅是自己学习总结,可能会有错误,有发现问题的欢迎指正(图片可以自己放大,还是比较清晰的). 1.协调器上电,其他设备均不上电,抓包如下: 通过观察可以发现,协调器建立网络成功后,会以15秒为周 ...

  7. Git 版本管理的简单理解

    来源:百度知道 现在使用Git版本管理代码的项目非常多.但是Git本身是一条复杂的系统.我从几个简单的点来说明Git的基本功能.希望能帮助初学者快速入门. 工具/原料   Git code dot j ...

  8. SQL Server 递归

    SQL Server 没有类似于Oracle START WITH NAME='xx' CONNECT BY PRIOR ID=PARENT_ID这样的语句,但是可以通过自定义标准函数+With语句实 ...

  9. 我理想中的父母(The Ideal Parents In My Heart)

    Parents are the first teachers in children's life, and people all know the great importance exactly ...

  10. Unity插件使用总结

    移动文件夹位置会引起错误的插件:EasySave2.MaterialUI.Gamestrap UI.Beautify