Tekst gebruiken om avatar te spreken met realtime synthese

Artikel
11/23/2024

In deze handleiding leert u hoe u tekst gebruikt om avatar te spreken met realtime synthese. De synthetische avatarvideo wordt bijna in realtime gegenereerd nadat het systeem de tekstinvoer heeft ontvangen.

Vereisten

Zorg ervoor dat u aan de volgende vereisten voldoet om aan de slag te gaan:

Azure-abonnement: maak er gratis een.
Spraakresource: Maak een spraakresource in Azure Portal. Selecteer de prijscategorie Standard S0 als u een spraakresource wilt maken voor toegang tot avatar.
Uw spraakresourcesleutel en -regio: Nadat uw Spraak-resource is geïmplementeerd, selecteert u Ga naar de resource om sleutels weer te geven en te beheren.

Omgeving instellen

Voor realtime avatarsynthese moet u de Speech SDK voor JavaScript installeren voor gebruik met een webpagina. Zie De Speech SDK installeren voor de installatie-instructies.

Dit is de compatibiliteit van realtime avatar op verschillende platforms en browsers:

Platform	Chrome	Microsoft Edge	Safari	Firefox	Opera
Windows	J	J	N.v.t.	Y¹	J
Android	J	J	N.v.t.	Y¹²	N
iOS	J	J	J	J	J
macOS	J	J	J	Y¹	J

¹ Het doseert niet met ICE-server door Communication Service, maar werkt met Coturn.

² Transparantie op de achtergrond werkt niet.

Tekst naar spraaktaal en spraak selecteren

De functie tekst-naar-spraak in de Speech-service ondersteunt een breed scala aan talen en stemmen. U kunt de volledige lijst ophalen of ze uitproberen in de spraakgalerie.

Als u de invoertekst wilt vergelijken en de opgegeven stem wilt gebruiken, kunt u de SpeechSynthesisLanguage of SpeechSynthesisVoiceName eigenschappen in het SpeechConfig object instellen. In het volgende codefragment ziet u hoe deze techniek werkt:

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

Alle neurale stemmen zijn meertalige en vloeiende taal en Engels. Als de invoertekst in het Engels bijvoorbeeld 'Ik ben enthousiast om tekst naar spraak te proberen' is en u es-ES-ElviraNeural selecteert, wordt de tekst in het Engels gesproken met een Spaans accent.

Als de stem de taal van de invoertekst niet spreekt, maakt de Speech-service geen gesynthetiseerde audio. Zie Taal- en spraakondersteuning voor de Speech-service voor een volledige lijst met ondersteunde neurale stemmen.

De standaardstem is de eerste stem die per landinstelling wordt geretourneerd vanuit de spraaklijst-API. De volgorde van prioriteit voor spreken is als volgt:

Als u dit niet instelt SpeechSynthesisVoiceName of SpeechSynthesisLanguage, spreekt de standaardstem in en-US het gesprek.
Als u alleen instelt SpeechSynthesisLanguage, spreekt de standaardstem in de opgegeven landinstelling.
Als beide SpeechSynthesisVoiceName zijn SpeechSynthesisLanguage ingesteld, wordt de SpeechSynthesisLanguage instelling genegeerd. De stem die u opgeeft met behulp van SpeechSynthesisVoiceName spreekt.
Als het spraakelement is ingesteld met behulp van Speech Synthesis Markup Language (SSML), worden de SpeechSynthesisVoiceName en SpeechSynthesisLanguage instellingen genegeerd.

Avatar-teken en -stijl selecteren

De ondersteunde avatartekens en -stijlen vindt u hier.

In het volgende codefragment ziet u hoe u avatarteken en -stijl instelt:

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

Verbinding met realtime avatar instellen

Realtime avatar maakt gebruik van het WebRTC-protocol om de avatar-videostream uit te voeren. U moet de verbinding met de avatarservice instellen via een WebRTC-peerverbinding.

Eerst moet u een WebRTC-peerverbindingsobject maken. WebRTC is een P2P-protocol dat afhankelijk is van de ICE-server voor netwerkrelais. Speech Service biedt de netwerkrelayfunctie en stelt een REST API beschikbaar om informatie over de ICE-server uit te geven. Daarom raden we u aan de ICE-server op te halen uit de spraakservice. U kunt er ook voor kiezen om uw eigen ICE-server te gebruiken.

Hier volgt een voorbeeldaanvraag voor het ophalen van ICE-gegevens van het speech-service-eindpunt:

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

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

