核心要點(diǎn)

• Web 語(yǔ)音 API 是一個(gè) JavaScript API，允許 Web 開(kāi)發(fā)人員將語(yǔ)音識(shí)別和合成集成到他們的網(wǎng)頁(yè)中，從而增強(qiáng)用戶體驗(yàn)，尤其對(duì)于殘疾人士或需要同時(shí)處理多項(xiàng)任務(wù)的用戶而言。
• 語(yǔ)音識(shí)別 API 目前需要互聯(lián)網(wǎng)連接和用戶權(quán)限才能訪問(wèn)麥克風(fēng)。Annyang 等庫(kù)可以幫助管理復(fù)雜性并確保向前兼容。
• 可以使用語(yǔ)音合成 API 和語(yǔ)音識(shí)別 API 構(gòu)建語(yǔ)音控制的音頻播放器。這允許用戶使用語(yǔ)音命令在歌曲之間導(dǎo)航并請(qǐng)求特定歌曲。
• 音頻播放器將包含設(shè)置數(shù)據(jù)、UI 方法、語(yǔ)音 API 方法和音頻操作方法。識(shí)別和處理用戶輸入的代碼僅適用于 WebKit 瀏覽器。
• Web 語(yǔ)音 API 具有在許多領(lǐng)域使用的潛力，例如使用語(yǔ)音命令瀏覽電子郵件、導(dǎo)航網(wǎng)站或搜索網(wǎng)絡(luò)。隨著實(shí)現(xiàn)的穩(wěn)定和新功能的添加，預(yù)計(jì)該 API 的使用將會(huì)增長(zhǎng)。

/ 用于隱藏/顯示額外塊 / .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 共同評(píng)審。感謝所有 SitePoint 的同行評(píng)審員，使 SitePoint 的內(nèi)容達(dá)到最佳狀態(tài)!

Web 語(yǔ)音 API 是一個(gè) JavaScript API，它使 Web 開(kāi)發(fā)人員能夠?qū)⒄Z(yǔ)音識(shí)別和合成功能整合到他們的網(wǎng)頁(yè)中。

這樣做的原因有很多。例如，為了增強(qiáng)殘疾人的體驗(yàn)（特別是視力障礙的用戶，或手部活動(dòng)能力有限的用戶），或者允許用戶在執(zhí)行其他任務(wù)（例如駕駛）時(shí)與 Web 應(yīng)用進(jìn)行交互。

如果您從未聽(tīng)說(shuō)過(guò) Web 語(yǔ)音 API，或者您想快速入門(mén)，那么閱讀 Aurelio De Rosa 的文章《Web 語(yǔ)音 API 簡(jiǎn)介》、《語(yǔ)音合成 API》和《會(huì)說(shuō)話的表單》可能是一個(gè)好主意。

瀏覽器支持

瀏覽器廠商最近才開(kāi)始同時(shí)實(shí)現(xiàn)語(yǔ)音識(shí)別 API 和語(yǔ)音合成 API。如您所見(jiàn)，對(duì)這些 API 的支持還遠(yuǎn)非完美，因此如果您正在學(xué)習(xí)本教程，請(qǐng)使用合適的瀏覽器。

此外，語(yǔ)音識(shí)別 API 目前需要互聯(lián)網(wǎng)連接，因?yàn)檎Z(yǔ)音會(huì)通過(guò)網(wǎng)絡(luò)傳輸，結(jié)果會(huì)返回到瀏覽器。如果連接使用 HTTP，則用戶必須在每次請(qǐng)求時(shí)都允許站點(diǎn)使用他們的麥克風(fēng)。如果連接使用 HTTPS，則只需要這樣做一次。

語(yǔ)音識(shí)別庫(kù)

庫(kù)可以幫助我們管理復(fù)雜性，并確保我們保持向前兼容。例如，當(dāng)另一個(gè)瀏覽器開(kāi)始支持語(yǔ)音識(shí)別 API 時(shí)，我們不必?fù)?dān)心添加廠商前綴。

