核心要點(diǎn)

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

/ 用于隱藏/顯示額外塊 / .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 語音 API 是一個(gè) JavaScript API，它使 Web 開發(fā)人員能夠?qū)⒄Z音識(shí)別和合成功能整合到他們的網(wǎng)頁中。

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

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

瀏覽器支持

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

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

語音識(shí)別庫

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

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

要初始化 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)語音識(shí)別：

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

語音控制的音頻播放器

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

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

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

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

入門 — 播放列表

讓我們從一個(gè)靜態(tà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)在我們來看播放器本身。這將是一個(gè)包含以下內(nèi)容的對(duì)象：

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

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

這相對(duì)簡單。

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

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

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

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

UI 方法

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

load

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

changeCurrentSongEffect

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

playSong

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

changeStatusCode

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

changeLastCommand

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

toggleSpinner

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

播放器方法

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

Play

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

pauseSong

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

stop

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

prev

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

next

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

searchSpecificSong

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

語音 API 方法

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

<??>

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

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

speak

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

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

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

processCommands

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

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

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

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

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

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

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

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

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

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

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

然后，我們在啟動(dòng) start 方法之前，為 onresult 和 onend 事件聲明處理程序。

處理結(jié)果

當(dāng)語音識(shí)別器獲得結(jié)果時(shí)，至少在當(dāng)前語音識(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)語音識(shí)別。我們這樣做是因?yàn)榈却罱K結(jié)果可能需要長達(dá)一分鐘的時(shí)間，這會(huì)使我們的音頻播放器看起來相當(dāng)無響應(yīng)且毫無意義，因?yàn)樗恍鑶螕舭粹o就會(huì)更快。

<??>

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

最后，我們在語音識(shí)別結(jié)束時(shí)立即重新啟動(dòng)它：

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

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

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

結(jié)論

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web 語音 API 的安全性如何？

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

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

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

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

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

如何開始使用 Web 語音 API？

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

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