Hur man använder en text-till-tal-avatar med realtidssyntes

2025-04-28

I den här instruktionsguiden lär du dig hur du använder text till tal-avatar med realtidssyntes. Den syntetiska avatarvideon genereras nästan i realtid efter att systemet har fått textinmatningen.

Förutsättningar

Kom igång genom att se till att du har följande förutsättningar:

Azure-prenumeration:Skapa en kostnadsfritt.
Talresurs:Skapa en talresurs i Azure-portalen. Välj prisnivån Standard S0 om du vill skapa en talresurs för att få åtkomst till avataren.
Din talresursnyckel och region: När speech-resursen har distribuerats väljer du Gå till resurs för att visa och hantera nycklar.

Konfigurera miljö

För avatarsyntes i realtid måste du installera Speech SDK för JavaScript för användning med en webbsida. Installationsanvisningarna finns i Installera Speech SDK.

Här är kompatibiliteten för realtidsavatar på olika plattformar och webbläsare:

Plattform	Krom	Microsoft Edge	Safari	Firefox	Opera
Windows	Y	Y	Ej tillämpligt	Y¹	Y
Android	Y	Y	Ej tillämpligt	Y¹²	N
Ios	Y	Y	Y	Y	Y
macOS	Y	Y	Y	Y¹	Y

¹ Det fungerar inte med ICE-server via kommunikationstjänsten men fungerar med Coturn.

² Bakgrundstransparens fungerar inte.

Välj text-till-tal-språk och röst

Funktionen text till tal i Speech-tjänsten stöder en bred portfölj med språk och röster. Du kan hämta hela listan eller prova dem i röstgalleriet.

Om du vill matcha indatatexten och använda den angivna rösten kan du ange SpeechSynthesisLanguage egenskaperna eller SpeechSynthesisVoiceName i SpeechConfig objektet. Följande kodfragment visar hur den här tekniken fungerar:

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

Alla neurala röster är flerspråkiga och flytande på sitt eget språk och engelska. Om indatatexten på engelska till exempel är "Jag är glad över att prova text till tal", och du väljer es-ES-ElviraNeural, talas texten på engelska med spansk accent.

Om rösten inte talar indatatextens språk skapar taltjänsten inte syntetiserat ljud. En fullständig lista över neurala röster som stöds finns i Språk och röststöd för Speech-tjänsten.

Standardrösten är den första röst som returneras per språk från röstlistans API. Prioritetsordningen för tal är följande:

Om du inte anger SpeechSynthesisVoiceName eller SpeechSynthesisLanguage, talar standardrösten i en-US .
Om du bara anger SpeechSynthesisLanguagetalar standardrösten i det angivna språket.
Om både SpeechSynthesisVoiceName och SpeechSynthesisLanguage anges ignoreras inställningen SpeechSynthesisLanguage . Den röst som du anger med hjälp av SpeechSynthesisVoiceName talar.
Om röstelementet anges med hjälp av Speech Synthesis Markup Language (SSML) ignoreras inställningarna för SpeechSynthesisVoiceName och SpeechSynthesisLanguage.

Välj avatartecken och formatmall

De avatartecken och formatmallar som stöds finns här.

Följande kodfragment visar hur du anger avatartecken och formatmall:

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

Konfigurera anslutning till realtidsavatar

Realtidsavatar använder WebRTC-protokollet för att mata ut avatarvideoströmmen. Du måste konfigurera anslutningen till avatartjänsten via WebRTC-peer-anslutning.

Först måste du skapa ett WebRTC-peeranslutningsobjekt. WebRTC är ett P2P-protokoll som förlitar sig på ICE-server för nätverksrelä. Speech Service tillhandahåller nätverksreläfunktionen och exponerar ett REST-API för att utfärda ICE-serverinformationen. Därför rekommenderar vi att du hämtar ICE-servern från taltjänsten. Du kan också välja att använda din egen ICE-server.

Här är en exempelbegäran om att hämta ICE-information från slutpunkten för taltjänsten:

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

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

Följande kodfragment visar hur du skapar WebRTC-peeranslutningen. ICE-serverns URL, ICE-serveranvändarnamn och ICE-serverautentiseringsuppgifter kan alla hämtas från nyttolasten för den tidigare HTTP-begäran.

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

Kommentar

ICE-serverns URL har två typer: en med prefix turn (till exempel turn:relay.communication.microsoft.com:3478), och en med prefix stun (till exempel stun:relay.communication.microsoft.com:3478). I föregående exempelscenario urls behöver du bara inkludera en URL med prefixet turn .