In het volgende codefragment ziet u hoe u de WebRTC-peerverbinding maakt. De URL van de ICE-server, de gebruikersnaam van de ICE-server en de ICE-serverreferentie kunnen allemaal worden opgehaald uit de nettolading van de vorige HTTP-aanvraag.

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

Notitie

De URL van de ICE-server heeft twee soorten: één met voorvoegsel turn (zoals turn:relay.communication.microsoft.com:3478), en één met voorvoegsel stun (zoals stun:relay.communication.microsoft.com:3478). In het vorige voorbeeldscenario urls hoeft u alleen een URL met het turn voorvoegsel op te nemen.

Ten tweede moet u de elementen van de video- en audiospeler instellen in de ontrack callback-functie van de peerverbinding. Deze callback wordt tweemaal aangeroepen tijdens de verbinding, eenmaal voor videotrack en eenmaal voor audiotrack. U moet zowel video- als audiospelerelementen maken in de callback-functie.

In het volgende codefragment ziet u hoe u dit doet:

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

Ten derde moet u de Speech SDK aanroepen om een avatarsynthese te maken en verbinding te maken met de avatarservice, met de peerverbinding als parameter.

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

Onze realtime-API verbreekt de verbinding na 5 minuten van de niet-actieve status van avatar. Zelfs als de avatar niet inactief is en normaal functioneert, wordt de verbinding met de realtime-API verbroken na een verbinding van 20 minuten. Om ervoor te zorgen dat de realtime avatar langer dan 20 minuten continu wordt gebruikt, kunt u automatisch opnieuw verbinding maken inschakelen. Raadpleeg deze JavaScript-voorbeeldcode (zoek automatisch opnieuw verbinding maken) voor informatie over het instellen van automatisch opnieuw verbinden.

Avatarvideo synthetiseren vanuit tekstinvoer

Na de vorige stappen ziet u dat de avatarvideo wordt afgespeeld in de webbrowser. De avatar is actief, met oog knipperen en lichte lichaamsbewegingen, maar nog niet spreken. De avatar wacht totdat tekstinvoer begint te spreken.

In het volgende codefragment ziet u hoe u tekst naar de avatarsynthesizer verzendt en de avatar laat spreken:

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

Sluit de realtime avatarverbinding

Om onnodige kosten te voorkomen nadat u klaar bent met het gebruik van de realtime avatar, is het belangrijk om de verbinding te sluiten. Er zijn verschillende manieren om de verbinding te sluiten:

Wanneer de browserwebpagina is gesloten, wordt het peerverbindingsobject aan de clientzijde van de webRTC-client vrijgegeven. Vervolgens wordt de avatarverbinding na een paar seconden automatisch gesloten.
De verbinding wordt automatisch gesloten als de avatar vijf minuten inactief blijft.
U kunt de avatarverbinding proactief sluiten door de volgende code uit te voeren:
```
avatarSynthesizer.close()
```

Achtergrond bewerken

De avatar-API voor realtime synthese biedt momenteel geen ondersteuning voor het instellen van een achtergrondafbeelding/video en biedt alleen ondersteuning voor het instellen van een effen achtergrond, zonder transparante achtergrondondersteuning. Er is echter een alternatieve manier om achtergrondaanpassing aan de clientzijde te implementeren, volgens deze richtlijnen:

Stel de achtergrondkleur in op groen (voor gemak van matting), die door de avatar realtime synthese-API wordt ondersteund.
Maak een canvaselement met dezelfde grootte als de avatarvideo.
Leg elk frame van de avatarvideo vast en pas een pixel-per-pixelberekening toe om de groene pixel in te stellen op transparant en het herberekende frame op het canvas te tekenen.
Verberg de oorspronkelijke video.

Met deze aanpak kunt u een geanimeerd canvas krijgen dat wordt afgespeeld als een video, die een transparante achtergrond heeft. Hier volgt de JavaScript-voorbeeldcode om een dergelijke benadering te demonstreren.

Nadat u een avatar met transparante achtergrond hebt, kunt u de achtergrond instellen op elke afbeelding of video door de afbeelding of video achter het canvas te plaatsen.

Codevoorbeelden

U vindt tekst-naar-spraak-avatarcodevoorbeelden in de Speech SDK-opslagplaats op GitHub. De voorbeelden laten zien hoe u realtime tekst gebruikt voor spraak-avatars in uw webtoepassingen.

Deze voorbeelden laten zien hoe u realtime tekst gebruikt voor spraak avatars in uw mobiele toepassingen.

Delen via