如何搭配即時合成使用文字轉語音虛擬人偶

文章
09/30/2024

在本操作指南中，您將瞭解如何使用文字轉語音虛擬人偶搭配即時合成。系統收到文字輸入之後，合成虛擬人偶影片會以近乎即時的方式產生。

必要條件

若要開始，必須確定您已滿足下列先決條件：

Azure 訂用帳戶：建立免費帳戶。
語音資源：在 Azure 入口網站中建立語音資源。如果您想要建立語音資源以存取虛擬人偶，請選取「標準 S0」定價層。
您的語音資源金鑰和區域：部署語音資源之後，選取 [移至資源] 以檢視和管理索引鍵。

設定環境

若要進行即時虛擬人偶合成，您必須安裝適用於 JavaScript 的語音 SDK 以搭配網頁使用。如需安裝指示，請參閱安裝語音 SDK。

以下是不同平台和瀏覽器上即時虛擬人偶的相容性：

平台	Chrome	Microsoft Edge	Safari	Firefox	Opera
Windows	Y	Y	N/A	Y¹	Y
Android	Y	Y	N/A	Y¹²	否
iOS	Y	Y	Y	Y	Y
macOS	Y	Y	Y	Y¹	Y

¹ 它無法透過通訊服務與 ICE 伺服器搭配運作，但可與 Coturn 搭配運作。

² 背景透明度無法運作。

選取文字轉語音語言和語音

語音服務中的文字轉語音功能支援廣泛的語言和語音組合。您可以取得完整清單，或在語音資源庫中試用。

指定符合您輸入文字的 SpeechConfig 語言或語音，並使用指定的語音。下列程式碼片段顯示這項技術的運作方式：

const speechConfig = SpeechSDK.SpeechConfig.fromSubscription("YourSpeechKey", "YourSpeechRegion");
// Set either the `SpeechSynthesisVoiceName` or `SpeechSynthesisLanguage`.
speechConfig.speechSynthesisLanguage = "en-US";
speechConfig.speechSynthesisVoiceName = "en-US-AvaMultilingualNeural";

所有神經語音都是多語系，而且可流利地使用其自己的語言和英文。例如，如果英文的輸入文字是 "I'm excited to try text to speech"，而且您選取了 es-ES-ElviraNeural，則會使用西班牙文腔調以英文讀出該文字。

如果語音不說輸入文字的語言，語音服務就不會建立合成的音訊。如需將支援的神精語音列出的完整清單，請參閱語音服務的語言和語音支援。

預設語音是從語音清單 API 針對每個地區設定傳回的第一個語音。說話的優先順序如下：

如果您未設定 SpeechSynthesisVoiceName 或 SpeechSynthesisLanguage，則會說出 en-US 的預設語音。
如果您只設定 SpeechSynthesisLanguage，則會說出指定地區設定的預設語音。
如果同時設定 SpeechSynthesisVoiceName 和 SpeechSynthesisLanguage，則會忽略 SpeechSynthesisLanguage 設定，您使用 SpeechSynthesisVoiceName 語音指定的聲音。
如果語音元素是使用語音合成標記語言 (SSML) 設定，則會忽略 SpeechSynthesisVoiceName 和 SpeechSynthesisLanguage 設定。

選取虛擬人偶字元和樣式

可以在這裡找到支援的虛擬人偶人物和樣式。

下列程式碼片段示範如何設定虛擬人偶字元和樣式：

const avatarConfig = new SpeechSDK.AvatarConfig(
    "lisa", // Set avatar character here.
    "casual-sitting", // Set avatar style here.
);

設定與即時虛擬人偶的連線

即時虛擬人偶會使用 WebRTC 通訊協定來輸出虛擬人偶影片串流。您必須透過 WebRTC 對等連線來設定與虛擬人偶服務的連線。

首先，您必須建立 WebRTC 對等連線物件。 WebRTC 是 P2P 通訊協定，依賴 ICE 伺服器進行網路轉送。語音服務提供網路轉接功能，並公開 REST API 以發出 ICE 伺服器資訊。因此，建議您從語音服務擷取 ICE 伺服器。您也可以選擇使用自己的 ICE 伺服器。

以下是從語音服務端點擷取 ICE 資訊的範例要求：

GET /cognitiveservices/avatar/relay/token/v1 HTTP/1.1

Host: westus2.tts.speech.microsoft.com
Ocp-Apim-Subscription-Key: YOUR_RESOURCE_KEY

下列程式碼片段示範如何建立 WebRTC 對等連線。 ICE 伺服器 URL、ICE 伺服器使用者名稱和 ICE 伺服器認證都可以從上述 HTTP 要求的承載擷取。

// Create WebRTC peer connection
peerConnection = new RTCPeerConnection({
    iceServers: [{
        urls: [ "Your ICE server URL" ],
        username: "Your ICE server username",
        credential: "Your ICE server credential"
    }]
})

注意

