Использование текста для речи аватара с синтезом в режиме реального времени

Статья
01/13/2025

В этом руководстве вы узнаете, как использовать текст для речи аватар с синтезом в режиме реального времени. Искусственный аватар видео будет создан почти в режиме реального времени после того, как система получает текстовые входные данные.

Необходимые компоненты

Чтобы приступить к работе, убедитесь, что у вас есть следующие предварительные требования:

Подписка Azure. Создайте ее бесплатно.
Ресурс службы "Речь": создайте ресурс речи в портал Azure. Выберите ценовую категорию "Стандартный S0", если вы хотите создать ресурс речи для доступа к аватару.
Ключ ресурса речи и регион: после развертывания ресурса "Речь" выберите "Перейти к ресурсу " для просмотра ключей и управления ими.

Настройка среды

Для синтеза аватара в режиме реального времени необходимо установить пакет SDK службы "Речь" для JavaScript для использования с веб-страницей. Инструкции по установке см. в разделе "Установка пакета SDK службы "Речь".

Ниже приведена совместимость аватара в режиме реального времени на разных платформах и браузерах:

Платформа	Chrome	Microsoft Edge	Safari	Firefox	Opera
Windows	Y	Y	Н/П	Да¹	Y
Android	Y	Y	Н/П	Y¹²	N
iOS	Y	Y	Y	Y	Y
macOS	Y	Y	Y	Да¹	Y

¹ Он дозы не работают с ICE-сервером службой коммуникации, но работает с Coturn.

² Прозрачность фона не работает.

Выделение текста на язык речи и голос

Функция преобразования текста в речь в службе "Речь" поддерживает широкий портфель языков и голосов. Вы можете получить полный список или попробовать их в коллекции голосовых данных.

Чтобы сопоставить входной текст и использовать указанный голос, можно задать SpeechSynthesisLanguage или SpeechSynthesisVoiceName свойства в объекте SpeechConfig . В следующем фрагменте кода показано, как работает этот метод:

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

Все нейронные голосовые модели поддерживают несколько языков и свободно говорят на родном и английском языках. Например, если входной текст на английском языке : "Я рад попробовать текст для речи", и вы выбираете es-ES-ElviraNeural, текст говорится на английском языке с испанским акцентом.

Если голос не говорит на языке входного текста, служба "Речь" не создает синтезированный звук. Полный список поддерживаемых нейронных голосов см. в разделе "Язык" и "Поддержка голосовой связи" службы "Речь".

Голос по умолчанию — это первый голос, возвращенный на языковой стандарт из API списка голосов. Порядок приоритета для выступления выглядит следующим образом:

Если вы не задаете SpeechSynthesisVoiceName или SpeechSynthesisLanguageиспользуете голосовую связь по умолчанию.en-US
Если задано только значение, голос по умолчанию в указанном языковом стандарте SpeechSynthesisLanguageговорит.
Если заданы и SpeechSynthesisVoiceName, и SpeechSynthesisLanguage, параметр SpeechSynthesisLanguage игнорируется. Заданный голос с помощью SpeechSynthesisVoiceName речи.
Если элемент голоса задан с помощью языка разметки синтеза речи (SSML), SpeechSynthesisVoiceName параметры игнорируются SpeechSynthesisLanguage .

Выбор символа аватара и стиля

Поддерживаемые символы аватара и стили можно найти здесь.

В следующем фрагменте кода показано, как задать символ аватара и стиль:

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

Настройка подключения к аватару в режиме реального времени

Аватар в режиме реального времени использует протокол WebRTC для вывода видеопотока аватара. Необходимо настроить подключение к службе аватара через одноранговое подключение WebRTC.

Сначала необходимо создать объект подключения однорангового узла WebRTC. WebRTC — это протокол P2P, который использует сервер ICE для сетевого ретранслятора. Служба "Речь" предоставляет функцию ретранслятора сети и предоставляет REST API для выдачи сведений о сервере ICE. Поэтому рекомендуется получить сервер ICE из службы распознавания речи. Вы также можете использовать собственный сервер ICE.

