Jak używać tekstu do mowy awatara z syntezą w czasie rzeczywistym

Artykuł
01/13/2025

W tym przewodniku z instrukcjami dowiesz się, jak używać tekstu do mowy awatara z syntezą w czasie rzeczywistym. Syntetyczny awatar wideo zostanie wygenerowany w niemal czasie rzeczywistym po otrzymaniu tekstu przez system.

Wymagania wstępne

Aby rozpocząć pracę, upewnij się, że masz następujące wymagania wstępne:

Subskrypcja platformy Azure:utwórz bezpłatnie.
Zasób mowy:utwórz zasób mowy w witrynie Azure Portal. Wybierz warstwę cenową "Standardowa S0", jeśli chcesz utworzyć zasób mowy, aby uzyskać dostęp do awatara.
Klucz zasobu mowy i region: po wdrożeniu zasobu usługi Mowa wybierz pozycję Przejdź do zasobu , aby wyświetlić klucze i zarządzać nimi.

Konfigurowanie środowiska

W przypadku syntezy awatarów w czasie rzeczywistym należy zainstalować zestaw SPEECH SDK dla języka JavaScript do użycia ze stroną internetową. Aby uzyskać instrukcje dotyczące instalacji, zobacz Instalowanie zestawu SPEECH SDK.

Oto zgodność awatara w czasie rzeczywistym na różnych platformach i przeglądarkach:

Platforma	Chrome	Microsoft Edge	Safari	Firefox	Opera
Windows	Y	Y	Nie dotyczy	Y¹	Y
Android	Y	Y	Nie dotyczy	Y¹²	N
iOS	Y	Y	Y	Y	Y
macOS	Y	Y	Y	Y¹	Y

¹ Dawka nie działa z serwerem ICE by Communication Service, ale współpracuje z Coturn.

² Przezroczystość tła nie działa.

Wybieranie tekstu na język mowy i głos

Funkcja zamiany tekstu na mowę w usłudze Mowa obsługuje szerokie portfolio języków i głosów. Pełną listę możesz uzyskać lub wypróbować w galerii głosów.

Aby dopasować tekst wejściowy i użyć określonego głosu, możesz ustawić SpeechSynthesisLanguage właściwości lub SpeechSynthesisVoiceName w SpeechConfig obiekcie. Poniższy fragment kodu pokazuje, jak działa ta technika:

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

Wszystkie neuronowe głosy są wielojęzyczne i płynne we własnym języku i języku angielskim. Jeśli na przykład tekst wejściowy w języku angielskim to "Jestem podekscytowany próbą zamiany tekstu na mowę" i wybierzesz es-ES-ElviraNeural, tekst jest mówiony w języku angielskim z hiszpańskim akcentem.

Jeśli głos nie mówi w języku tekstu wejściowego, usługa rozpoznawania mowy nie tworzy syntetyzowanego dźwięku. Aby uzyskać pełną listę obsługiwanych głosów neuronowych, zobacz Obsługa języka i głosu dla usługi Mowa.

Domyślny głos to pierwszy głos zwracany na ustawienia regionalne z interfejsu API listy głosowej. Kolejność priorytetu mówienia jest następująca:

Jeśli nie ustawisz SpeechSynthesisVoiceName lub SpeechSynthesisLanguage, domyślny głos mówi en-US .
Jeśli ustawisz SpeechSynthesisLanguagetylko , domyślny głos w określonych ustawieniach regionalnych mówi.
Jeśli ustawienia i SpeechSynthesisVoiceNameSpeechSynthesisLanguage są ustawione, SpeechSynthesisLanguage ustawienie jest ignorowane. Głos, który określisz przy użyciu SpeechSynthesisVoiceName głosu.
Jeśli element głosowy jest ustawiony przy użyciu języka znaczników syntezy mowy (SSML), SpeechSynthesisVoiceName ustawienia i SpeechSynthesisLanguage są ignorowane.

Wybierz znak awatara i styl

Obsługiwane znaki awatara i style można znaleźć tutaj.

Poniższy fragment kodu pokazuje, jak ustawić znak awatara i styl:

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

Konfigurowanie połączenia z awatarem w czasie rzeczywistym

Awatar w czasie rzeczywistym używa protokołu WebRTC do wyprowadzania strumienia wideo awatara. Należy skonfigurować połączenie z usługą awatara za pośrednictwem połączenia równorzędnego WebRTC.

Najpierw należy utworzyć obiekt połączenia równorzędnego WebRTC. WebRTC to protokół P2P, który opiera się na serwerze ICE dla przekaźnika sieciowego. Usługa mowa udostępnia funkcję przekaźnika sieciowego i uwidacznia interfejs API REST w celu wystawiania informacji o serwerze ICE. W związku z tym zalecamy pobranie serwera ICE z usługi mowy. Możesz również użyć własnego serwera ICE.

Oto przykładowe żądanie pobrania informacji ICE z punktu końcowego usługi rozpoznawania mowy:

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

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