ICE 伺服器 URL 有兩種：一種有前置詞 turn (例如 turn:relay.communication.microsoft.com:3478)，另一種有前置詞 stun (例如 stun:relay.communication.microsoft.com:3478)。在先前的範例案例中，對於 urls，您只需要有 turn 前置詞的 URL。

其次，您必須在對等連線的 ontrack 回呼函式中設定影片和音訊播放程序元素。此回呼會在連線期間叫用兩次，一次用於影片播放軌，一次用於音訊播放軌。您必須在回呼函式中建立影片和音訊播放程式元素。

下列程式碼片段顯示如何進行：

// Fetch WebRTC video/audio streams and mount them to HTML video/audio player elements
peerConnection.ontrack = function (event) {
    if (event.track.kind === 'video') {
        const videoElement = document.createElement(event.track.kind)
        videoElement.id = 'videoPlayer'
        videoElement.srcObject = event.streams[0]
        videoElement.autoplay = true
    }

    if (event.track.kind === 'audio') {
        const audioElement = document.createElement(event.track.kind)
        audioElement.id = 'audioPlayer'
        audioElement.srcObject = event.streams[0]
        audioElement.autoplay = true
    }
}

// Offer to receive one video track, and one audio track
peerConnection.addTransceiver('video', { direction: 'sendrecv' })
peerConnection.addTransceiver('audio', { direction: 'sendrecv' })

第三，您必須叫用語音 SDK 來建立虛擬人偶合成器並連線到虛擬人偶服務，並將對等連線做為參數。

// Create avatar synthesizer
var avatarSynthesizer = new SpeechSDK.AvatarSynthesizer(speechConfig, avatarConfig)

// Start avatar and establish WebRTC connection
avatarSynthesizer.startAvatarAsync(peerConnection).then(
    (r) => { console.log("Avatar started.") }
).catch(
    (error) => { console.log("Avatar failed to start. Error: " + error) }
);

我們的即時 API 會在虛擬人偶閒置狀態 5 分鐘後中斷連線。即使虛擬人偶未閒置且正常運作，即時 API 會在 10 分鐘的連線後中斷連線。若要確保即時虛擬人偶持續作業超過 10 分鐘，您可以啟用自動重新連線。如需如何設定自動重新連線的資訊，請參閱此範例程式碼 (搜尋「自動重新連線」)。

從文字輸入合成交談虛擬人偶影片

在上述步驟之後，您應該會看到虛擬人偶影片正在網頁瀏覽器中播放。虛擬人偶很活潑，眼睛閃爍並做出輕微的身體運動，但還沒有說話。虛擬人偶正在等候文字輸入開始說話。

下列程式碼片段示範如何將文字傳送到虛擬人偶合成器，並讓虛擬人偶說話：

var spokenText = "I'm excited to try text to speech avatar."
avatarSynthesizer.speakTextAsync(spokenText).then(
    (result) => {
        if (result.reason === SpeechSDK.ResultReason.SynthesizingAudioCompleted) {
            console.log("Speech and avatar synthesized to video stream.")
        } else {
            console.log("Unable to speak. Result ID: " + result.resultId)
            if (result.reason === SpeechSDK.ResultReason.Canceled) {
                let cancellationDetails = SpeechSDK.CancellationDetails.fromResult(result)
                console.log(cancellationDetails.reason)
                if (cancellationDetails.reason === SpeechSDK.CancellationReason.Error) {
                    console.log(cancellationDetails.errorDetails)
                }
            }
        }
}).catch((error) => {
    console.log(error)
    avatarSynthesizer.close()
});

您可以在 GitHub 上找到端對端工作範例。

關閉即時虛擬人偶連線

在完成使用即時虛擬人偶之後，若要避免不必要的成本，請務必關閉連線。有數種方式可以執行這項作業：

當瀏覽器網頁關閉時，將釋出 WebRTC 用戶端對等連線物件，而虛擬人偶連線會在幾秒鐘後自動關閉。
如果虛擬人偶保持閒置 5 分鐘，則虛擬人偶服務會自動關閉連線。
您可以執行下列程式碼來主動關閉虛擬人偶連線：
```
avatarSynthesizer.close()
```
您可以在 GitHub 上找到端對端工作範例。

編輯背景

虛擬人偶即時合成 API 目前不支援設定背景影像/影片，且只支援設定純色背景，而不支援透明背景支援。不過，有替代方式在用戶端實作背景自訂，請遵循下列指導方針：

將背景色彩設定為綠色 (方便使用遮罩)，虛擬人偶即時合成 API 支援此色彩。
建立與虛擬人偶影片相同大小的畫布項目。
擷取虛擬人偶影片的每個畫面，並套用逐一像素計算，將綠色像素設定為透明，並將重新計算的畫面繪製到畫布。
隱藏原始影片。

使用此方法，您可以取得動畫畫布，其播放方式類似影片，其中有透明背景。以下是示範這類方法的範例程式碼。

擁有透明背景虛擬人偶之後，您可以將影像或影片放在畫布後面，將背景設定為任何影像或影片。

分享方式：