Web Audio API系列之一Web Audio初探

本文介绍Web Audio API的简介以及使用范围等基础内容。

一、特性
Audio API主要有以下特性:

  • 为简单或复杂的混音/特效提供模块化路由架构,包括多路传送以及子混合(submixes)
  • 高动态范围,内部处理使用32位单精度浮点数
  • 对于需要极高节奏精度的音乐应用,例如鼓机和音序器,精确取样低延迟播放。同时也为动态创建音效提供了可能性
  • 为envelopes、淡入/淡出、粒状效应、滤波器扫描、LFOs等提供自动化的音频参数
  • 灵活的处理音频流中的声道,允许对其进行分离与合并
  • 可以从audio或video媒体元素中处理音频源
  • 可以处理从getUserMedia函数获取的媒体流
  • 与WebRTC集成:使用MediaStreamAudioSourceNode和webrtc处理从远端接收的音频;通过MediaStreamAudioDestinationNode和webrtc发送生成或处理过的音频流到远端
  • 音频流的合成与处理可以直接使用JavaScript
  • 支持各种3D游戏和身临其境的空间化音频:平移模型(等功率,HRTF,直通);距离衰减;声锥;阻塞/闭塞;多普勒频移;源/监听器
  • 卷积引擎适用于各种线性效果,尤其是非常高品质的室内效果,例如:小/大房间、大教堂、音乐厅、洞穴、隧道、门厅、圆形剧场、一个遥远的声音通过门口、极端过滤器、倒退效果、极端梳状滤波效果(Extreme comb filter effects)
  • 动态压缩整体控制以及甜味的混合(sweetening of the mix)
  • 高效的实时时域和频率分析/音乐可视化支持
  • 用于低通,高通和其他常见滤波器的高效双二阶滤波器。
  • 波形整形效果,用于失真和其他非线性效果
  • 振荡器

二、模块化路由
模块化路由允许不同AudioNode对象之间的任意连接。每个节点可以具有输入和(或)输出。源节点没有输入有一个输出。目的节点有一个输入,没有输出,最常见的例子是音频硬件的最终目的地AudioDestinationNode。可以在源节点和目的地节点之间放置其他节点,例如过滤器。当两个对象连接在一起时,开发人员不必担心低级流格式细节。例如,如果单声道音频流连接到立体声输入,它应该恰当地混合到左和右声道。
在最简单的情况下,单个源可以直接路由到输出。所有路由在单个AudioDestinationNode的AudioContext中:
Source→Destination
下面是一个简单的例子:

var context = new AudioContext();

function playSound() {
    var source = context.createBufferSource();
    source.buffer = dogBarkingBuffer;
    source.connect(context.destination);
    source.start(0);
}

模块化路由还允许将AudioNode的输出路由到控制不同AudioNode行为的AudioParam参数。在这种情况下,节点的输出可以用作调制信号而不是输入信号。

Content Security Policy(CSP)指令

本文介绍CSP的指令,基于CSP level 3,由于文档截止发文时未定稿,可能出现内容陈旧、错误等问题。

为了减缓跨站脚本攻击,网站开发者应该包含控制脚本和插件资源的指令。他们可以这样做:

  • 包含script-src和object-src指令或
  • 一个default-src指令

开发者不应在策略中包含’unsafe-inline’或data:指令。他们都会允许通过文档中直接包含的代码进行XSS攻击。因此最好彻底避免使用这两个指令。

child-src
child-src指令管理嵌套浏览上下文(iframe、frame)和Worker执行上下文。
示例:
Content-Security-Policy: child-src https://example.com/
下面的代码会引发网络错误,因为url不匹配给出的url模式:

<iframe src="https://not-example.com"></iframe>
var blockedWorker = new Worker("data:application/javascript,...");

connect-src
connect-src指令限制从脚本接口加载的url。
通过脚本接口加载资源的方式指:fetch、XHR、eventSource、Beacon、a标签的ping、WebSocket。
示例:
Content-Security-Policy: connect-src https://example.com/
下面代码会引发网络错误:

<a ping="https://not-example.com">...
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://not-example.com/');
  xhr.send();

  var ws = new WebSocket("https://not-example.com/");

  var es = new EventSource("https://not-example.com/");

  navigator.sendBeacon("https://not-example.com/", { ... });

default-src
default-src指令是在其他指令没有定义时的默认指令。
示例:

Content-Security-Policy: default-src 'self'
相当于下面的指令:
Content-Security-Policy: connect-src 'self';
                         font-src 'self';
                         frame-src 'self';
                         img-src 'self';
                         manifest-src 'self';
                         media-src 'self';
                         object-src 'self';
                         script-src 'self';
                         style-src 'self';
                         worker-src 'self'
以下指令:
Content-Security-Policy: default-src 'self'; script-src https://example.com
等价于:
Content-Security-Policy: connect-src 'self';
                         font-src 'self';
                         frame-src 'self';
                         img-src 'self';
                         manifest-src 'self';
                         media-src 'self';
                         object-src 'self';
                         script-src https://example.com;
                         style-src 'self';
                         worker-src 'self'

font-src
font-src指令限制字体文件资源加载的URL。
示例:
Content-Security-Policy: font-src https://example.com/
下面的代码会触发网络错误:

@font-face {
    font-family: "Example Font";
    src: url("https://not-example.com/font");
  }
  body {
    font-family: "Example Font";
  }

frame-src
frame-src指令限制嵌套浏览上下文加载的URL。
示例:
Content-Security-Policy: frame-src https://example.com/
下面的代码会触发网络错误:

<iframe src="https://not-example.com/"></iframe>

img-src
img-src指令限制了图片资源加载的URL。
示例:
Content-Security-Policy: img-src https://example.com/
下面代码会触发网络错误:

<img src="https://not-example.com/img" />

manifest-src
manifest-src指令限制应用的manifests文件资源加载的URL。
示例:
Content-Security-Policy: manifest-src https://example.com/
下面代码会触发网络错误:

<link rel="manifest" href="https://not-example.com/manifest">

media-src
media-src指令限制了音频、视频、相关文本追踪的URL。
示例:
Content-Security-Policy: media-src https://example.com/
下面代码会触发网络错误:

<audio src="https://not-example.com/audio"></audio>
<video src="https://not-example.com/video">
    <track kind="subtitles" src="https://not-example.com/subtitles">
</video>

object-src
object-src指令限制插件内容加载的URL。
示例:
Content-Security-Policy: object-src https://example.com/
下面代码会触发网络错误:

<embed src="https://not-example.com/flash"></embed>
<object data="https://not-example.com/flash"></object>
<applet archive="https://not-example.com/flash"></applet>

如果插件的内容没有通过相关的URL(如object元素没有data属性,但是根据指定的类型加载了默认的插件),除非object-src的值是’none’必须阻止,否则都会允许。

script-src
script-src指令限制脚本执行的位置。这不仅包含直接通过script元素引用的URL还包括内联脚本块和XSLT样式表触发的脚本执行。

style-src
style-src指令限制样式应用的位置。包括link标签、@import、HTTP头加载的样式。

worker-src
worker-src指令限制Worker、SharedWorker或ServiceWorker加载的URL。
示例:
Content-Security-Policy: worker-src https://example.com/
下面代码会引发网络错误:

var blockedWorker = new Worker("data:application/javascript,...");
  blockedWorker = new SharedWorker("https://not-example.com/");
  navigator.serviceWorker.register('https://not-example.com/sw.js');

base-uri
base-uri指令限制base元素中的URL。

plugin-types
plugin-types指令限制可被加载的插件类型。
示例:
Content-Security-Policy: plugin-types application/pdf
下面代码会引发网络错误:

<!-- No 'type' declaration(没有声明type) -->
<object data="https://example.com/flash"></object>

<!-- Non-matching 'type' declaration(声明的type和允许的type不一致) -->
<object data="https://example.com/flash" type="application/x-shockwave-flash"></object>

<!-- Non-matching resource(虽然声明的type一致,但其实返回的资源还是个flash类型,也会报错) -->
<object data="https://example.com/flash" type="application/pdf"></object>

下面的策略:
Content-Security-Policy: plugin-types application/x-shockwave-flash
会成功加载如下资源:

<!-- Matching 'type' declaration and resource -->
<object data="https://example.com/flash" type="application/x-shockwave-flash"></object>

sandbox
sandbox指令指定一个客户端需要应用于资源的HTML沙箱策略,就如同包含于带sandbox属性的iframe标签中。

disown-opener
disown-opener指令确保资源与其opener断绝关系。

form-action
form-action指令限制form表单提交的URL。

frame-ancestors
frame-ancestors指令限制可以被通过frame、iframe、object、embed、applet元素嵌入的资源的URL。

report-uri
report-uri指令用于报告非法请求,已过时,应使用report-to指令代替。

report-to
report-to指令用于发送非法的请求信息。