Annyang 就是這樣一個(gè)庫(kù)，它非常易于使用。了解更多。

要初始化 Annyang，我們將它們的腳本添加到我們的網(wǎng)站：

<??>

我們可以像這樣檢查 API 是否受支持：

if (annyang) { /*邏輯*/ }

并使用一個(gè)對(duì)象添加命令，該對(duì)象使用命令名稱作為鍵，回調(diào)作為方法：

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

最后，我們只需添加它們并使用以下命令啟動(dòng)語(yǔ)音識(shí)別：

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

語(yǔ)音控制的音頻播放器

在本文中，我們將構(gòu)建一個(gè)語(yǔ)音控制的音頻播放器。我們將同時(shí)使用語(yǔ)音合成 API（用于告知用戶正在播放哪首歌曲，或者命令未被識(shí)別）和語(yǔ)音識(shí)別 API（將語(yǔ)音命令轉(zhuǎn)換為字符串，這些字符串將觸發(fā)不同的應(yīng)用程序邏輯）。

使用 Web 語(yǔ)音 API 的音頻播放器的優(yōu)點(diǎn)是，用戶可以瀏覽瀏覽器中的其他頁(yè)面或最小化瀏覽器并執(zhí)行其他操作，同時(shí)仍然能夠在歌曲之間切換。如果我們的播放列表中有許多歌曲，我們甚至可以請(qǐng)求一首特定的歌曲，而無(wú)需手動(dòng)搜索（如果我們知道它的名稱或歌手，當(dāng)然）。

我們不會(huì)依賴于用于語(yǔ)音識(shí)別的第三方庫(kù)，因?yàn)槲覀兿Ｍ故救绾卧诓幌蝽?xiàng)目添加額外依賴項(xiàng)的情況下使用 API。語(yǔ)音控制的音頻播放器僅支持支持 interimResults 屬性的瀏覽器。最新版本的 Chrome 應(yīng)該是一個(gè)安全的選擇。

與往常一樣，您可以在 GitHub 上找到完整的代碼，以及 CodePen 上的演示。

入門(mén) — 播放列表

讓我們從一個(gè)靜態(tài)播放列表開(kāi)始。它由一個(gè)對(duì)象組成，該對(duì)象在一個(gè)數(shù)組中包含不同的歌曲。每首歌都是一個(gè)新對(duì)象，包含文件的路徑、歌手的姓名和歌曲的名稱：

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

我們應(yīng)該能夠向 songs 數(shù)組添加新的對(duì)象，并將新歌自動(dòng)包含到我們的音頻播放器中。

音頻播放器

現(xiàn)在我們來(lái)看播放器本身。這將是一個(gè)包含以下內(nèi)容的對(duì)象：

• 一些設(shè)置數(shù)據(jù)
• 與 UI 相關(guān)的方 法（例如填充歌曲列表）
• 與語(yǔ)音 API 相關(guān)的方 法（例如識(shí)別和處理命令）
• 與音頻操作相關(guān)的方 法（例如播放、暫停、停止、上一首、下一首）

設(shè)置數(shù)據(jù)

這相對(duì)簡(jiǎn)單。

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

currentSong 屬性指的是用戶當(dāng)前所在的歌曲的索引。例如，當(dāng)我們必須播放上一首/下一首歌曲或停止/暫停歌曲時(shí)，這很有用。

songs 數(shù)組包含用戶已收聽(tīng)的所有歌曲。這意味著下次用戶收聽(tīng)同一首歌曲時(shí)，我們可以從數(shù)組中加載它，而無(wú)需下載它。

您可以在此處查看完整代碼。

UI 方法

UI 將包含可用命令列表、可用曲目列表和一個(gè)上下文框，用于通知用戶當(dāng)前操作和之前的命令。我不會(huì)詳細(xì)介紹 UI 方法，而是提供一個(gè)簡(jiǎn)短的概述。您可以在此處找到這些方法的代碼。

