共用方式為

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

  • 發行項

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

必要條件

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

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

設定環境

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

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

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

1 它不會透過通訊服務與 ICE 伺服器搭配運作，但可與 Coturn 搭配運作。

2 背景透明度無法運作。

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

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

若要比對輸入文字並使用指定的語音，您可以在 物件中SpeechConfig設定 SpeechSynthesisLanguage 或 SpeechSynthesisVoiceName 屬性。 下列程式碼片段顯示這項技術的運作方式：

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 分鐘，您可以啟用自動重新連線。 如需如何設定自動重新連線的資訊，請參閱此 JavaScript 範例程式代碼 （搜尋「自動重新連線」）。

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

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

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

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()
});

關閉即時虛擬人偶連線

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

  • 關閉瀏覽器網頁時，會釋放 WebRTC 用戶端對等連線物件。 然後，虛擬人偶連接會在幾秒鐘后自動關閉。

  • 如果虛擬人偶保持閑置 5 分鐘，則會自動關閉連線。

  • 您可以執行下列程式碼來主動關閉虛擬人偶連線：

    avatarSynthesizer.close()

編輯背景

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

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

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

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

程式碼範例

您可以在 GitHub 上的語音 SDK 存放庫中找到文字到語音虛擬人偶程式代碼範例。 這些範例示範如何在 Web 應用程式中使用即時文字到語音虛擬人偶。

這些範例示範如何在行動應用程式中使用即時文字到語音虛擬人偶。

下一步