使用网络演讲API制作语音控制的音频播放器

核心要点

• Web 语音 API 是一个 JavaScript API，允许 Web 开发人员将语音识别和合成集成到他们的网页中，从而增强用户体验，尤其对于残疾人士或需要同时处理多项任务的用户而言。
• 语音识别 API 目前需要互联网连接和用户权限才能访问麦克风。Annyang 等库可以帮助管理复杂性并确保向前兼容。
• 可以使用语音合成 API 和语音识别 API 构建语音控制的音频播放器。这允许用户使用语音命令在歌曲之间导航并请求特定歌曲。
• 音频播放器将包含设置数据、UI 方法、语音 API 方法和音频操作方法。识别和处理用户输入的代码仅适用于 WebKit 浏览器。
• Web 语音 API 具有在许多领域使用的潜力，例如使用语音命令浏览电子邮件、导航网站或搜索网络。随着实现的稳定和新功能的添加，预计该 API 的使用将会增长。

/ 用于隐藏/显示额外块 / .sp_hiddenblock { margin: 2px; border: 1px solid rgb(250, 197, 82); border-radius: 3px; padding: 5px; background-color: rgba(250, 197, 82, 0.7); } .sp_hiddenblock.sp_hide { display: none !important; } 本文由 Edwin Reynoso 和 Mark Brown 共同评审。感谢所有 SitePoint 的同行评审员，使 SitePoint 的内容达到最佳状态!

Web 语音 API 是一个 JavaScript API，它使 Web 开发人员能够将语音识别和合成功能整合到他们的网页中。

这样做的原因有很多。例如，为了增强残疾人的体验（特别是视力障碍的用户，或手部活动能力有限的用户），或者允许用户在执行其他任务（例如驾驶）时与 Web 应用进行交互。

如果您从未听说过 Web 语音 API，或者您想快速入门，那么阅读 Aurelio De Rosa 的文章《Web 语音 API 简介》、《语音合成 API》和《会说话的表单》可能是一个好主意。

浏览器支持

浏览器厂商最近才开始同时实现语音识别 API 和语音合成 API。如您所见，对这些 API 的支持还远非完美，因此如果您正在学习本教程，请使用合适的浏览器。

此外，语音识别 API 目前需要互联网连接，因为语音会通过网络传输，结果会返回到浏览器。如果连接使用 HTTP，则用户必须在每次请求时都允许站点使用他们的麦克风。如果连接使用 HTTPS，则只需要这样做一次。

语音识别库

库可以帮助我们管理复杂性，并确保我们保持向前兼容。例如，当另一个浏览器开始支持语音识别 API 时，我们不必担心添加厂商前缀。

Annyang 就是这样一个库，它非常易于使用。了解更多。

要初始化 Annyang，我们将它们的脚本添加到我们的网站：

<🎜>

我们可以像这样检查 API 是否受支持：

if (annyang) { /*逻辑*/ }

并使用一个对象添加命令，该对象使用命令名称作为键，回调作为方法：

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

最后，我们只需添加它们并使用以下命令启动语音识别：

annyang.addCommands(commands);
annyang.start();

语音控制的音频播放器

在本文中，我们将构建一个语音控制的音频播放器。我们将同时使用语音合成 API（用于告知用户正在播放哪首歌曲，或者命令未被识别）和语音识别 API（将语音命令转换为字符串，这些字符串将触发不同的应用程序逻辑）。

使用 Web 语音 API 的音频播放器的优点是，用户可以浏览浏览器中的其他页面或最小化浏览器并执行其他操作，同时仍然能够在歌曲之间切换。如果我们的播放列表中有许多歌曲，我们甚至可以请求一首特定的歌曲，而无需手动搜索（如果我们知道它的名称或歌手，当然）。

我们不会依赖于用于语音识别的第三方库，因为我们希望展示如何在不向项目添加额外依赖项的情况下使用 API。语音控制的音频播放器仅支持支持 interimResults 属性的浏览器。最新版本的 Chrome 应该是一个安全的选择。

