Web Audio API 七：与其他技术整合

翻译自：https://webaudioapi.com/book/Web_Audio_API_Boris_Smus_html/ch07.html

Web Audio API使音频处理和分析成为 Web 平台的基本组成部分。作为 Web 开发者的一个核心构件，它被设计成能与其他技术很好地配合。

用<audio>标签设置背景音乐

正如我在本书一开始提到的，<audio> 标签有很多局限性，使它不适合于游戏和互动应用。然而，这个HTML5特性的一个优势是它有内置的缓冲和流媒体支持，使其成为长篇幅播放的理想选择。从网络的角度来看，加载一个大的缓冲区是很慢的，从内存管理的角度来看，也是很昂贵的。<audio>标签的设置是音乐播放或游戏原声带的理想选择。

你可以使用媒体流音频源节点（MediaElementAudioSourceNode）来创建节点，这些节点的行为很像音频源节点（AudioSourceNode），但却包裹着现有的<audio>标签，而不是通过发出 XMLHttpRequest 直接加载声音，然后对缓冲区进行解码的通常路径。一旦我们把这个节点连接到我们的音频图上，我们就可以利用我们对Web Audio API的了解来做一些伟大的事情。这个小例子将一个低通滤波器应用到<audio>标签上。

window.addEventListener('load', onLoad, false)

function onLoad() {
  var audio = new Audio();
  source = context.createMediaElementSource(audio);
  var filter = context.createBiquadFilter();
  filter.type = filter.LOWPASS;
  filter.frequency.value = 440;

  source.connect(this.filter);
  filter.connect(context.destination);
  audio.src = 'http://example.com/the.mp3';
  audio.play();
}

实时音频输入

Web AudioAPI的一个高度要求的功能是与getUserMedia的整合，它使浏览器能够访问连接的麦克风和摄像头的音频/视频流。在写这篇文章的时候，这项功能在Chrome的一个标志后面可用。要启用它，你需要访问about:flags并打开 "Web Audio输入 "实验，如图7-1所示。

图7-1. 在Chrome浏览器中启用Web Audio输入

一旦启用，你就可以使用MediaStreamSourceNodeWeb Audio节点。这个节点包裹着音频流对象，一旦建立了音频流就可以使用。这直接类似于MediaElementSourceNodes包裹

function getLiveInput() {
// 只获取音频流。
navigator.webkitGetUserMedia（{audio: true}, onStream, onStreamError）。
};

function onStream(stream) {
// 在实时输入流周围包裹一个MediaStreamSourceNode。
var input = context.createMediaStreamSource(stream);
// 将输入连接到一个过滤器。
var filter = context.createBiquadFilter();
filter.frequency.value = 60.0;
filter.type = filter.NOTCH;
filter.Q = 10.0。

var analyser = context.createAnalyser();

// 连接图形。
input.connect(filter);
filter.connect(analyer);

// 设置一个动画。
requestAnimationFrame(render);
};

function onStreamError(e) {
console.error(e)。
};

function render() {
// 将实时音频输入可视化。
requestAnimationFrame(render);
};

另一种建立流的方式是基于WebRTC PeerConnection。通过将通信流引入Web Audio API，你可以，例如，将视频会议的多个参与者空间化。

页面可见性和音频播放
每当你开发一个涉及音频播放的网络应用程序时，你应该认识到页面的状态。这里典型的失败模式是，许多标签中的一个正在播放声音，但你不知道是哪一个。这对一个音乐播放器的应用来说可能是有意义的，因为你希望音乐继续播放，而不管页面的可见性如何。然而，对于一个游戏来说，当页面不再在前台时，你经常想暂停游戏（和声音播放）。

幸运的是，页面可见性API提供了检测一个页面何时变得隐藏或可见的功能。该状态可以通过布尔值 document.hidden 属性来确定。当可见性改变时触发的事件被称为visibilitychange。因为该API仍被认为是实验性的，所以所有这些名字都有webkit的前缀。考虑到这一点，下面的代码将在页面变得隐藏时停止源节点，并在页面变得可见时恢复源节点。

// 听取 webkitvisibilitychange 事件。
document.addEventListener('webkitvisibilitychange', onVisibilityChange)。

function onVisibilityChange() {
  if（document.webkitHidden） {
    source.stop(0)。
  } else {
    source.start(0);
 }
}