应用程序接口, 也就是 API, 是基于编程语言构建而成的结构, 这使得开发者能够更轻易地去创建复杂的功能, 它们将复杂的代码进行了抽象处理, 并且提供了一些简单的可以直接使用的接口规则。来看一个现实当中的例子, 想想你所拥有的房子, 或者是公寓, 又或者是其他类型的住宅的供电方式, 要是你打算在自己的房子里头使用电力, 那么只要把电器对应的插头插到插座当中就能够达成, 而并非是直接将电器和电线进行, 因为这样做会显得极为低效, 并且对于那些并非是电工的人员而言, 则是一项具有难度且存在危险的行动。源自过载的插头接口的图片, 是由The Clear提供的, 它们来自于上。同样, 举例来说, 要是通过编程去显示一些 3D 图形, 那么运用以更高级语言编写而成的 API像是某些特定的 API, 相较于直接去编写那种直接控制计算机 CPU 或者其他图形功能的低级代码像 C 语言或者 C语法编写的代码来执行相关操作, 会容易很多。备注详细说明请见 API 术语条目。有很多可被使用的 API 存在于客户端之中, 这些 API 自身并非归属于语言范畴, 而是构建于核心语言之上, 其存在的目的是为使用代码赋予额外的超强能力, 并且它们一般被划分成两类。就如同上面所讲述的那样, 我们针对什么是客户端API展开了讨论, 还探讨了它们跟语言之间的关系, 让我们进行如下行为, 把它回顾一下, 以便使得它变得更为清晰, 并提及一下其它工具所适用范畴所在之处所适用在的地位:有着大量可用 API 的主流浏览器里, 你于代码当中能够做诸多事情, 参见 MDN API 索引页。格外特别地, 存在着你将会去使用的最为常见的浏览器应用程序编程接口类别, 并且这也是我们将会在本模块之中更为详细地予以介绍的, 具体有:第三方API各种各样、非常多, 下面说的是一些相对比较流行、你说不定啥时候就会用到的第三方API。有着差异的API, 其工作方式存在些许不同, 可是一般来讲, 它们具备共同的特性以及相近的主题。API 在你的代码里交互时要用一个或者多个对象, 这些对象是 API 使用的数据数据包含在对象属性里的容器, 也是由 API 提供的功能于对象方法中被包含的容器。备注如果你不熟悉对象如何工作则应在继续之前学习 模块。我们返回到Web音频API的示例, 这是个颇为复杂的API, 它由好些对象构成, 其中最为关键的涵盖了:那这些对象究竟是以怎样的方式进行交互的呢, 要是你去查看我们的, 最先会看到像下面这样的HTML代码。Play首先呢, 我们放入一个元素, 这个元素的作用是在页面里头嵌入一首MP3文件。我们并未放入任何默认的浏览器控件。紧接着, 我们放入一个, 它的用途是播放以及停止音乐, 另外还放入一个类型是range的元素, 该元素的作用是在播放期间调整音轨的音量。接下来我们来看一下这个示例的 代码。我们首先创建一个 实例用于在其中操作我们的音轨const AudioContext window.AudioContext || window.webkitAudioContext; const audioCtx new AudioContext();接下来, 我们去创建常量, 以此用来存储针对 、 和 元素的引用, 并且使用 .urce() 方法去创建一个 , 该 表示我们的音频源, 也就是那个将会进行播放的 元素:const audioElement document.querySelector(audio); const playBtn document.querySelector(button); const volumeSlider document.querySelector(.volume); const audioSource audioCtx.createMediaElementSource(audioElement);下面, 我们补添一些事件处理装置, 要来在按钮遭受按压之际于播放与暂停之间进行切换, 并且在歌曲播放完毕之时把显示再度设定回到起始之处:// 播放/暂停音频 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这个类别当中它们归属于另一种 API, 这是一种与 Web 音频 API 有所不同然而却紧密关联的 API。紧接着, 我们运用.( )方法去构建一个对象, 该对象能够用来调控经由它的音频的音量, 并且还要创建另外一个事件处理器, 在滑块值发生改变之际去更改音频图的增益音量值。// 音量 const gainNode audioCtx.createGain(); volumeSlider.addEventListener(input, () { gainNode.gain.value volumeSlider.value; });接下来所要做的事情是, 把音频图里不一样的节点连接在一起, 而这一行为是借助于每个节点类型上能够使用的.( )方法达成的:audioSource.connect(gainNode).connect(audioCtx.destination);音频从源头起始, 接着连接至增益节点, 以此来调整音频音量。增益节点随后连接到目标节点, 使得声音能够在你电脑上播放。这里的属性代表你电脑硬件上可用的默认设备, 就像你的扬声器。当运用 API 的时候, 你得保证清楚 API 的入口点处在何方。于 Web 音频 API 范畴内, 这着实挺简单——那便是 对象, 开展任何音频操作都得借助它来进行。对于文档对象模型DOMAPI而言, 存在着一个不算复杂的入口点 , 其具备的特性常常所处位置是在 对象那里 , 或者是在你期望能够以某一种特定样式去产生影响的HTML元素实例之上 , 就好比是:const em document.createElement(em); // 创建一个新的 em 元素 const para document.querySelector(p); // 获取现存的一个 p 元素的引用 em.textContent Hello there!; // 为 em 元素设置文本内容 para.appendChild(em); // 将 em 嵌入到 para 中API依靠获取用于操纵事物的上下文对象, 虽说在此情形下, 其并非音频上下文而是图形上下文。它的上下文对象是借助获取要绘制的元素的引用, 接着调用其.( )方法创建而成的:const canvas document.querySelector(canvas); const ctx canvas.getContext(2d);之后, 经由调用内容对象xt2D 的实例的属性以及方法, 要实施我们期望针对画布开展的任何操作, 比如:Ball.prototype.draw function () { ctx.beginPath(); ctx.fillStyle this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); ctx.fill(); };备注你可以在我们的中看到此代码也可以。此前, 我们于课程里探讨过事件, 在我们那篇事件介绍的文章中, 详细阐释了客户端Web事件究竟是什么, 以及它们于代码里的运用方式。要是你对客户端Web API事件的运作模式尚还陌生, 那么在继续下去之前, 应当去研读这篇文章。有些Web API不含事件, 而另一些则含有某些事件。运行函数的处理器属性, 是在事件触发时, 于参考资料里单独的“事件处理器”部分通常会列出的。我们已然在上述的, Web 音频 API 示例里头, 目睹了不少处于在用状态的, 事件处理器呢:// 播放/暂停音频 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; });Web API特性, 受到和其他Web技术, 比如同源策略, 相同的安全考虑, 然而, 它们有时候会有额外的安全机制, 比如说, 一些更现代的Web API, 将只能在通过HTTPS提供的页面上工作, 因为它们正在传输潜在的敏感数据, 像和推送。此外, 于代码里调用某些Web API之际, 会向用户发出启用权限的请求。比如说, 该API借助弹出对话框来请求权限:一种名为的安全机制对Web音频和API加以限制, 这基本上表明在页面加载之际不能自动播放音频, 必须得让用户借助按钮等控件开启音频播放才行。之所以这样, 是由于自动播放音频常常极其烦人, 实在不应使用户去忍受它。备注: 依据浏览器的严格程度,这样的安全机制甚至于有可能会阻拦示例于本地开展运行,换句话讲,倘若你于浏览器内加载本地的示例文件,而并非从Web服务器上去运行它的话。在撰写这篇文章的时候,我们的Web音频API示例于某些浏览器上没办法在本地运行,必须上传至相应位置才可以运行。至此, 你应当对于什么是API、API怎样开展工作以及于代码里怎样去使用API有了一定程度的了解, 你或许已经按捺不住兴致勃勃地想要运用特定的API去做一些饶有趣味的事情了, 那就着手开始吧, 如果是这样的话接下来, 我们会去学习运用文档对象模型即DOM来对文档进行操作。