Como usar avatar de conversão de texto em fala com síntese em tempo real

Artigo
09/30/2024

Nesse guia de instruções, você aprenderá a usar o avatar de conversão de texto em fala com síntese em tempo real. O vídeo de avatar sintético será gerado quase em tempo real depois que o sistema receber a entrada de texto.

Pré-requisitos

Antes de começar, verifique se você cumpre os seguintes pré-requisitos:

Assinatura do Azure: crie uma gratuitamente.
Recurso de fala: crie um recurso de fala no portal do Azure. Selecione o tipo de preço "Standard S0" se quiser criar um recurso de fala para acessar o avatar.
Sua chave de recurso de fala e região: depois que o recurso de fala for implantado, selecione Ir para o recurso para exibir e gerenciar chaves.

Configurar o ambiente

Para síntese de avatar em tempo real, você precisa instalar o SDK de Fala para JavaScript a ser usado com uma página da Web. Para obter instruções de instalação guiadas, consulte Instalar o SDK de Fala.

Aqui está a compatibilidade do avatar em tempo real em diferentes plataformas e navegadores:

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

¹ Ele não funciona com o servidor ICE pelo Serviço de Comunicação, mas funciona com a Coturn.

² A transparência em segundo plano não funciona.

Selecione o idioma e a voz da conversão de texto em fala

O recurso de conversão de texto em fala no serviço de Fala dá suporte a um amplo portfólio de idiomas e vozes. Acesse a lista completa ou experimente-as na Galeria de Voz.

Especifique o idioma ou a voz de SpeechConfig para corresponder ao seu texto de entrada e usar a voz especificada. O snippet de código a seguir mostra como essa técnica funciona:

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

Todas as vozes neurais são multilíngues e fluentes em seu próprio idioma e inglês. Por exemplo, se o texto de entrada em inglês for "I'm excited to try text to speech" e você selecionar es-ES-ElviraNeural, o texto será falado em inglês com um sotaque espanhol.

Se a voz não falar o idioma do texto de entrada, o serviço de Fala não criará o áudio sintetizado. Para obter uma lista completa de vozes neurais com suporte, confira Suporte de idioma e vozes do serviço de Fala.

A voz padrão é a primeira voz retornada por localidade através da API de lista de vozes. A ordem de prioridade para falar é a seguinte:

Se você não definir SpeechSynthesisVoiceName ou SpeechSynthesisLanguage, a voz padrão em en-US será falada.
Se você definir apenas SpeechSynthesisLanguage, a voz padrão da localidade especificada será falada.
Se SpeechSynthesisVoiceName e SpeechSynthesisLanguage estiverem definidos, a configuração SpeechSynthesisLanguage será ignorada. A voz que você especifica usando SpeechSynthesisVoiceName fala.
Se o elemento de voz for definido usando a Linguagem de Marcação de Síntese de Fala (SSML), as configurações SpeechSynthesisVoiceName e SpeechSynthesisLanguage serão ignoradas.

Selecionar o caractere e o estilo do avatar

Os caracteres e estilos de avatar com suporte podem ser encontrados aqui.

O trecho de código a seguir mostra como definir o caractere e o estilo do avatar:

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

Configurar a conexão com o avatar em tempo real

O avatar em tempo real usa o protocolo WebRTC para gerar o fluxo de vídeo do avatar. Você precisa configurar a conexão com o serviço de avatar por meio da conexão de par WebRTC.

Primeiro, você precisa criar um objeto de conexão par WebRTC. WebRTC é um protocolo P2P, que depende do servidor ICE para retransmissão de rede. O Serviço de fala fornece a função de retransmissão de rede e expõe uma API REST para emitir as informações do servidor ICE. Portanto, recomendamos que você busque o servidor ICE do serviço de fala. Você também pode optar por usar seu próprio servidor ICE.

Aqui está um exemplo de solicitação para buscar informações de ICE do ponto de extremidade do serviço de fala:

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

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

