Como fazer síntese em tempo real para avatar de texto para fala (visualização)

Artigo
05/10/2024

Nota

O avatar de conversão de texto em fala está atualmente em pré-visualização pública. Essa visualização é fornecida sem um contrato de nível de serviço e não é recomendada para cargas de trabalho de produção. Algumas funcionalidades poderão não ser suportadas ou poderão ter capacidades limitadas. Para obter mais informações, veja Termos Suplementares de Utilização para Pré-visualizações do Microsoft Azure.

Neste guia de instruções, você aprenderá a usar o avatar de texto para fala (visualização) 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:

Subscrição 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. Para obter mais informações sobre os recursos dos serviços de IA do Azure, consulte Obter as chaves para o seu recurso.

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.

Especifique o idioma ou a voz de para corresponder ao texto de SpeechConfig entrada e use a voz especificada. 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 acima.

// 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 saber como configurar a reconexão automática, consulte este código de exemplo (pesquise "reconexão automática").

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

Após as etapas acima, 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()
});

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

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

Partilhar via