Como usar avatar de texto para fala com síntese em tempo real

Artigo
11/23/2024

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

Pré-requisitos

Para começar, certifique-se de que tem os seguintes pré-requisitos:

Assinatura do Azure: crie uma gratuitamente.
Recurso de fala: crie um recurso de fala no portal do Azure. Selecione o nível 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 ambiente

Para síntese de avatar em tempo real, você precisa instalar o SDK de fala para JavaScript para usar com uma página da Web. Para obter as instruções de instalação, 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	Y	Y	N/A	Y¹	Y
Android	Y	Y	N/A	Y¹²	N
iOS	Y	Y	Y	Y	Y
macOS	Y	Y	Y	Y¹	Y

1 Não funciona com o servidor ICE pelo Serviço de Comunicação, mas funciona com o Coturn.

2 A transparência de fundo não funciona.

Selecionar texto para idioma de fala e voz

O recurso de conversão de texto em fala no serviço de fala suporta um amplo portfólio de idiomas e vozes. Pode obter a lista completa ou experimentá-los na Galeria de Vozes.

Para corresponder ao texto de entrada e usar a voz especificada, você pode definir as SpeechSynthesisLanguage propriedades ou SpeechSynthesisVoiceName no SpeechConfig objeto. O trecho 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 multilingues e fluentes em seu próprio idioma e inglês. Por exemplo, se o texto de entrada em inglês for "Estou animado para tentar texto para fala" e você selecionar es-ES-ElviraNeural, o texto será falado em inglês com sotaque espanhol.

Se a voz não falar o idioma do texto de entrada, o serviço de Fala não criará áudio sintetizado. Para obter uma lista completa das vozes neurais suportadas, consulte Suporte de idioma e voz para o serviço de fala.

A voz padrão é a primeira voz retornada por localidade da API da 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 fala.
Se você definir SpeechSynthesisLanguageapenas , a voz padrão na localidade especificada fala.
Se ambos SpeechSynthesisVoiceName estiverem SpeechSynthesisLanguage definidos, a SpeechSynthesisLanguage configuração será ignorada. A voz que você especifica usando SpeechSynthesisVoiceName fala.
Se o elemento voice for definido usando SSML (Speech Synthesis Markup Language), as SpeechSynthesisVoiceName configurações e SpeechSynthesisLanguage serão ignoradas.

Selecione o personagem e o estilo do avatar

Os personagens e estilos de avatar suportados podem ser encontrados aqui.

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

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

Configurar a ligação ao avatar em tempo real

O avatar em tempo real usa o protocolo WebRTC para produzir o fluxo de vídeo do avatar. Você precisa configurar a conexão com o serviço de avatar através da conexão de pares WebRTC.

Primeiro, você precisa criar um objeto de conexão de mesmo nível WebRTC. WebRTC é um protocolo P2P, que depende do servidor ICE para retransmissão de rede. O serviço de fala fornece 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á uma solicitação de exemplo para buscar informações 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 mesmo nível WebRTC. A URL do servidor ICE, o nome de usuário do servidor ICE e a credencial do servidor ICE podem ser obtidos da carga da solicitação 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

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

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

O trecho de código a seguir mostra como fazer isso:

// 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 se conectar ao serviço de avatar, com a conexão de mesmo nível 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) }
);

Nossa API em tempo real se desconecta após 5 minutos do 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 este código de exemplo JavaScript (pesquise "reconexão automática").

Sintetize o vídeo do avatar falante a partir da entrada de texto

Após as etapas anteriores, você verá o vídeo do avatar sendo reproduzido no navegador da web. O avatar está ativo, com piscar os olhos e leve movimento corporal, mas ainda não fala. O avatar está esperando 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 deixar o avatar 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()
});

Feche a conexão de avatar em tempo real

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

Quando a página da Web do navegador é fechada, o objeto de conexão de ponto do lado do cliente WebRTC é liberado. Em seguida, a conexão do avatar é fechada automaticamente após alguns segundos.
A conexão é fechada automaticamente se o avatar permanecer ocioso por 5 minutos.
Você pode fechar proativamente a conexão do avatar executando o seguinte código:
```
avatarSynthesizer.close()
```

Editar plano de fundo

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

Defina a cor de fundo para verde (para facilitar o acasalamento), que a API de síntese em tempo real do avatar suporta.
Crie um elemento de tela com o mesmo tamanho do vídeo do 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 na tela.
Oculte o vídeo original.

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

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

Amostras de código

Você pode encontrar exemplos de código de avatar de texto para fala no repositório do Speech SDK no GitHub. Os exemplos demonstram como usar avatares de texto para fala em tempo real em seus aplicativos da Web.

Esses exemplos demonstram como usar avatares de texto para fala em tempo real em seus aplicativos móveis.

Partilhar via