Poniższy fragment kodu pokazuje, jak utworzyć połączenie równorzędne WebRTC. Adres URL serwera ICE, nazwa użytkownika serwera ICE i poświadczenia serwera ICE można pobrać z ładunku poprzedniego żądania HTTP.

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

Uwaga

Adres URL serwera ICE ma dwa rodzaje: jeden z prefiksem (takim jak ), i jeden z prefiksem turnstun (takim jak turn:relay.communication.microsoft.com:3478stun:relay.communication.microsoft.com:3478). W poprzednim przykładowym scenariuszu urls wystarczy dołączyć tylko adres URL z prefiksem turn .

Po drugie, należy skonfigurować elementy odtwarzacza wideo i audio w ontrack funkcji wywołania zwrotnego połączenia równorzędnego. To wywołanie zwrotne jest wywoływane dwa razy podczas połączenia, raz w przypadku ścieżki wideo i raz dla ścieżki audio. Należy utworzyć zarówno elementy odtwarzacza wideo, jak i audio w funkcji wywołania zwrotnego.

Poniższy fragment kodu pokazuje, jak to zrobić:

// 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' })

Po trzecie, musisz wywołać zestaw SDK usługi Mowa, aby utworzyć syntetyzator awatara i połączyć się z usługą awatara z połączeniem równorzędnym jako parametrem.

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

Nasz interfejs API w czasie rzeczywistym rozłącza się po 5 minutach bezczynności awatara. Nawet jeśli awatar nie jest bezczynny i działa normalnie, interfejs API w czasie rzeczywistym rozłączy się po 20-minutowym połączeniu. Aby zapewnić ciągłą operację awatara w czasie rzeczywistym przez ponad 20 minut, możesz włączyć automatyczne ponowne łączenie. Aby uzyskać informacje na temat konfigurowania automatycznego ponownego nawiązywania połączenia, zapoznaj się z tym przykładowym kodem JavaScript (wyszukiwanie "automatyczne ponowne nawiązywanie połączenia").

Syntetyzowanie wideo awatara z wprowadzania tekstu

Po poprzednich krokach w przeglądarce internetowej powinno zostać wyświetlone wideo awatara. Awatar jest aktywny, z mgnieniu oka i lekkim ruchem ciała, ale jeszcze nie mówi. Awatar czeka na wprowadzenie tekstu, aby zacząć mówić.

Poniższy fragment kodu pokazuje, jak wysłać tekst do syntetyzatora awatara i pozwolić awatarowi mówić:

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

Zamykanie połączenia awatara w czasie rzeczywistym

Aby uniknąć niepotrzebnych kosztów po zakończeniu korzystania z awatara w czasie rzeczywistym, ważne jest zamknięcie połączenia. Istnieje kilka sposobów zamknięcia połączenia:

Po zamknięciu strony internetowej przeglądarki zostanie zwolniony obiekt połączenia równorzędnego po stronie klienta WebRTC. Następnie połączenie awatara jest automatycznie zamykane po kilku sekundach.
Połączenie jest automatycznie zamykane, jeśli awatar pozostaje bezczynny przez 5 minut.
Możesz aktywnie zamknąć połączenie awatara, uruchamiając następujący kod:
```
avatarSynthesizer.close()
```

Edytuj tło

Interfejs API syntezy awatara w czasie rzeczywistym obecnie nie obsługuje ustawiania obrazu/wideo tła i obsługuje ustawianie tła w kolorze stałym bez obsługi przezroczystego tła. Istnieje jednak alternatywny sposób implementacji dostosowywania w tle po stronie klienta, zgodnie z następującymi wytycznymi:

Ustaw kolor tła na zielony (w celu ułatwienia matowania), który obsługuje interfejs API syntezy awatara w czasie rzeczywistym.
Utwórz element kanwy o takim samym rozmiarze jak wideo awatara.
Przechwyć każdą ramkę wideo awatara i zastosuj obliczenie pikseli po pikselach, aby ustawić zielony piksel na przezroczysty i narysować ponownie obliczoną ramkę na kanwę.
Ukryj oryginalny film wideo.

Dzięki temu podejściu można uzyskać animowaną kanwę, która odtwarza film wideo, który ma przezroczyste tło. Oto przykładowy kod języka JavaScript, aby zademonstrować takie podejście.

Po utworzeniu awatara przezroczystego tła możesz ustawić tło na dowolny obraz lub wideo, umieszczając obraz lub wideo za kanwą.

Przykłady kodu

Przykłady kodu awatara mowy można znaleźć w repozytorium zestawu Speech SDK w witrynie GitHub. Przykłady pokazują, jak używać tekstu w czasie rzeczywistym do rozpoznawania awatarów mowy w aplikacjach internetowych.

Te przykłady pokazują, jak używać tekstu w czasie rzeczywistym do rozpoznawania awatarów mowy w aplikacjach mobilnych.

Udostępnij za pośrednictwem