load

這會(huì)遍歷我們之前聲明的播放列表，并將歌曲的名稱以及藝術(shù)家的名稱附加到可用軌道的列表中。

changeCurrentSongEffect

這指示當(dāng)前正在播放哪首歌曲（通過(guò)將其標(biāo)記為綠色并在其旁邊添加一副耳機(jī)），以及哪些歌曲已播放完畢。

playSong

這通過(guò) changeStatusCode 方法（將此信息添加到框中）以及通過(guò)語(yǔ)音 API 向用戶通告此更改來(lái)指示用戶歌曲正在播放或已結(jié)束。

changeStatusCode

如上所述，這會(huì)更新上下文框中的狀態(tài)消息（例如，指示正在播放新歌曲），并利用 speak 方法向用戶通告此更改。

changeLastCommand

一個(gè)小的輔助函數(shù)，用于更新最后一個(gè)命令框。

toggleSpinner

一個(gè)小的輔助函數(shù)，用于隱藏或顯示微調(diào)器圖標(biāo)（指示用戶的語(yǔ)音命令當(dāng)前正在處理）。

播放器方法

播放器將負(fù)責(zé)您可能期望的內(nèi)容，即：?jiǎn)?dòng)、停止和暫停播放，以及在曲目之間前后移動(dòng)。同樣，我不打算詳細(xì)介紹這些方法，而是想將您引導(dǎo)到我們的 GitHub 代碼庫(kù)。

Play

這會(huì)檢查用戶是否已經(jīng)收聽(tīng)過(guò)歌曲。如果沒(méi)有，它會(huì)啟動(dòng)歌曲，否則它只會(huì)調(diào)用我們之前在當(dāng)前緩存的歌曲上討論過(guò)的 playSong 方法。這位于 audioData.songs 中，并對(duì)應(yīng)于 currentSong 索引。

pauseSong

這會(huì)暫?；蛲耆Ｖ梗▽⒉シ艜r(shí)間返回到歌曲的開(kāi)頭）一首歌曲，具體取決于作為第二個(gè)參數(shù)傳遞的內(nèi)容。它還會(huì)更新?tīng)顟B(tài)代碼以通知用戶歌曲已被停止或暫停。

stop

這會(huì)根據(jù)其第一個(gè)也是唯一一個(gè)參數(shù)暫停或停止歌曲：

prev

這會(huì)檢查上一首歌曲是否已緩存，如果是，則暫停當(dāng)前歌曲，遞減 currentSong 并再次播放當(dāng)前歌曲。如果新歌不在數(shù)組中，它會(huì)執(zhí)行相同的操作，但它首先會(huì)根據(jù)對(duì)應(yīng)于遞減的 currentSong 索引的文件名/路徑加載歌曲。

next

如果用戶之前已經(jīng)收聽(tīng)過(guò)歌曲，此方法會(huì)嘗試暫停它。如果我們的數(shù)據(jù)對(duì)象（即我們的播放列表）中存在下一首歌曲，它會(huì)加載并播放它。如果沒(méi)有下一首歌曲，它只會(huì)更改狀態(tài)代碼并告知用戶他們已到達(dá)最后一首歌曲。

searchSpecificSong

這將關(guān)鍵字作為參數(shù)，并在歌曲名稱和藝術(shù)家之間執(zhí)行線性搜索，然后播放第一個(gè)匹配項(xiàng)。

語(yǔ)音 API 方法

語(yǔ)音 API 令人驚訝地易于實(shí)現(xiàn)。事實(shí)上，只需兩行代碼即可讓 Web 應(yīng)用與用戶對(duì)話：

<??>

我們?cè)谶@里所做的是創(chuàng)建一個(gè) utterance 對(duì)象，其中包含我們希望說(shuō)出的文本。speechSynthesis 接口（在 window 對(duì)象上可用）負(fù)責(zé)處理此 utterance 對(duì)象并控制生成的語(yǔ)音的播放。

