Procedimiento para usar el avatar de texto a voz con síntesis en tiempo real

Artículo
09/29/2024

En esta guía paso a paso, aprenderá a usar el avatar de texto a voz con síntesis en tiempo real. El vídeo de avatar sintético se generará casi en tiempo real después de que el sistema reciba la entrada de texto.

Requisitos previos

Para empezar, asegúrese de que tiene los siguientes requisitos previos:

Una suscripción a Azure: cree una cuenta gratuita.
Recurso de voz: creación de un recurso de voz en Azure Portal. Seleccione el plan de tarifa "Estándar S0" si desea crear un recurso de voz para acceder al avatar.
La clave y la región del recurso de voz: una vez implementado el recurso de Voz, seleccione Ir al recurso para ver y administrar claves.

Configuración de entorno

Para la síntesis de avatares en tiempo real, debe instalar el SDK de Voz para JavaScript para usarlo con una página web. Para las instrucciones de instalación guiadas, consulte Instalación del SDK de Voz.

Esta es la compatibilidad del avatar en tiempo real en diferentes plataformas y exploradores:

Plataforma	Chrome	Microsoft Edge	Safari	Firefox	Opera
Windows	Y	Y	N/D	S¹	Y
Android	Y	Y	N/D	Y¹²	N
iOS	Y	Y	Y	Y	Y
macOS	Y	Y	Y	S¹	Y

¹ no funciona con el servidor ICE de Communication Service, pero funciona con Coturn.

² transparencia en segundo plano no funciona.

Selección del lenguaje de texto a voz y voz

La característica de texto a voz del servicio de Azure Cognitive Service para voz admite una amplia cartera de idiomas y voces. Puede obtener la lista completa o probarlas en la galería de voz.

Especifique el idioma o la voz de SpeechConfig para que coincida con el texto de entrada y usar la voz especificada. El siguiente fragmento de código muestra cómo funciona esta técnica:

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

Todas las voces neuronales son multilingües y fluidas en su propio idioma y en inglés. Por ejemplo, si el texto de entrada en inglés es "Estoy encantado de probar texto a voz" y selecciona es-ES-ElviraNeural, el texto se habla en inglés con un acento español.

Si la voz no habla el idioma del texto de entrada, el servicio de Voz no crea audio sintetizado. Para obtener una lista completa de las voces neuronales admitidas, consulte Compatibilidad de idioma y voz con el servicio voz.

La voz predeterminada es la primera voz devuelta por configuración regional de la API de lista de voz. El orden de prioridad para hablar es el siguiente:

Si no establece SpeechSynthesisVoiceName o SpeechSynthesisLanguage, habla la voz predeterminada en en-US.
Si solo establece SpeechSynthesisLanguage, habla la voz predeterminada en la configuración regional especificada.
Si se establecen SpeechSynthesisVoiceName y SpeechSynthesisLanguage, se omitirá la configuración SpeechSynthesisLanguage. Habla la voz que especifique mediante SpeechSynthesisVoiceName.
Si el elemento de voz se establece mediante el lenguaje de marcado de síntesis de voz (SSML), se omite la configuración de SpeechSynthesisVoiceName y SpeechSynthesisLanguage.

Selección del carácter y el estilo del avatar

Los caracteres y estilos de avatar admitidos se pueden encontrar aquí.

En el siguiente fragmento de código se muestra cómo establecer el carácter y el estilo del avatar:

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

Configuración de la conexión al avatar en tiempo real

El avatar en tiempo real usa el protocolo WebRTC para generar la secuencia de vídeo del avatar. Debe configurar la conexión con el servicio avatar a través de la conexión del nodo del mismo nivel de WebRTC.

En primer lugar, debe crear un objeto de conexión del nodo del mismo nivel de WebRTC. WebRTC es un protocolo P2P, que se basa en el servidor ICE para la retransmisión de red. El servicio Voz proporciona una función de retransmisión de red y expone una API de REST para que emita la información del servidor ICE. Por lo tanto, se recomienda capturar el servidor ICE del servicio de Voz. También puede optar por usar su propio servidor ICE.

