Utilisation l’avatar de synthèse vocale avec une synthèse en temps réel

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

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	Opéra
Fenêtres	O	O	S/O	A1	O
Android	O	O	S/O	O12	N
Ios	O	O	O	O	O
macOS	O	O	O	A1	O

¹ Il ne fonctionne pas avec le serveur ICE via le service de communication, 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.

Pour faire correspondre votre texte d’entrée et utiliser la voix spécifiée, vous pouvez définir les propriétés SpeechSynthesisLanguage ou SpeechSynthesisVoiceName dans l’objet SpeechConfig. 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 extraire 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 les informations d’identification du serveur ICE peuvent tous être récupérés auprès de la charge utile de la requête HTTP précédente.

// 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 lorsque l’avatar n’est pas inactif et fonctionne normalement, l’API en temps réel se déconnecte après 30 minutes de connexion. Pour veiller au fonctionnement continu de l’avatar en temps réel pendant plus de 30 minutes, vous pouvez activer la reconnexion automatique. Pour plus d’informations sur la configuration de la reconnexion automatique, reportez-vous à cet exemple de code JavaScript (recherchez « reconnexion automatique »).

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

Après les étapes précédentes, vous devez normalement 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()
});

Fermer la connexion d’avatar en temps réel

Pour éviter les coûts inutiles une fois que vous avez fini d’utiliser l’avatar en temps réel, il est important de fermer la connexion. Il existe plusieurs façons de fermer la connexion :

• Quand la page web du navigateur est fermée, l’objet de connexion du pair côté client WebRTC est libéré. Ensuite, la connexion d’avatar est fermée automatiquement après quelques secondes.

• La connexion est fermée automatiquement si l’avatar reste inactif pendant 5 minutes.

• Vous pouvez fermer de manière proactive la connexion d’avatar en exécutant le code suivant :

  avatarSynthesizer.close()
  

Modifier l’arrière-plan

Définir la couleur d’arrière-plan

Vous pouvez définir la couleur d’arrière-plan de la vidéo avatar via la propriété de l’objet backgroundColorAvatarConfig . L’extrait de code suivant montre comment définir la couleur d’arrière-plan :

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

Remarque

La chaîne de couleur doit être au format #RRGGBBAA. Et la partie du canal alpha (AA) est toujours ignorée, car notre système ne prend pas en charge l’arrière-plan transparent pour l’avatar en temps réel.

Définir l’image d’arrière-plan

Vous pouvez définir l’image d’arrière-plan de la vidéo avatar par le biais de la propriété de l’objet backgroundImageAvatarConfig . Vous devez charger l’image dans une URL accessible publique, puis affecter l’URL à la backgroundImage propriété. L’extrait de code suivant montre comment définir l’image d’arrière-plan :

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.

Définir une vidéo d’arrière-plan

L’API de synthèse en temps réel de l’avatar ne prend actuellement pas en charge la définition directe de la vidéo en arrière-plan. 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 JavaScript pour illustrer cette approche.

Une fois que vous avez un avatar transparent en arrière-plan, vous pouvez définir l’arrière-plan sur n’importe quel contenu dynamique (comme une vidéo) en plaçant le contenu dynamique derrière le canevas.

Rogner la vidéo

La vidéo d’avatar est par défaut dans un rapport d’aspect de 16:9. Si vous souhaitez rogner la vidéo sur un autre rapport d’aspect, vous pouvez rogner la vidéo dans une sous-zone rectangle de la vidéo d’origine. Vous devez spécifier la zone rectangle en donnant les coordonnées de son sommet supérieur gauche et du sommet inférieur droit. L’extrait de code suivant montre comment rogner la vidéo :

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

Pour obtenir un exemple complet avec plus de contexte, vous pouvez accéder à notre exemple de code et effectuer une recherche crop.

Exemples de code

Vous trouverez des exemples de code d’avatar de synthèse vocale dans le référentiel des Kits de développement logiciel (SDK) Speech sur GitHub. Les exemples montrent comment utiliser des avatars de synthèse vocale en temps réel dans vos applications web.

• Serveur + client
  • Python (serveur) + JavaScript (client)
  • C# (serveur) + JavaScript (client)
• Client uniquement
  • JavaScript
  • Android
  • Ios

Ces exemples montrent comment utiliser des avatars de synthèse vocale en temps réel dans vos applications mobiles.

Étapes suivantes

• Qu’est-ce que l’avatar de synthèse vocale
• Installer le Kit de développement logiciel (SDK) Speech