Comment réaliser une synthèse en temps réel pour l’avatar de synthèse vocale

Article
07/28/2024

Dans ce guide pratique, vous apprenez à utiliser l’avatar de synthèse vocale avec une synthèse en temps réel. La vidéo d’avatar synthétique est générée en quasi-temps réel une fois que le système reçoit une entrée de texte.

Prérequis

Pour commencer, assurez-vous de disposer des prérequis suivants :

Un abonnement Azure : créez-en un gratuitement.
Ressource Speech : créez une ressource Speech dans le portail Microsoft Azure. Sélectionnez le niveau tarifaire « Standard S0 » si vous souhaitez créer une ressource Speech pour accéder à l’avatar.
Clé et région de votre ressource speech : une fois votre ressource Speech déployée, sélectionnez Accéder à la ressource pour afficher et gérer les clés. Si vous souhaitez en savoir plus sur les ressources Azure AI services, veuillez consulter la rubrique Obtenir les clés de votre ressource.

Configurer l’environnement

Pour la synthèse d’avatar en temps réel, vous devez installer le SDK Speech pour JavaScript à utiliser avec une page web. Pour obtenir des instructions d’installation, consultez Installer le SDK Speech.

Voici la compatibilité de l’avatar en temps réel sur les différentes plateformes et différents navigateurs :

Plate-forme	Chrome	Microsoft Edge	Safari	Firefox	Opera
Windows	O	O	S/O	A¹	O
Android	O	O	S/O	O¹²	N
iOS	O	O	O	O	O
macOS	O	O	O	A¹	O

¹ Il ne fonctionne pas avec le serveur ICE de Communication Service, mais fonctionne avec Coturn.

²La transparence en arrière-plan ne fonctionne pas.

Sélectionner la langue et la voix de la synthèse vocale

La fonctionnalité de synthèse vocale du service Speech prend en charge une large sélection de langues et de voix. Vous pouvez en obtenir la liste complète ou les essayer dans la Galerie vocale.

Spécifiez la langue ou la voix de SpeechConfig en fonction de votre texte d’entrée, puis utilisez la voix spécifiée. L’extrait de code suivant montre comment fonctionne cette technique :

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

Toutes les voix neuronales sont multilingues et parlent couramment leur propre langue et l’anglais. Par exemple, si le texte d’entrée en anglais est « I'm excited to try text to speech » et que vous sélectionnez es-ES-ElviraNeural, le texte est lu en anglais avec un accent espagnol.

Si la voix ne s’exprime pas dans la langue correspondant au texte entré, le service Speech ne créé pas d’audio synthétisées. Pour obtenir la liste complète des voix neuronales prises en charge, consultez Prise en charge des langues et des voix pour le service Speech.

La voix par défaut est la première voix retournée par paramètres régionaux depuis l’API de liste de voix. L’ordre de priorité des voix est le suivant :

Si vous ne définissez pas SpeechSynthesisVoiceName ou SpeechSynthesisLanguage, la voix par défaut en en-US parle.
Si vous définissez uniquement SpeechSynthesisLanguage, la voix par défaut des paramètres régionaux spécifiés parle.
Si SpeechSynthesisVoiceName et SpeechSynthesisLanguage sont tous deux définis, le paramètre SpeechSynthesisLanguage est ignoré. La voix que vous spécifiez en utilisant SpeechSynthesisVoiceName parle.
Si l’élément voix est défini en utilisant SSML (Speech Synthesis Markup Language), les paramètres SpeechSynthesisVoiceName et SpeechSynthesisLanguage sont ignorés.

Sélectionner le personnage et le style de l’avatar

Les personnages et styles d’avatar pris en charge sont disponibles ici.

L’extrait de code suivant montre comment définir le personnage et le style d’avatar :

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

Configurer la connexion à un avatar en temps réel

L’avatar en temps réel utilise le protocole WebRTC pour générer le flux vidéo. Vous devez configurer la connexion avec le service d’avatar via une connexion homologue WebRTC.