För det andra måste du konfigurera video- och ljudspelarelementen ontrack i återanropsfunktionen för peer-anslutningen. Återanropet anropas två gånger under anslutningen, en gång för videospår och en gång för ljudspår. Du måste skapa både video- och ljudspelarelement i återanropsfunktionen.

Följande kodfragment visar hur du gör det:

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

För det tredje måste du anropa Speech SDK för att skapa en avatarsyntes och ansluta till avatartjänsten med peer-anslutningen som en 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) }
);

Vårt realtids-API kopplas från efter 5 minuter av avatarens inaktiva tillstånd. Även om avataren inte är inaktiv och fungerar normalt kopplas realtids-API:et från efter en 30-minuters anslutning. För att säkerställa kontinuerlig drift av realtids-avataren i mer än 30 minuter kan du aktivera automatisk återanslutning. Information om hur du konfigurerar automatisk återanslutning finns i den här JavaScript-exempelkoden (sök "automatisk återanslutning").

Syntetisera talande avatarvideo från textinmatning

Efter föregående steg bör du se avatarvideon som spelas upp i webbläsaren. Avataren är aktiv, med ögonblinkning och liten kroppsrörelse, men talar inte ännu. Avataren väntar på textinmatning för att börja tala.

Följande kodfragment visar hur du skickar text till avatarsyntesen och låter avataren tala:

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

Stäng avataranslutningen i realtid

För att undvika onödiga kostnader när du har slutfört användningen av realtidsavataren är det viktigt att stänga anslutningen. Det finns flera sätt att stänga anslutningen:

När webbläsarwebbsidan stängs släpps peer-anslutningsobjektet på WebRTC-klientsidan. Sedan stängs avataranslutningen automatiskt efter några sekunder.
Anslutningen stängs automatiskt om avataren förblir inaktiv i 5 minuter.
Du kan proaktivt stänga avataranslutningen genom att köra följande kod:
```
avatarSynthesizer.close()
```

Redigera bakgrund

Ange bakgrundsfärg

Du kan ange bakgrundsfärgen för avatarvideon backgroundColor via objektets AvatarConfig egenskap. Följande kodfragment visar hur du anger bakgrundsfärgen:

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

Kommentar

Färgsträngen ska vara i format #RRGGBBAA. Och alfakanalen (AA delen) ignoreras alltid eftersom vi inte stöder transparent bakgrund för realtidsavatar.

Ange bakgrundsbild

Du kan ange bakgrundsbilden för avatarvideon genom objektets backgroundImage-egenskap AvatarConfig. Du behöver ladda upp avbildningen till en offentligt tillgänglig URL och sedan tilldela URL:en till egenskapen backgroundImage . Följande kodfragment visar hur du ställer in bakgrundsbilden:

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.

Ange bakgrundsvideo

Api:et för avatarsyntes i realtid stöder för närvarande inte direkt inställning av bakgrundsvideo. Det finns dock ett alternativt sätt att implementera bakgrundsanpassning på klientsidan genom att följa dessa riktlinjer:

Ange bakgrundsfärgen till grön (för enkel mattning), som api:et för avatarsyntes i realtid stöder.
Skapa ett arbetsyteelement med samma storlek som avatarvideon.
Avbilda varje bildruta i avatarvideon och använd en pixel-för-pixel-beräkning för att ange den gröna pixeln till transparent och rita den omberäknade ramen till arbetsytan.
Dölj den ursprungliga videon.

Med den här metoden kan du få en animerad arbetsyta som spelas upp som en video, som har en transparent bakgrund. Här är JavaScript-exempelkoden för att demonstrera en sådan metod.

När du har en avatar med transparent bakgrund kan du ställa in bakgrunden på dynamiskt innehåll (till exempel en video) genom att placera det dynamiska innehållet bakom arbetsytan.

Beskär video

Avatarvideon är som standard i ett bildförhållande på 16:9. Om du vill beskära videon till en annan proportion kan du beskära videon till ett rektangulärt område av den ursprungliga videon. Du behöver ange rektangelområdet genom att ge koordinaterna för dess övre vänstra hörn och nedre högra hörn. Följande kodfragment visar hur du beskär videon:

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.
)

Om du vill ha ett fullständigt exempel med mer kontext kan du gå till vår exempelkod och söka efter crop.

Kodexempel

Du hittar kodexempel för text till tal-avatar i Speech SDK-lagringsplatsen på GitHub. Exemplen visar hur du använder text i realtid till talavatarer i dina webbprogram.

Server + klient
- Python (server) + JavaScript (klient)
- C# (server) + JavaScript (klient)
Endast klient
- JavaScript
- Android
- Ios

De här exemplen visar hur du använder text i realtid till talavatarer i dina mobilprogram.