Come usare l’avatar di sintesi vocale con la sintesi in tempo reale

In questa guida pratica si imparerà a usare l'avatar di sintesi vocale con la sintesi in tempo reale. Il video sintetico dell’avatar verrà generato quasi in tempo reale dopo che il sistema riceve l'input di testo.

Prerequisiti

Per iniziare, verificare di aver soddisfatto i seguenti prerequisiti:

• Sottoscrizione di Azure: creare un account gratuito.
• Risorsa di Voce: creare una risorsa di Voce nel portale di Azure. Selezionare il piano tariffario "Standard S0" se si vuole creare una risorsa Voce per accedere all'avatar.
• Chiave e area della risorsa Voce: dopo la distribuzione della risorsa Voce, selezionare Vai alla risorsa per visualizzare e gestire le chiavi.

Set up environment (Configurare l'ambiente)

Per la sintesi avatar in tempo reale, è necessario installare Speech SDK per JavaScript da usare con una pagina Web. Per le istruzioni di installazione, consultare Installare Speech SDK.

Ecco la compatibilità dell'avatar in tempo reale per diverse piattaforme e browser:

¹ Funziona con Coturn, ma non con il server ICE del Servizio di comunicazione.

² La trasparenza dello sfondo non funziona.

Selezionare la lingua e la voce per la sintesi vocale

La funzionalità sintesi vocale nel servizio cognitivo di Azure per la voce supporta un’ampia gamma di lingue e voci. È possibile ottenerne l'elenco completo o provarle nella Raccolta voci.

Specificare la lingua o la voce di SpeechConfig perché corrispondano al testo di input e usino la voce specificata. Il seguente frammento di codice illustra il funzionamento di questa tecnica:

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

Tutte le voci neurali sono multilingue e parlano fluentemente sia la propria lingua che l’inglese. Ad esempio, se il testo di input in inglese è "I’m excited to try text to speech" e si seleziona es-ES-ElviraNeural, il testo verrà pronunciato in inglese con un accento spagnolo.

Se la voce non parla la lingua del testo di input, il servizio cognitivo di Azure per la voce non creerà audio sintetizzato. Per un elenco completo delle voci neurali supportate, consultare Lingue e voci supportate per il servizio cognitivo di Azure per la voce.

La voce predefinita è la prima voce restituita per impostazioni locali dall'API dell'elenco voci. L'ordine di priorità dei parlanti è il seguente:

• Se non si imposta SpeechSynthesisVoiceName o SpeechSynthesisLanguage, la voce predefinita in en-US sarà quella a parlare.
• Se si imposta solo SpeechSynthesisLanguage, la voce predefinita nelle impostazioni locali specificate sarà quella a parlare.
• Se SpeechSynthesisVoiceName e SpeechSynthesisLanguage sono entrambi impostati, l'impostazione SpeechSynthesisLanguage verrà ignorata. La voce specificata tramite SpeechSynthesisVoiceName sarà quella a parlare.
• Se l'elemento voce viene impostato tramite Speech Synthesis Markup Language (SSML), le impostazioni SpeechSynthesisVoiceName e SpeechSynthesisLanguage verranno ignorate.

Selezionare il personaggio e lo stile avatar

I personaggi e gli stili avatar supportati sono disponibili qui.

Il seguente frammento di codice illustra come impostare il personaggio e lo stile avatar:

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

Configurare la connessione all'avatar in tempo reale

L’avatar in tempo reale usa il protocollo WebRTC per restituire lo streaming del video avatar. È necessario configurare la connessione con il servizio avatar tramite la connessione peer WebRTC.

Prima di tutto, è necessario creare un oggetto connessione peer WebRTC. WebRTC è un protocollo P2P che si basa sul server ICE per l'inoltro di rete. Il servizio Voce fornisce la funzione di inoltro di rete ed espone un'API REST per rilasciare le informazioni sul server ICE. È quindi consigliabile recuperare il server ICE dal servizio Voce. È anche possibile scegliere di usare il proprio server ICE.

Ecco una richiesta di esempio per recuperare le informazioni ICE (Interactive Connectivity Establishment) dall’endpoint del servizio Voce:

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

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

Il seguente frammento di codice illustra come creare la connessione peer WebRTC. L'URL del server ICE, il nome utente del server ICE e le credenziali del server ICE possono essere recuperati dal payload della richiesta HTTP precedente.

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

In secondo luogo, è necessario configurare gli elementi del lettore video e audio nella funzione di callback ontrack della connessione peer. Questo callback viene richiamato due volte durante la connessione, una volta per la traccia video e una per la traccia audio. È necessario creare elementi sia del lettore video che di quello audio nella funzione di callback.

Il seguente frammento di codice illustra come effettuare questi passaggi:

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

In terzo luogo, è necessario richiamare Speech SDK per creare un sintetizzatore avatar e connettersi al servizio avatar, con la connessione peer come parametro.

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

L'API in tempo reale si disconnette dopo 5 minuti di stato di inattività dell'avatar. Anche se l’avatar è attivo e funziona normalmente, l’API in tempo reale si disconnetterà dopo una connessione di 10 minuti. Per garantire il funzionamento continuo dell'avatar in tempo reale per più di 10 minuti, è possibile abilitare la riconnessione automatica. Per informazioni su come configurare la riconnessione automatica, vedere questo codice di esempio (cercare “Riconnessione automatica”).

Sintetizzare il video dell’avatar parlante dall'input di testo

Dopo aver completato i passaggi precedenti, il video avatar dovrebbe essere riprodotto nel Web browser. L'avatar è attivo, con il battito delle palpebre e un leggero movimento del corpo, ma non sta ancora parlando. L'avatar è in attesa dell'input di testo per iniziare a parlare.

Il seguente frammento di codice illustra come inviare testo al sintetizzatore avatar per far sì che possa parlare:

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

È possibile trovare campioni end-to-end funzionanti in GitHub.

Chiudere la connessione all'avatar in tempo reale

Per evitare costi non necessari una volta terminato l'utilizzo dell'avatar in tempo reale, è importante chiudere la connessione. Questa operazione può essere eseguita in diversi modi:

• Quando la pagina Web del browser è chiusa, l'oggetto della connessione peer lato client WebRTC verrà rilasciata e la connessione all'avatar verrà chiusa automaticamente dopo pochi secondi.

• Se l'avatar rimane inattivo per 5 minuti, la connessione verrà chiusa automaticamente dal servizio dell'avatar.

• È possibile chiudere la connessione all'avatar in modo proattivo eseguendo il codice seguente:

  avatarSynthesizer.close()
  

  È possibile trovare campioni end-to-end funzionanti in GitHub.

Modifica sfondo

Attualmente, l'API di sintesi dell’avatar in tempo reale non supporta l'impostazione di un'immagine o un video di sfondo, ma soltanto l'impostazione di uno sfondo a tinta unita, senza supporto di sfondo trasparente. Tuttavia, esiste un metodo alternativo per implementare la personalizzazione dello sfondo sul lato del client seguendo queste linee guida:

• Impostare il colore di sfondo su verde (per facilitare l’opacità), supportato dall'API di sintesi avatar in tempo reale.
• Creare un elemento canvas delle stesse dimensioni del video avatar.
• Acquisire ogni fotogramma del video avatar e applicare un calcolo pixel per pixel per impostare il pixel verde su trasparente e disegnare il fotogramma ricalcolato nel pannello Canvas.
• Nascondere il video originale.

Grazie a questo approccio, è possibile creare un pannello Canvas animato che funga da video e che abbia uno sfondo trasparente. Ecco il codice di esempio che illustra questo approccio.

Dopo aver creato un avatar con sfondo trasparente, sarà possibile impostare lo sfondo su qualsiasi immagine o video posizionandoli dietro al pannello Canvas.

Passaggi successivi

• Che cos'è l’avatar di sintesi vocale
• Installare Speech SDK