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参数。在这种情况下,节点的输出可以用作调制信号而不是输入信号。

JavaScript通过execCommand向剪贴板写入数据

本文介绍JavaScript使用document.execCommand等函数向系统剪贴板中写入数据的方法。

一、document.execCommand
document.execCommand(‘copy’)可以复制当前页面上选中的内容到剪贴板中
兼容性:
document.execCommand本身的兼容性非常好,主流的浏览器(包括IE6等低版本浏览器)都支持。
document.execCommand(‘copy’)并不是所有浏览器都支持,可以根据document.queryCommandSupported(‘copy’)来查询是否支持copy命令。
根据MDN官网上说明,copy命令的兼容性为:
Chrome:43
Firefox:41
IE:9
Opera:29
Safari:10

二、input的select方法
input的select方法可以选中input的全部内容
注意,input的type不能是hidden,并且input不能display:none或visibility:hidden,否则无法选中

三、示例代码
document.execCommand(‘copy’)会复制当前页面被选中的文本,如果想要将页面被选中的文本复制到剪贴板中,直接调用document.execCommand(‘copy’)即可
js:

const inputHidden = document.querySelector('#inputHidden');
inputHidden.value = '复制到剪贴板的内容';
inputHidden.select();
document.execCommand('copy');

html:

<input type="text" id="inputHidden" />

css:

#inputHidden{ left: -9999px; top: -9999px; position: fixed;}

四、在线Demo
https://demo.lyz810.com/clipBoard/