Web API 简介
它们是基于对象的
API 使用一个或多个 JavaScript 对象在你的代码中进行交互，这些对象用作 API 使用的数据（包含在对象属性中）的容器以及 API 提供的功能（包含在对象方法中）。
备注：如果你不熟悉对象如何工作，则应在继续之前学习 JavaScript 对象模块。
让我们回到 Web 音频 API 的例子——这是一个相当复杂的 API，它由多个对象组成。最重要的包括：
AudioContext，表示一个可以用于操控浏览器中播放音频的音频图，并且拥有许多可用于操作音频的方法和属性。
MediaElementAudioSourceNode，表示一个包含你想要在音频上下文中播放和操控的声音的
AudioDestinationNode，表示音频的输出目的地，也就是你电脑上的实际输出设备——通常是你的扬声器或耳机。
那么这些对象是如何交互的呢？如果你查看我们的简单 Web 音频示例（也可以在线查看），首先会看到如下的 HTML 代码：
html
首先，我们包含一个
接下来，我们来看一下这个示例的 JavaScript 代码。
我们首先创建一个 AudioContext 实例，用于在其中操作我们的音轨：
jsconst AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
接下来，我们创建常量来存储对
jsconst audioElement = document.querySelector("audio");
const playBtn = document.querySelector("button");
const volumeSlider = document.querySelector(".volume");
const audioSource = audioCtx.createMediaElementSource(audioElement);
接下来，我们添加几个事件处理器，用于在按钮被按下时在播放和暂停之间切换，并在歌曲播放结束时将显示重置回开始位置：
js// 播放/暂停音频
playBtn.addEventListener("click", () => {
// 确认 context 在 suspended 状态（自动播放策略）
if (audioCtx.state === "suspended") {
audioCtx.resume();
}
// 如果音轨处于停止则开始播放
if (playBtn.getAttribute("class") === "paused") {
audioElement.play();
playBtn.setAttribute("class", "playing");
playBtn.textContent = "Pause";
// 如果音轨正在播放则停止播放
} else if (playBtn.getAttribute("class") === "playing") {
audioElement.pause();
playBtn.setAttribute("class", "paused");
playBtn.textContent = "Play";
}
});
// 如果音轨结束了
audioElement.addEventListener("ended", () => {
playBtn.setAttribute("class", "paused");
playBtn.textContent = "Play";
});
备注：有些人可能会注意到，用于播放和暂停音轨的 play() 和 pause() 方法并不属于 Web 音频 API；它们属于 HTMLMediaElement API，这是一个不同但紧密相关的 API。
接下来，我们使用 AudioContext.createGain() 方法创建一个 GainNode 对象，可以用于调整通过它的音频的音量，并创建另一个事件处理器，当滑块值改变时改变音频图的增益（音量）值：
js// 音量
const gainNode = audioCtx.createGain();
volumeSlider.addEventListener("input", () => {
gainNode.gain.value = volumeSlider.value;
});
最后要做的是将音频图中的不同节点连接起来，这是通过每个节点类型上可用的 AudioNode.connect() 方法完成的：
jsaudioSource.connect(gainNode).connect(audioCtx.destination);
音频从源头开始，然后连接到增益节点，以便调整音频的音量。增益节点然后连接到目标节点，以便声音可以在你的电脑上播放（AudioContext.destination 属性表示你电脑硬件上可用的默认 AudioDestinationNode，例如你的扬声器）。