与往常一样，您可以在 GitHub 上找到完整的代码，以及 CodePen 上的演示。

入门 — 播放列表

让我们从一个静态播放列表开始。它由一个对象组成，该对象在一个数组中包含不同的歌曲。每首歌都是一个新对象，包含文件的路径、歌手的姓名和歌曲的名称：

var data = {
  "songs": [
    {
      "fileName": "https://www.ruse-problem.org/songs/RunningWaters.mp3",
      "singer" : "Jason Shaw",
      "songName" : "Running Waters"
    },
    ...

我们应该能够向 songs 数组添加新的对象，并将新歌自动包含到我们的音频播放器中。

音频播放器

现在我们来看播放器本身。这将是一个包含以下内容的对象：

• 一些设置数据
• 与 UI 相关的方 法（例如填充歌曲列表）
• 与语音 API 相关的方 法（例如识别和处理命令）
• 与音频操作相关的方 法（例如播放、暂停、停止、上一首、下一首）

设置数据

这相对简单。

var audioPlayer = {
  audioData: {
    currentSong: -1,
    songs: []
  },

currentSong 属性指的是用户当前所在的歌曲的索引。例如，当我们必须播放上一首/下一首歌曲或停止/暂停歌曲时，这很有用。

songs 数组包含用户已收听的所有歌曲。这意味着下次用户收听同一首歌曲时，我们可以从数组中加载它，而无需下载它。

您可以在此处查看完整代码。

UI 方法

UI 将包含可用命令列表、可用曲目列表和一个上下文框，用于通知用户当前操作和之前的命令。我不会详细介绍 UI 方法，而是提供一个简短的概述。您可以在此处找到这些方法的代码。

load

这会遍历我们之前声明的播放列表，并将歌曲的名称以及艺术家的名称附加到可用轨道的列表中。

changeCurrentSongEffect

这指示当前正在播放哪首歌曲（通过将其标记为绿色并在其旁边添加一副耳机），以及哪些歌曲已播放完毕。

playSong

这通过 changeStatusCode 方法（将此信息添加到框中）以及通过语音 API 向用户通告此更改来指示用户歌曲正在播放或已结束。

changeStatusCode

如上所述，这会更新上下文框中的状态消息（例如，指示正在播放新歌曲），并利用 speak 方法向用户通告此更改。

changeLastCommand

一个小的辅助函数，用于更新最后一个命令框。

toggleSpinner

一个小的辅助函数，用于隐藏或显示微调器图标（指示用户的语音命令当前正在处理）。

播放器方法

播放器将负责您可能期望的内容，即：启动、停止和暂停播放，以及在曲目之间前后移动。同样，我不打算详细介绍这些方法，而是想将您引导到我们的 GitHub 代码库。

Play

这会检查用户是否已经收听过歌曲。如果没有，它会启动歌曲，否则它只会调用我们之前在当前缓存的歌曲上讨论过的 playSong 方法。这位于 audioData.songs 中，并对应于 currentSong 索引。

pauseSong

这会暂停或完全停止（将播放时间返回到歌曲的开头）一首歌曲，具体取决于作为第二个参数传递的内容。它还会更新状态代码以通知用户歌曲已被停止或暂停。

stop

这会根据其第一个也是唯一一个参数暂停或停止歌曲：

prev

这会检查上一首歌曲是否已缓存，如果是，则暂停当前歌曲，递减 currentSong 并再次播放当前歌曲。如果新歌不在数组中，它会执行相同的操作，但它首先会根据对应于递减的 currentSong 索引的文件名/路径加载歌曲。

next

如果用户之前已经收听过歌曲，此方法会尝试暂停它。如果我们的数据对象（即我们的播放列表）中存在下一首歌曲，它会加载并播放它。如果没有下一首歌曲，它只会更改状态代码并告知用户他们已到达最后一首歌曲。

searchSpecificSong

这将关键字作为参数，并在歌曲名称和艺术家之间执行线性搜索，然后播放第一个匹配项。

语音 API 方法

语音 API 令人惊讶地易于实现。事实上，只需两行代码即可让 Web 应用与用户对话：

<🎜>

我们在这里所做的是创建一个 utterance 对象，其中包含我们希望说出的文本。speechSynthesis 接口（在 window 对象上可用）负责处理此 utterance 对象并控制生成的语音的播放。

继续在您的浏览器中尝试一下。就这么简单！

speak

我们可以在我们的 speak 方法中看到它的实际应用，该方法会大声朗读作为参数传递的消息：

if (annyang) { /*逻辑*/ }

如果存在第二个参数（scope），则在消息播放完毕后，我们在 scope（这将是一个 Audio 对象）上调用 play 方法。

processCommands

此方法并不那么令人兴奋。它接收一个命令作为参数，并调用适当的方法来响应它。它使用正则表达式检查用户是否要播放特定歌曲，否则，它会进入 switch 语句以测试不同的命令。如果没有任何一个与接收到的命令相对应，它会告知用户未理解该命令。

您可以在此处找到它的代码。

将所有内容结合在一起

到目前为止，我们有一个表示播放列表的数据对象，以及一个表示播放器本身的 audioPlayer 对象。现在我们需要编写一些代码来识别和处理用户输入。请注意，这仅适用于 WebKit 浏览器。

让用户与您的应用对话的代码与之前一样简单：

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

这将邀请用户允许页面访问他们的麦克风。如果您允许访问，您可以开始说话，当您停止时，将触发 onresult 事件，使语音捕获的结果作为 JavaScript 对象可用。

参考：HTML5 语音识别 API

我们可以在我们的应用中按如下方式实现它：

annyang.addCommands(commands);
annyang.start();

如您所见，我们测试了 webkitSpeechRecognition 在 window 对象上的存在情况。如果存在，那么我们就可以开始了，否则我们会告知用户浏览器不支持它。如果一切顺利，我们然后设置几个选项。其中 lang 是一个有趣的选项，它可以根据您的出身来改进识别的结果。

然后，我们在启动 start 方法之前，为 onresult 和 onend 事件声明处理程序。

处理结果

当语音识别器获得结果时，至少在当前语音识别实现和我们的需求的上下文中，我们想做几件事。每次有结果时，我们都希望将其保存在数组中，并设置一个超时以等待三秒钟，以便浏览器可以收集任何进一步的结果。三秒钟后，我们想使用收集到的结果并以相反的顺序循环遍历它们（较新的结果更有可能准确），并检查识别的转录是否包含我们可用的命令之一。如果是，我们执行该命令并重新启动语音识别。我们这样做是因为等待最终结果可能需要长达一分钟的时间，这会使我们的音频播放器看起来相当无响应且毫无意义，因为它只需单击按钮就会更快。

<🎜>

因为我们没有使用库，所以我们必须编写更多代码来设置我们的语音识别器，循环遍历每个结果并检查其转录是否与给定的关键字匹配。

最后，我们在语音识别结束时立即重新启动它：

if (annyang) { /*逻辑*/ }

您可以在此处查看此部分的完整代码。

就是这样。我们现在有一个完全功能齐全且语音控制的音频播放器。我强烈建议您从 GitHub 下载代码并试用它，或者查看 CodePen 演示。我还提供了一个通过 HTTPS 提供服务的版本。

结论

我希望本实践教程能很好地介绍 Web 语音 API 的可能性。我认为随着实现的稳定和新功能的添加，我们将看到此 API 的使用会增长。例如，我认为未来的 YouTube 将完全由语音控制，我们可以观看不同用户的视频，播放特定歌曲，并且只需使用语音命令即可在歌曲之间移动。

Web 语音 API 还可以改善许多其他领域，或开辟新的可能性。例如，使用语音浏览电子邮件、导航网站或搜索网络。

您是否在项目中使用此 API？我很乐意在下面的评论中听到您的声音。

关于使用 Web 语音 API 的语音控制音频播放器的常见问题 (FAQ)

Web 语音 API 如何在语音控制的音频播放器中工作？

Web 语音 API 是一种强大的工具，允许开发人员将语音识别和合成功能整合到他们的 Web 应用程序中。在语音控制的音频播放器中，API 通过将口语命令转换为文本来工作，然后应用程序可以解释和执行这些文本。例如，如果用户说“播放”，API 将将其转换为文本，应用程序将理解这是开始播放音频的命令。此过程涉及复杂的算法和机器学习技术，以准确识别和解释人类语音。

使用语音控制的音频播放器的优点是什么？

语音控制的音频播放器具有多种优点。首先，它提供了一种免提体验，当用户忙于其他任务时，这尤其有用。其次，它可以增强行动不便用户的可访问性，他们可能难以使用传统的控件。最后，它提供了一种新颖且引人入胜的用户体验，这可以使您的应用程序在竞争中脱颖而出。

我可以在任何 Web 浏览器中使用 Web 语音 API 吗？

大多数现代 Web 浏览器都支持 Web 语音 API，包括 Google Chrome、Mozilla Firefox 和 Microsoft Edge。但是，在将 API 集成到您的应用程序之前，始终最好检查具体的浏览器兼容性，因为不同版本和平台之间的支持可能会有所不同。

如何提高语音控制的音频播放器中语音识别的准确性？

可以使用高质量的麦克风、减少背景噪音以及训练 API 以更好地理解用户的语音和口音来提高语音识别的准确性。此外，您可以在应用程序中实现错误处理，以处理未识别的命令并向用户提供反馈。

我可以自定义语音控制的音频播放器中的语音命令吗？

是的，您可以自定义语音控制的音频播放器中的语音命令。这可以通过在应用程序代码中定义您自己的命令集来完成，然后 Web 语音 API 将识别和解释这些命令。这允许您根据您的特定需求和偏好来定制用户体验。

Web 语音 API 是否支持英语以外的语言？

是的，Web 语音 API 支持多种语言。您可以在 API 设置中指定语言，然后它将识别和解释该语言的命令。这使其成为开发面向国际观众的应用程序的通用工具。

Web 语音 API 的安全性如何？

Web 语音 API 的设计考虑到了安全性。它使用安全的 HTTPS 连接来传输语音数据，并且不存储任何个人信息。但是，与任何 Web 技术一样，务必遵循安全最佳实践，例如定期更新软件并保护您的应用程序免受常见的 Web 漏洞攻击。

我可以在移动应用程序中使用 Web 语音 API 吗？

虽然 Web 语音 API 主要设计用于 Web 应用程序，但它也可以通过 Web 视图在移动应用程序中使用。但是，对于原生移动应用程序，您可能需要考虑使用特定于平台的语音识别 API，这些 API 可能提供更好的性能和集成。

Web 语音 API 的局限性是什么？

虽然 Web 语音 API 是一种强大的工具，但它确实有一些局限性。例如，它需要互联网连接才能工作，并且其准确性可能会受到背景噪音和用户口音等因素的影响。此外，对 API 的支持在不同的 Web 浏览器和平台之间可能会有所不同。

如何开始使用 Web 语音 API？

要开始使用 Web 语音 API，您需要了解 JavaScript 和 Web 开发的基础知识。然后，您可以浏览 API 文档，其中提供了有关其功能以及如何使用它们的详细信息。还有许多在线教程和示例可用，可以帮助您学习如何将 API 集成到您自己的应用程序中。

以上是使用网络演讲API制作语音控制的音频播放器的详细内容。更多信息请关注PHP中文网其他相关文章！