Web API 简介
它们基于对象
您的代码使用一个或多个 JavaScript 对象与 API 交互，这些对象充当 API 使用的数据（包含在对象属性中）和 API 提供的功能（包含在对象方法中）的容器。
注意：如果您还不熟悉对象的工作原理，您应该返回并完成我们的 JavaScript 对象模块，然后再继续。
让我们回到 Web 音频 API 的例子——这是一个相当复杂的 API，由许多对象组成。最明显的有：
AudioContext，它代表一个可以用于操纵在浏览器中播放的音频的音频图，并拥有许多可用于操纵该音频的方法和属性。
MediaElementAudioSourceNode，它代表一个包含您希望在音频上下文中播放和操纵的声音的
AudioDestinationNode，它代表音频的目的地，即您的计算机上实际输出音频的设备——通常是您的扬声器或耳机。
那么这些对象是如何交互的呢？如果您查看我们的 简单 Web 音频示例（也可在此处查看实时效果），您将首先看到以下 HTML：
html
首先，我们包含一个
接下来，让我们看看这个例子的 JavaScript。
我们首先创建一个 AudioContext 实例，在其中操作我们的音轨：
jsconst audioCtx = new AudioContext();
接下来，我们创建常量来存储对我们的
jsconst audioElement = document.querySelector("audio");
const playBtn = document.querySelector("button");
const volumeSlider = document.querySelector(".volume");
const audioSource = audioCtx.createMediaElementSource(audioElement);
接下来，我们添加了几个事件处理程序，用于在按钮按下时在播放和暂停之间切换，并在歌曲播放完毕后将显示重置到开头：
js// play/pause audio
playBtn.addEventListener("click", () => {
// check if context is in suspended state (autoplay policy)
if (audioCtx.state === "suspended") {
audioCtx.resume();
}
// if track is stopped, play it
if (playBtn.getAttribute("class") === "paused") {
audioElement.play();
playBtn.setAttribute("class", "playing");
playBtn.textContent = "Pause";
// if track is playing, stop it
} else if (playBtn.getAttribute("class") === "playing") {
audioElement.pause();
playBtn.setAttribute("class", "paused");
playBtn.textContent = "Play";
}
});
// if track ends
audioElement.addEventListener("ended", () => {
playBtn.setAttribute("class", "paused");
playBtn.textContent = "Play";
});
注意：你们中的一些人可能会注意到，用于播放和暂停音轨的 play() 和 pause() 方法不属于 Web 音频 API；它们是 HTMLMediaElement API 的一部分，后者不同但密切相关。
接下来，我们使用 AudioContext.createGain() 方法创建一个 GainNode 对象，该对象可用于调节通过它的音频音量，并创建另一个事件处理程序，该处理程序在滑块值更改时更改音频图的增益（音量）值：
js// volume
const gainNode = audioCtx.createGain();
volumeSlider.addEventListener("input", () => {
gainNode.gain.value = volumeSlider.value;
});
为了使其正常工作，最后要做的是连接音频图中的不同节点，这可以通过在每种节点类型上可用的 AudioNode.connect() 方法来完成：
jsaudioSource.connect(gainNode).connect(audioCtx.destination);
音频从源开始，然后连接到增益节点，以便可以调节音频的音量。增益节点再连接到目标节点，以便声音可以在您的计算机上播放（AudioContext.destination 属性表示您的计算机硬件上可用的默认 AudioDestinationNode，例如您的扬声器）。