繼續(xù)在您的瀏覽器中嘗試一下。就這么簡(jiǎn)單！

speak

我們可以在我們的 speak 方法中看到它的實(shí)際應(yīng)用，該方法會(huì)大聲朗讀作為參數(shù)傳遞的消息：

if (annyang) { /*邏輯*/ }

如果存在第二個(gè)參數(shù)（scope），則在消息播放完畢后，我們?cè)?scope（這將是一個(gè) Audio 對(duì)象）上調(diào)用 play 方法。

processCommands

此方法并不那么令人興奮。它接收一個(gè)命令作為參數(shù)，并調(diào)用適當(dāng)?shù)姆椒▉?lái)響應(yīng)它。它使用正則表達(dá)式檢查用戶是否要播放特定歌曲，否則，它會(huì)進(jìn)入 switch 語(yǔ)句以測(cè)試不同的命令。如果沒(méi)有任何一個(gè)與接收到的命令相對(duì)應(yīng)，它會(huì)告知用戶未理解該命令。

您可以在此處找到它的代碼。

將所有內(nèi)容結(jié)合在一起

到目前為止，我們有一個(gè)表示播放列表的數(shù)據(jù)對(duì)象，以及一個(gè)表示播放器本身的 audioPlayer 對(duì)象?，F(xiàn)在我們需要編寫(xiě)一些代碼來(lái)識(shí)別和處理用戶輸入。請(qǐng)注意，這僅適用于 WebKit 瀏覽器。

讓用戶與您的應(yīng)用對(duì)話的代碼與之前一樣簡(jiǎn)單：

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

這將邀請(qǐng)用戶允許頁(yè)面訪問(wèn)他們的麥克風(fēng)。如果您允許訪問(wèn)，您可以開(kāi)始說(shuō)話，當(dāng)您停止時(shí)，將觸發(fā) onresult 事件，使語(yǔ)音捕獲的結(jié)果作為 JavaScript 對(duì)象可用。

參考：HTML5 語(yǔ)音識(shí)別 API

我們可以在我們的應(yīng)用中按如下方式實(shí)現(xiàn)它：

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

如您所見(jiàn)，我們測(cè)試了 webkitSpeechRecognition 在 window 對(duì)象上的存在情況。如果存在，那么我們就可以開(kāi)始了，否則我們會(huì)告知用戶瀏覽器不支持它。如果一切順利，我們?nèi)缓笤O(shè)置幾個(gè)選項(xiàng)。其中 lang 是一個(gè)有趣的選項(xiàng)，它可以根據(jù)您的出身來(lái)改進(jìn)識(shí)別的結(jié)果。

然后，我們?cè)趩?dòng) start 方法之前，為 onresult 和 onend 事件聲明處理程序。

處理結(jié)果

當(dāng)語(yǔ)音識(shí)別器獲得結(jié)果時(shí)，至少在當(dāng)前語(yǔ)音識(shí)別實(shí)現(xiàn)和我們的需求的上下文中，我們想做幾件事。每次有結(jié)果時(shí)，我們都希望將其保存在數(shù)組中，并設(shè)置一個(gè)超時(shí)以等待三秒鐘，以便瀏覽器可以收集任何進(jìn)一步的結(jié)果。三秒鐘后，我們想使用收集到的結(jié)果并以相反的順序循環(huán)遍歷它們（較新的結(jié)果更有可能準(zhǔn)確），并檢查識(shí)別的轉(zhuǎn)錄是否包含我們可用的命令之一。如果是，我們執(zhí)行該命令并重新啟動(dòng)語(yǔ)音識(shí)別。我們這樣做是因?yàn)榈却罱K結(jié)果可能需要長(zhǎng)達(dá)一分鐘的時(shí)間，這會(huì)使我們的音頻播放器看起來(lái)相當(dāng)無(wú)響應(yīng)且毫無(wú)意義，因?yàn)樗恍鑶螕舭粹o就會(huì)更快。