Premièrement, vous devez créer un objet de connexion homologue WebRTC. WebRTC est un protocole P2P qui s’appuie sur le serveur ICE pour le relais réseau. Le service vocal fournit une fonction de relais réseau et expose une API REST pour fournir les informations sur le serveur ICE. Par conséquent, nous vous recommandons de récupérer le serveur ICE auprès du service vocal. Vous pouvez également choisir d’utiliser votre propre serveur ICE.

Voici un exemple de requête pour obtenir des informations sur l'ICE à partir du point de terminaison du service vocal :

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

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

L'exemple de code suivant montre comment créer la connexion homologue WebRTC. L'URL du serveur ICE, le nom d'utilisateur du serveur ICE et l'identifiant du serveur ICE peuvent tous être récupérés à partir de la charge utile de la requête HTTP ci-dessus.

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

Remarque

L’URL du serveur ICE présente deux formes : une avec le préfixe turn (par exemple, turn:relay.communication.microsoft.com:3478) et une avec le préfixe stun (par exemple, stun:relay.communication.microsoft.com:3478). Dans l’exemple de scénario précédent, pour urls, vous devez uniquement inclure une URL avec le préfixe turn.

Deuxièmement, vous devez configurer les éléments de lecteur vidéo et audio dans la fonction de rappel ontrack de la connexion homologue. Ce rappel est appelé deux fois pendant la connexion, une fois pour la piste vidéo et une fois pour la piste audio. Vous devez créer les éléments de lecteur vidéo et audio dans la fonction de rappel.

L’extrait de code qui suit montre comment faire :

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

Troisièmement, vous devez appeler le SDK Speech pour créer un synthétiseur d’avatar et vous connecter au service d’avatar, avec la connexion homologue en tant que paramètre.

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

Notre API en temps réel se déconnecte après 5 minutes d'inactivité de l'avatar. Même si l'avatar n'est pas inactif et fonctionne normalement, l'API en temps réel se déconnecte après 10 minutes de connexion. Pour garantir le fonctionnement continu de l'avatar en temps réel pendant plus de 10 minutes, vous pouvez activer la reconnexion automatique. Pour savoir comment configurer la reconnexion automatique, reportez-vous à cet exemple de code (recherche « reconnexion automatique »).

Synthétiser la vidéo de l’avatar parlant à partir d’une entrée de texte

Après les étapes ci-dessus, vous devriez voir la vidéo d’avatar en cours de lecture dans le navigateur web. L’avatar est actif, il cligne des yeux et son corps fait un léger mouvement, mais il ne parle pas encore. L’avatar attend une entrée de texte pour commencer à parler.

L’extrait de code suivant montre comment envoyer du texte au synthétiseur d’avatar pour permettre à l’avatar de parler :

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

Vous trouverez des exemples complets qui fonctionnent sur GitHub.

Modifier l’arrière-plan

Actuellement, l’API de synthèse en temps réel de l’avatar ne prend pas en charge la définition d’une image/vidéo d’arrière-plan. Elle prend uniquement en charge la définition d’un arrière-plan uni, sans prise en charge d’arrière-plan transparent. Toutefois, il existe une alternative pour implémenter une personnalisation d’arrière-plan côté client en suivant ces instructions :

Définissez la couleur d’arrière-plan sur vert (pour faciliter le matage), que prend en charge l’API de synthèse en temps réel de l’avatar.
Créez un élément de canevas avec la même taille que la vidéo d’avatar.
Capturez chaque image de la vidéo d’avatar et appliquez un calcul pixel par pixel pour définir le pixel vert sur transparent, puis dessinez l’image recalculée sur le canevas.
Masquez la vidéo d’origine.

Avec cette approche, vous pouvez obtenir un canevas animé qui fonctionne comme une vidéo, avec un arrière-plan transparent. Voici l’exemple de code pour illustrer cette approche.

Une fois que vous avez un avatar avec un arrière-plan transparent, vous pouvez définir l’arrière-plan sur n’importe quelle image ou vidéo en plaçant l’image ou la vidéo derrière le canevas.

Partager via