核心要點
/ 用於隱藏/顯示額外塊 / .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 數組添加新的對象，並將新歌自動包含到我們的音頻播放器中。
現在我們來看播放器本身。這將是一個包含以下內容的對象：
這相對簡單。
var audioPlayer = {
audioData: {
currentSong: -1,
songs: []
},currentSong 屬性指的是用戶當前所在的歌曲的索引。例如，當我們必須播放上一首/下一首歌曲或停止/暫停歌曲時，這很有用。
songs 數組包含用戶已收聽的所有歌曲。這意味著下次用戶收聽同一首歌曲時，我們可以從數組中加載它，而無需下載它。
您可以在此處查看完整代碼。
UI 將包含可用命令列表、可用曲目列表和一個上下文框，用於通知用戶當前操作和之前的命令。我不會詳細介紹 UI 方法，而是提供一個簡短的概述。您可以在此處找到這些方法的代碼。
這會遍歷我們之前聲明的播放列表，並將歌曲的名稱以及藝術家的名稱附加到可用軌道的列表中。
這指示當前正在播放哪首歌曲（通過將其標記為綠色並在其旁邊添加一副耳機），以及哪些歌曲已播放完畢。
這通過 changeStatusCode 方法（將此信息添加到框中）以及通過語音 API 向用戶通告此更改來指示用戶歌曲正在播放或已結束。
如上所述，這會更新上下文框中的狀態消息（例如，指示正在播放新歌曲），並利用 speak 方法向用戶通告此更改。
一個小的輔助函數，用於更新最後一個命令框。
一個小的輔助函數，用於隱藏或顯示微調器圖標（指示用戶的語音命令當前正在處理）。
播放器將負責您可能期望的內容，即：啟動、停止和暫停播放，以及在曲目之間前後移動。同樣，我不打算詳細介紹這些方法，而是想將您引導到我們的 GitHub 代碼庫。
這會檢查用戶是否已經收聽過歌曲。如果沒有，它會啟動歌曲，否則它只會調用我們之前在當前緩存的歌曲上討論過的 playSong 方法。這位於 audioData.songs 中，並對應於 currentSong 索引。
這會暫停或完全停止（將播放時間返回到歌曲的開頭）一首歌曲，具體取決於作為第二個參數傳遞的內容。它還會更新狀態代碼以通知用戶歌曲已被停止或暫停。
這會根據其第一個也是唯一一個參數暫停或停止歌曲：
這會檢查上一首歌曲是否已緩存，如果是，則暫停當前歌曲，遞減 currentSong 並再次播放當前歌曲。如果新歌不在數組中，它會執行相同的操作，但它首先會根據對應於遞減的 currentSong 索引的文件名/路徑加載歌曲。
如果用戶之前已經收聽過歌曲，此方法會嘗試暫停它。如果我們的數據對象（即我們的播放列表）中存在下一首歌曲，它會加載並播放它。如果沒有下一首歌曲，它只會更改狀態代碼並告知用戶他們已到達最後一首歌曲。
這將關鍵字作為參數，並在歌曲名稱和藝術家之間執行線性搜索，然後播放第一個匹配項。
語音 API 令人驚訝地易於實現。事實上，只需兩行代碼即可讓 Web 應用與用戶對話：
<🎜>
我們在這裡所做的是創建一個 utterance 對象，其中包含我們希望說出的文本。 speechSynthesis 接口（在 window 對像上可用）負責處理此 utterance 對象並控制生成的語音的播放。
繼續在您的瀏覽器中嘗試一下。就這麼簡單！
我們可以在我們的 speak 方法中看到它的實際應用，該方法會大聲朗讀作為參數傳遞的消息：
if (annyang) { /*逻辑*/ }如果存在第二個參數（scope），則在消息播放完畢後，我們在 scope（這將是一個 Audio 對象）上調用 play 方法。
此方法並不那麼令人興奮。它接收一個命令作為參數，並調用適當的方法來響應它。它使用正則表達式檢查用戶是否要播放特定歌曲，否則，它會進入 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 是一種強大的工具，允許開發人員將語音識別和合成功能整合到他們的 Web 應用程序中。在語音控制的音頻播放器中，API 通過將口語命令轉換為文本來工作，然後應用程序可以解釋和執行這些文本。例如，如果用戶說“播放”，API 將將其轉換為文本，應用程序將理解這是開始播放音頻的命令。此過程涉及復雜的算法和機器學習技術，以準確識別和解釋人類語音。
語音控制的音頻播放器具有多種優點。首先，它提供了一種免提體驗，當用戶忙於其他任務時，這尤其有用。其次，它可以增強行動不便用戶的可訪問性，他們可能難以使用傳統的控件。最後，它提供了一種新穎且引人入勝的用戶體驗，這可以使您的應用程序在競爭中脫穎而出。
大多數現代 Web 瀏覽器都支持 Web 語音 API，包括 Google Chrome、Mozilla Firefox 和 Microsoft Edge。但是，在將 API 集成到您的應用程序之前，始終最好檢查具體的瀏覽器兼容性，因為不同版本和平台之間的支持可能會有所不同。
可以使用高質量的麥克風、減少背景噪音以及訓練 API 以更好地理解用戶的語音和口音來提高語音識別的準確性。此外，您可以在應用程序中實現錯誤處理，以處理未識別的命令並向用戶提供反饋。
是的，您可以自定義語音控制的音頻播放器中的語音命令。這可以通過在應用程序代碼中定義您自己的命令集來完成，然後 Web 語音 API 將識別和解釋這些命令。這允許您根據您的特定需求和偏好來定制用戶體驗。
是的，Web 語音 API 支持多種語言。您可以在 API 設置中指定語言，然後它將識別和解釋該語言的命令。這使其成為開發麵向國際觀眾的應用程序的通用工具。
Web 語音 API 的設計考慮到了安全性。它使用安全的 HTTPS 連接來傳輸語音數據，並且不存儲任何個人信息。但是，與任何 Web 技術一樣，務必遵循安全最佳實踐，例如定期更新軟件並保護您的應用程序免受常見的 Web 漏洞攻擊。
雖然 Web 語音 API 主要設計用於 Web 應用程序，但它也可以通過 Web 視圖在移動應用程序中使用。但是，對於原生移動應用程序，您可能需要考慮使用特定於平台的語音識別 API，這些 API 可能提供更好的性能和集成。
雖然 Web 語音 API 是一種強大的工具，但它確實有一些局限性。例如，它需要互聯網連接才能工作，並且其準確性可能會受到背景噪音和用戶口音等因素的影響。此外，對 API 的支持在不同的 Web 瀏覽器和平台之間可能會有所不同。
要開始使用 Web 語音 API，您需要了解 JavaScript 和 Web 開發的基礎知識。然後，您可以瀏覽 API 文檔，其中提供了有關其功能以及如何使用它們的詳細信息。還有許多在線教程和示例可用，可以幫助您學習如何將 API 集成到您自己的應用程序中。
以上是使用網絡演講API製作語音控制的音頻播放器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
