Hoe je een tekst-naar-spraak-avatar met realtime synthese gebruikt

In deze handleiding leert u hoe u een tekst-naar-spraakavatar met real-time synthese gebruikt. De synthetische avatarvideo wordt bijna in realtime gegenereerd nadat het systeem de tekstinvoer heeft ontvangen.

Vereiste voorwaarden

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 de 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:

Platvorm	Chroom	Microsoft Edge	Safari	Firefox	Opera
Ramen	Ja	Ja	Niet van toepassing.	Y1	Ja
Android	Ja	Ja	Niet van toepassing.	Y12	N
Ios	Ja	Ja	Ja	Ja	Ja
macOS	Ja	Ja	Ja	Y1	Ja

¹ Het werkt niet met de ICE-server van Communication Service, maar werkt wel met Coturn.

² Transparantie op de achtergrond werkt niet.

Selecteer taal en stem voor tekst-naar-spraak

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 meertalig en vloeiend in hun eigen taal en in het Engels. Als de invoertekst in het Engels bijvoorbeeld 'Ik ben enthousiast om tekst-naar-spraak uit te proberen' is en u es-ES-ElviraNeural selecteert, wordt de tekst in het Engels uitgesproken met een Spaans accent.

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

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 SpeechSynthesisVoiceName of SpeechSynthesisLanguage niet instelt, wordt de standaardstem in en-US gebruikt.
• Als u alleen instelt SpeechSynthesisLanguage, spreekt de standaardstem in de opgegeven landinstelling.
• Als zowel SpeechSynthesisVoiceName als SpeechSynthesisLanguage zijn 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"
    }]
})

Opmerking

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 30 minuten. Om ervoor te zorgen dat de avatar in realtime langer dan 30 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 op tekstinvoer om te beginnen met 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

Achtergrondkleur instellen

U kunt de achtergrondkleur van de avatarvideo instellen via de backgroundColor eigenschap van het AvatarConfig object. In het volgende codefragment ziet u hoe u de achtergrondkleur instelt:

const avatarConfig = new SpeechSDK.AvatarConfig(
    "lisa", // Set avatar character here.
    "casual-sitting", // Set avatar style here.
)
avatarConfig.backgroundColor = '#00FF00FF' // Set background color to green

Opmerking

De kleurtekenreeks moet een indeling #RRGGBBAAhebben. En het alfakanaal (AA onderdeel) wordt altijd genegeerd omdat we geen transparante achtergrond voor realtime avatar ondersteunen.

Achtergrondafbeelding instellen

U kunt de achtergrondafbeelding van de avatarvideo instellen via de backgroundImage-eigenschap van het AvatarConfig-object. U moet de afbeelding uploaden naar een openbare toegankelijke URL en vervolgens de URL toewijzen aan de backgroundImage eigenschap. In het volgende codefragment ziet u hoe u de achtergrondafbeelding instelt:

const avatarConfig = new SpeechSDK.AvatarConfig(
    "lisa", // Set avatar character here.
    "casual-sitting", // Set avatar style here.
)
avatarConfig.backgroundImage = "https://www.example.com/1920-1080-image.jpg" // A public accessiable URL of the image.

Achtergrondvideo instellen

De avatar-API voor realtimesynthese biedt momenteel geen ondersteuning voor het rechtstreeks instellen van achtergrondvideo. 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 dynamische inhoud (zoals een video) door de dynamische inhoud achter het canvas te plaatsen.

Video bijsnijden

De avatarvideo is standaard in een hoogte-breedteverhouding van 16:9. Als u de video wilt bijsnijden tot een andere hoogte-breedteverhouding, kunt u de video bijsnijden tot een rechthoekgebied van de oorspronkelijke video. U moet het rechthoekgebied opgeven door de coördinaten van het hoekpunt linksboven en het rechterbenedenhoekpunt te geven. In het volgende codefragment ziet u hoe u de video bijsnijd:

const videoFormat = new SpeechSDK.AvatarVideoFormat()
const topLeftCoordinate = new SpeechSDK.Coordinate(640, 0) // coordinate of top-left vertex, with X=640, Y=0
const bottomRightCoordinate = new SpeechSDK.Coordinate(1320, 1080) // coordinate of bottom-right vertex, with X=1320, Y=1080
videoFormat.setCropRange(topLeftCoordinate, bottomRightCoordinate)
const avatarConfig = new SpeechSDK.AvatarConfig(
    "lisa", // Set avatar character here.
    "casual-sitting", // Set avatar style here.
    videoFormat, // Set video format here.
)

Voor een volledig voorbeeld met meer context kunt u naar onze voorbeeldcode gaan en zoeken crop.

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.

• Server + client
  • Python (server) + JavaScript (client)
  • C# (server) + JavaScript (client)
• Alleen cliënt
  • JavaScript
  • Android
  • Ios

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

Volgende stappen

• Wat is tekst-naar-spraak-avatar?
• De Speech SDK installeren