Ниже приведен пример запроса на получение сведений ICE из конечной точки службы распознавания речи:

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

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

В следующем фрагменте кода показано, как создать одноранговое подключение WebRTC. URL-адрес сервера ICE, имя пользователя сервера ICE и учетные данные СЕРВЕРА ICE можно получить из полезных данных предыдущего HTTP-запроса.

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

Примечание.

URL-адрес СЕРВЕРА ICE имеет два типа: один с префиксом turn (например turn:relay.communication.microsoft.com:3478), а один с префиксом stun (например stun:relay.communication.microsoft.com:3478). В предыдущем примере сценария необходимо включить ТОЛЬКО URL-адрес с turn префиксомurls.

Во-вторых, необходимо настроить элементы видео и аудиопроигрыватель в ontrack функции обратного вызова однорангового подключения. Этот обратный вызов вызывается дважды во время подключения, один раз для видеодорожки и один раз для звуковой дорожки. Необходимо создать элементы видео и аудиопроигрыватель в функции обратного вызова.

В следующем фрагменте кода показано, как это сделать:

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

В-третьих, необходимо вызвать пакет SDK службы "Речь", чтобы создать синтезатор аватара и подключиться к службе аватара с одноранговым подключением в качестве параметра.

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

Наш API в режиме реального времени отключается через 5 минут бездействия аватара. Даже если аватар неактивный и работает нормально, API реального времени будет отключен после 20-минутного подключения. Чтобы обеспечить непрерывную работу аватара в режиме реального времени более 20 минут, можно включить автоматическое повторное подключение. Сведения о настройке автоматического повторного подключения см. в этом примере кода JavaScript (поиск "автоматическое повторное подключение").

Синтез видео аватара из текстового ввода

После предыдущих шагов вы увидите видео аватара, воспроизводимого в веб-браузере. Аватар активен, с миганием глаза и небольшим движением тела, но пока не говорить. Аватар ожидает ввода текста, чтобы начать говорить.

В следующем фрагменте кода показано, как отправить текст синтезатору аватара и позволить аватару говорить:

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

Закрытие подключения аватара в режиме реального времени

Чтобы избежать ненужных затрат после завершения использования аватара в режиме реального времени, важно закрыть подключение. Подключение можно закрыть несколькими способами.

При закрытии веб-страницы браузера объект подключения на стороне клиента WebRTC освобождается. После этого подключение аватара автоматически закрывается через несколько секунд.
Подключение автоматически закрывается, если аватар остается неактивным в течение 5 минут.
Вы можете заранее закрыть подключение аватара, выполнив следующий код:
```
avatarSynthesizer.close()
```

Изменение фона

В настоящее время API синтеза аватара не поддерживает настройку фонового изображения или видео и поддерживает только настройку фонового фона сплошным цветом без прозрачной поддержки фона. Однако существует альтернативный способ реализации фоновой настройки на стороне клиента, следуя приведенным ниже рекомендациям.

Задайте цвет фона зеленым (для простоты матирования), который поддерживает API синтеза аватара в режиме реального времени.
Создайте элемент холста с таким же размером, что и видео аватара.
Захват каждого кадра видео аватара и применение вычисления пикселя по пикселям, чтобы задать зеленый пиксель прозрачным, и нарисовать пересчитываемый кадр на холст.
Скрыть исходное видео.

С помощью этого подхода вы можете получить анимированный холст, который играет как видео, который имеет прозрачный фон. Ниже приведен пример кода JavaScript для демонстрации такого подхода.

После того как у вас есть прозрачный фоновый аватар, вы можете задать фон для любого изображения или видео, разместив изображение или видео за холстом.

Примеры кода

Примеры кода аватара для речи можно найти в репозитории пакета SDK службы "Речь" на сайте GitHub. В примерах показано, как использовать текст в режиме реального времени для аватаров речи в веб-приложениях.

В этих примерах показано, как использовать текст в режиме реального времени для аватаров речи в мобильных приложениях.

Поделиться через