Dela via


Hur man gör realtidssyntes för text till tal avatar (förhandsversion)

Kommentar

Text till tal-avatar är för närvarande i offentlig förhandsversion. Den här förhandsversionen tillhandahålls utan ett serviceavtal och rekommenderas inte för produktionsarbetsbelastningar. Vissa funktioner kanske inte stöds eller kan vara begränsade. Mer information finns i Kompletterande villkor för användning av Microsoft Azure-förhandsversioner.

I den här instruktionsguiden lär du dig hur du använder text till tal-avatar (förhandsversion) 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. Mer information om Azure AI-tjänstresurser finns i Hämta nycklarna för din resurs.

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 Chrome Microsoft Edge Safari Firefox Opera
Windows Y Y Ej tillämpligt Y1 Y
Android Y Y Ej tillämpligt Y12 N
iOS Y Y Y Y Y
macOS Y Y Y Y1 Y

1 Det fungerar inte med ICE Server by Communication Service men fungerar med Coturn.

2 Bakgrundstransparens fungerar inte.

Välj text till talsprå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.

Ange språket eller rösten SpeechConfig för för att matcha indatatexten och använd den angivna rösten. 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 SpeechSynthesisVoiceName av talar.
  • Om röstelementet anges med hjälp av Speech Synthesis Markup Language (SSML) SpeechSynthesisVoiceName ignoreras inställningarna 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 taltjänstens slutpunkt:

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-serverns användarnamn och ICE-serverautentiseringsuppgifter kan alla hämtas från nyttolasten i http-begäran ovan.

// 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 10-minuters anslutning. För att säkerställa kontinuerlig drift av realtids-avataren i mer än 10 minuter kan du aktivera automatisk återanslutning. Information om hur du konfigurerar automatisk återanslutning finns i den här exempelkoden (sök "automatisk återanslutning").

Syntetisera talande avatarvideo från textinmatning

Efter stegen ovan 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å att textinmatningen ska 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()
});

Du hittar arbetsexempel från slutpunkt till slutpunkt på GitHub.

Redigera bakgrund

Api:et för avatarsyntes i realtid stöder för närvarande inte inställning av en bakgrundsbild/video och stöder endast inställning av en bakgrund med en solid färg, utan transparent bakgrundsstöd. 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 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å valfri bild eller video genom att placera bilden eller videon bakom arbetsytan.

Nästa steg