O trecho de código a seguir mostra como criar a conexão de par WebRTC. A URL do servidor ICE, o nome de usuário do servidor ICE e a credencial do servidor ICE podem ser buscados no conteúdo da solicitação HTTP acima.

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

Observação

A URL do servidor ICE tem dois tipos: um com prefixo turn (por exemplo, turn:relay.communication.microsoft.com:3478) e outro com prefixo stun (por exemplo, stun:relay.communication.microsoft.com:3478). No cenário de exemplo anterior, para urls você só precisa incluir uma URL com o prefixo turn.

Em segundo lugar, você precisa configurar os elementos do player de áudio e vídeo na função de retorno de chamada ontrack da conexão par. Esse retorno de chamada é invocado duas vezes durante a conexão, uma para a faixa de vídeo e uma para a faixa de áudio. Você precisa criar elementos de player de áudio e vídeo na função de retorno de chamada.

O trecho de código a seguir mostra como realizar estas etapas:

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

Em terceiro lugar, você precisa invocar o SDK de Fala para criar um sintetizador de avatar e conectar-se ao serviço de avatar, com a conexão de par como um 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) }
);

Nossa API em tempo real é desconectada depois de 5 minutos de estado ocioso do avatar. Mesmo que o avatar não esteja ocioso e funcionando normalmente, a API em tempo real será desconectada após uma conexão de 10 minutos. Para garantir a operação contínua do avatar em tempo real por mais de 10 minutos, você pode ativar a reconexão automática. Para obter informações sobre como configurar a reconexão automática, consulte esse código de exemplo (pesquise "reconexão automática").

Sintetizar vídeo de avatar falante da entrada de texto

Após as etapas acima, você deve ver o vídeo do avatar sendo reproduzido no navegador da Web. O avatar está ativo, com piscar de olhos e leve movimento corporal, mas ainda não está falando. O avatar está aguardando a entrada de texto para começar a falar.

O trecho de código a seguir mostra como enviar texto para o sintetizador de avatar e deixá-lo falar:

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

Você pode encontrar exemplos de trabalho de ponta a ponta no GitHub.

Fechar a conexão do avatar em tempo real

Para evitar custos desnecessários após terminar de usar o avatar em tempo real, é importante fechar a conexão. Há várias maneiras de fazer isso:

Quando a página da Web do navegador é fechada, o objeto de conexão par do lado do cliente WebRTC será liberado e a conexão do avatar será automaticamente encerrada após alguns segundos.
Se o avatar permanecer inativo por 5 minutos, a conexão será automaticamente encerrada pelo serviço de avatar.
Você pode fechar proativamente a conexão do avatar executando o seguinte código:
```
avatarSynthesizer.close()
```
Você pode encontrar exemplos de trabalho de ponta a ponta no GitHub.

Editar plano de fundo

Atualmente, a API de síntese em tempo real do avatar não dá suporte à definição de uma imagem/vídeo de plano de fundo e dá suporte apenas à definição de um plano de fundo de cor sólida, sem suporte transparente à tela de fundo. No entanto, há uma maneira alternativa de implementar a personalização em segundo plano no lado do cliente, seguindo estas diretrizes:

Defina a cor da tela de fundo como verde (para facilitar a correspondência), que a API de síntese em tempo real do avatar dá suporte.
Crie um elemento de tela com o mesmo tamanho do vídeo de avatar.
Capture cada quadro do vídeo do avatar e aplique um cálculo pixel a pixel para definir o pixel verde como transparente e desenhe o quadro recalculado para a tela.
Oculte o vídeo original.

Com essa abordagem, você pode obter uma tela animada que é reproduzida como um vídeo, que tem um plano de fundo transparente. Aqui está o código de exemplo para demonstrar essa abordagem.

Depois de ter um avatar de plano de fundo transparente, você pode definir a tela de fundo para qualquer imagem ou vídeo colocando a imagem ou o vídeo atrás da tela.

Compartilhar via