<??>

因?yàn)槲覀儧](méi)有使用庫(kù)，所以我們必須編寫(xiě)更多代碼來(lái)設(shè)置我們的語(yǔ)音識(shí)別器，循環(huán)遍歷每個(gè)結(jié)果并檢查其轉(zhuǎn)錄是否與給定的關(guān)鍵字匹配。

最后，我們?cè)谡Z(yǔ)音識(shí)別結(jié)束時(shí)立即重新啟動(dòng)它：

if (annyang) { /*邏輯*/ }

您可以在此處查看此部分的完整代碼。

就是這樣。我們現(xiàn)在有一個(gè)完全功能齊全且語(yǔ)音控制的音頻播放器。我強(qiáng)烈建議您從 GitHub 下載代碼并試用它，或者查看 CodePen 演示。我還提供了一個(gè)通過(guò) HTTPS 提供服務(wù)的版本。

結(jié)論

我希望本實(shí)踐教程能很好地介紹 Web 語(yǔ)音 API 的可能性。我認(rèn)為隨著實(shí)現(xiàn)的穩(wěn)定和新功能的添加，我們將看到此 API 的使用會(huì)增長(zhǎng)。例如，我認(rèn)為未來(lái)的 YouTube 將完全由語(yǔ)音控制，我們可以觀看不同用戶的視頻，播放特定歌曲，并且只需使用語(yǔ)音命令即可在歌曲之間移動(dòng)。

Web 語(yǔ)音 API 還可以改善許多其他領(lǐng)域，或開(kāi)辟新的可能性。例如，使用語(yǔ)音瀏覽電子郵件、導(dǎo)航網(wǎng)站或搜索網(wǎng)絡(luò)。

您是否在項(xiàng)目中使用此 API？我很樂(lè)意在下面的評(píng)論中聽(tīng)到您的聲音。

關(guān)于使用 Web 語(yǔ)音 API 的語(yǔ)音控制音頻播放器的常見(jiàn)問(wèn)題 (FAQ)

Web 語(yǔ)音 API 如何在語(yǔ)音控制的音頻播放器中工作？

Web 語(yǔ)音 API 是一種強(qiáng)大的工具，允許開(kāi)發(fā)人員將語(yǔ)音識(shí)別和合成功能整合到他們的 Web 應(yīng)用程序中。在語(yǔ)音控制的音頻播放器中，API 通過(guò)將口語(yǔ)命令轉(zhuǎn)換為文本來(lái)工作，然后應(yīng)用程序可以解釋和執(zhí)行這些文本。例如，如果用戶說(shuō)“播放”，API 將將其轉(zhuǎn)換為文本，應(yīng)用程序?qū)⒗斫膺@是開(kāi)始播放音頻的命令。此過(guò)程涉及復(fù)雜的算法和機(jī)器學(xué)習(xí)技術(shù)，以準(zhǔn)確識(shí)別和解釋人類語(yǔ)音。

使用語(yǔ)音控制的音頻播放器的優(yōu)點(diǎn)是什么？

語(yǔ)音控制的音頻播放器具有多種優(yōu)點(diǎn)。首先，它提供了一種免提體驗(yàn)，當(dāng)用戶忙于其他任務(wù)時(shí)，這尤其有用。其次，它可以增強(qiáng)行動(dòng)不便用戶的可訪問(wèn)性，他們可能難以使用傳統(tǒng)的控件。最后，它提供了一種新穎且引人入勝的用戶體驗(yàn)，這可以使您的應(yīng)用程序在競(jìng)爭(zhēng)中脫穎而出。

我可以在任何 Web 瀏覽器中使用 Web 語(yǔ)音 API 嗎？

