核心要點

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

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

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

如果您從未聽說過Web 語音API，或者您想快速入門，那麼閱讀Aurelio De Rosa 的文章《Web 語音API 簡介》、《語音合成API》和《會說話的表單》可能是一個好主意。

瀏覽器支持

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

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

語音識別庫

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

Annyang 就是這樣一個庫，它非常易於使用。 了解更多。

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

<??>

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

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

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

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

最後，我們只需添加它們並使用以下命令啟動語音識別：

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

語音控制的音頻播放器

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

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

我們不會依賴於用於語音識別的第三方庫，因為我們希望展示如何在不向項目添加額外依賴項的情況下使用 API。語音控制的音頻播放器僅支持支持 interimResults 屬性的瀏覽器。最新版本的 Chrome 應(yīng)該是一個安全的選擇。

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

入門 — 播放列表

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

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

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

音頻播放器

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

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

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

這相對簡單。

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

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

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

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

UI 方法

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

load

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

changeCurrentSongEffect

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

playSong

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

changeStatusCode

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

changeLastCommand

一個小的輔助函數(shù)，用於更新最後一個命令框。

toggleSpinner

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

播放器方法

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

Play

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

pauseSong

這會暫停或完全停止（將播放時間返回到歌曲的開頭）一首歌曲，具體取決於作為第二個參數(shù)傳遞的內(nèi)容。它還會更新狀態(tài)代碼以通知用戶歌曲已被停止或暫停。

stop

這會根據(jù)其第一個也是唯一一個參數(shù)暫?；蛲Ｖ垢枨?/p>

prev

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

next

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

searchSpecificSong

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

語音 API 方法

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

<??>

我們在這裡所做的是創(chuàng)建一個 utterance 對象，其中包含我們希望說出的文本。 speechSynthesis 接口（在 window 對像上可用）負(fù)責(zé)處理此 utterance 對象並控制生成的語音的播放。

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

speak

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

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

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

processCommands

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

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

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

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

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

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

這將邀請用戶允許頁面訪問他們的麥克風(fēng)。如果您允許訪問，您可以開始說話，當(dāng)您停止時，將觸發(fā) onresult 事件，使語音捕獲的結(jié)果作為 JavaScript 對象可用。

參考：HTML5 語音識別 API

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

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

如您所見，我們測試了 webkitSpeechRecognition 在 window 對像上的存在情況。如果存在，那麼我們就可以開始了，否則我們會告知用戶瀏覽器不支持它。如果一切順利，我們?nèi)会嵩O(shè)置幾個選項。其中 lang 是一個有趣的選項，它可以根據(jù)您的出身來改進(jìn)識別的結(jié)果。

然後，我們在啟動 start 方法之前，為 onresult 和 onend 事件聲明處理程序。

處理結(jié)果

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

<??>

因為我們沒有使用庫，所以我們必須編寫更多代碼來設(shè)置我們的語音識別器，循環(huán)遍歷每個結(jié)果並檢查其轉(zhuǎn)錄是否與給定的關(guān)鍵字匹配。

最後，我們在語音識別結(jié)束時立即重新啟動它：

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

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

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

結(jié)論

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

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

您是否在項目中使用此 API？我很樂意在下面的評論中聽到您的聲音。

關(guān)於使用 Web 語音 API 的語音控制音頻播放器的常見問題 (FAQ)

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

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

使用語音控制的音頻播放器的優(yōu)點是什麼？

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

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

大多數(shù)現(xiàn)代 Web 瀏覽器都支持 Web 語音 API，包括 Google Chrome、Mozilla Firefox 和 Microsoft Edge。但是，在將 API 集成到您的應(yīng)用程序之前，始終最好檢查具體的瀏覽器兼容性，因為不同版本和平臺之間的支持可能會有所不同。

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

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

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

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

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

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

Web 語音 API 的安全性如何？

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

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

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

Web 語音 API 的局限性是什麼？

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

如何開始使用 Web 語音 API？

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

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