Esta es una solicitud de ejemplo para capturar información de ICE desde el punto de conexión del servicio de Voz:

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

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

El siguiente fragmento de código muestra cómo crear la conexión del nodo del mismo nivel de WebRTC. La dirección URL del servidor ICE, el nombre de usuario del servidor ICE y la credencial del servidor ICE se pueden capturar de la carga de la solicitud HTTP anterior.

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

Nota:

La dirección URL del servidor ICE tiene dos tipos: uno con el prefijo turn (como turn:relay.communication.microsoft.com:3478) y otro con prefijo stun (como stun:relay.communication.microsoft.com:3478). En el escenario de ejemplo anterior, para urls solo necesita incluir una dirección URL con el prefijo turn.

En segundo lugar, debe configurar los elementos del reproductor de vídeo y audio en la función de devolución de llamada ontrack de la conexión del nodo del mismo nivel. Esta devolución de llamada se invoca dos veces durante la conexión, una vez para la pista de vídeo y una vez para la pista de audio. Debe crear elementos de reproductor de vídeo y audio en la función de devolución de llamada.

El siguiente fragmento de código muestra cómo hacerlo:

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

En tercer lugar, debe invocar el SDK de voz para crear un sintetizador de avatar y conectarse al servicio de avatar, con la conexión del nodo del mismo nivel como parámetro.

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

Nuestra API en tiempo real se desconecta después de 5 minutos del estado de inactividad del avatar. Incluso si el avatar no está inactivo y funciona normalmente, la API en tiempo real se desconectará después de una conexión de 10 minutos. Para garantizar el funcionamiento continuo del avatar en tiempo real durante más de 10 minutos, puede habilitar la reconexión automática. Para obtener información sobre cómo configurar la reconexión automática, consulte este código de ejemplo (busque "volver a conectar automáticamente").

Síntesis de vídeo de avatar de conversación a partir de la entrada de texto

Después de los pasos anteriores, debería ver el vídeo de avatar que se reproduce en el explorador web. El avatar está activo, con un parpadeo ocular y un ligero movimiento corporal, pero aún no habla. El avatar está esperando que la entrada de texto para empezar a hablar.

En el siguiente fragmento de código se muestra cómo enviar texto al sintetizador de avatares y dejar que el avatar hable:

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

Puede encontrar ejemplos de trabajo de un extremo a otro en GitHub.

Cierre la conexión de avatar en tiempo real

Para evitar costos innecesarios después de terminar de usar el avatar en tiempo real, es importante cerrar la conexión. Esto se puede hacer de varias maneras:

Cuando se cierra la página web del explorador, se liberará el objeto de conexión del lado del mismo nivel del lado cliente de WebRTC y la conexión del avatar se cerrará automáticamente después de unos segundos.
Si el avatar permanece inactivo durante 5 minutos, el servicio de avatar cerrará automáticamente la conexión.
Puede cerrar proactivamente la conexión de avatar ejecutando el código siguiente:
```
avatarSynthesizer.close()
```
Puede encontrar ejemplos de trabajo de un extremo a otro en GitHub.

Edición del fondo

Actualmente, la API de síntesis en tiempo real de avatar no admite la configuración de una imagen o vídeo de fondo y solo admite la configuración de un fondo de color sólido, sin compatibilidad con fondo transparente. Sin embargo, hay una manera alternativa de implementar la personalización del fondo en el lado cliente, siguiendo estas instrucciones:

Establezca el color de fondo en verde (para facilitar el matizado), que admite la API de síntesis en tiempo real del avatar.
Cree un elemento de lienzo con el mismo tamaño que el vídeo de avatar.
Capture cada fotograma del vídeo de avatar y aplique un cálculo de píxel por píxel para establecer el píxel verde en transparente y dibuje el fotograma recalculado en el lienzo.
Oculte el vídeo original.

Con este enfoque, puede obtener un lienzo animado que se reproduce como un vídeo, que tiene un fondo transparente. Este es el código de ejemplo para demostrar este enfoque.

Después de tener un avatar de fondo transparente, puede establecer el fondo en cualquier imagen o vídeo colocando la imagen o vídeo detrás del lienzo.

Compartir a través de