大多數(shù)現(xiàn)代 Web 瀏覽器都支持 Web 語(yǔ)音 API，包括 Google Chrome、Mozilla Firefox 和 Microsoft Edge。但是，在將 API 集成到您的應(yīng)用程序之前，始終最好檢查具體的瀏覽器兼容性，因?yàn)椴煌姹竞推脚_(tái)之間的支持可能會(huì)有所不同。

如何提高語(yǔ)音控制的音頻播放器中語(yǔ)音識(shí)別的準(zhǔn)確性？

可以使用高質(zhì)量的麥克風(fēng)、減少背景噪音以及訓(xùn)練 API 以更好地理解用戶的語(yǔ)音和口音來(lái)提高語(yǔ)音識(shí)別的準(zhǔn)確性。此外，您可以在應(yīng)用程序中實(shí)現(xiàn)錯(cuò)誤處理，以處理未識(shí)別的命令并向用戶提供反饋。

我可以自定義語(yǔ)音控制的音頻播放器中的語(yǔ)音命令嗎？

是的，您可以自定義語(yǔ)音控制的音頻播放器中的語(yǔ)音命令。這可以通過(guò)在應(yīng)用程序代碼中定義您自己的命令集來(lái)完成，然后 Web 語(yǔ)音 API 將識(shí)別和解釋這些命令。這允許您根據(jù)您的特定需求和偏好來(lái)定制用戶體驗(yàn)。

Web 語(yǔ)音 API 是否支持英語(yǔ)以外的語(yǔ)言？

是的，Web 語(yǔ)音 API 支持多種語(yǔ)言。您可以在 API 設(shè)置中指定語(yǔ)言，然后它將識(shí)別和解釋該語(yǔ)言的命令。這使其成為開(kāi)發(fā)面向國(guó)際觀眾的應(yīng)用程序的通用工具。

Web 語(yǔ)音 API 的安全性如何？

Web 語(yǔ)音 API 的設(shè)計(jì)考慮到了安全性。它使用安全的 HTTPS 連接來(lái)傳輸語(yǔ)音數(shù)據(jù)，并且不存儲(chǔ)任何個(gè)人信息。但是，與任何 Web 技術(shù)一樣，務(wù)必遵循安全最佳實(shí)踐，例如定期更新軟件并保護(hù)您的應(yīng)用程序免受常見(jiàn)的 Web 漏洞攻擊。

我可以在移動(dòng)應(yīng)用程序中使用 Web 語(yǔ)音 API 嗎？

雖然 Web 語(yǔ)音 API 主要設(shè)計(jì)用于 Web 應(yīng)用程序，但它也可以通過(guò) Web 視圖在移動(dòng)應(yīng)用程序中使用。但是，對(duì)于原生移動(dòng)應(yīng)用程序，您可能需要考慮使用特定于平臺(tái)的語(yǔ)音識(shí)別 API，這些 API 可能提供更好的性能和集成。

Web 語(yǔ)音 API 的局限性是什么？

雖然 Web 語(yǔ)音 API 是一種強(qiáng)大的工具，但它確實(shí)有一些局限性。例如，它需要互聯(lián)網(wǎng)連接才能工作，并且其準(zhǔn)確性可能會(huì)受到背景噪音和用戶口音等因素的影響。此外，對(duì) API 的支持在不同的 Web 瀏覽器和平臺(tái)之間可能會(huì)有所不同。

如何開(kāi)始使用 Web 語(yǔ)音 API？

要開(kāi)始使用 Web 語(yǔ)音 API，您需要了解 JavaScript 和 Web 開(kāi)發(fā)的基礎(chǔ)知識(shí)。然后，您可以瀏覽 API 文檔，其中提供了有關(guān)其功能以及如何使用它們的詳細(xì)信息。還有許多在線教程和示例可用，可以幫助您學(xué)習(xí)如何將 API 集成到您自己的應(yīng)用程序中。

以上是使用網(wǎng)絡(luò)演講API制作語(yǔ)音控制的音頻播放器的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！