Cara melakukan sintesis real-time untuk avatar teks ke ucapan (pratinjau)

Artikel
05/10/2024

Catatan

Avatar teks ke ucapan saat ini dalam pratinjau publik. Pratinjau ini disediakan tanpa perjanjian tingkat layanan, dan tidak disarankan untuk beban kerja produksi. Fitur tertentu mungkin tidak didukung atau mungkin memiliki kemampuan terbatas. Untuk mengetahui informasi selengkapnya, lihat Ketentuan Penggunaan Tambahan untuk Pratinjau Microsoft Azure.

Dalam panduan cara ini, Anda mempelajari cara menggunakan avatar teks ke ucapan (pratinjau) dengan sintesis real-time. Video avatar sintetis akan dihasilkan dalam waktu hampir real time setelah sistem menerima input teks.

Prasyarat

Untuk memulai, pastikan Anda memiliki prasyarat berikut:

Langganan Azure:Buat langganan secara gratis.
Sumber daya ucapan:Buat sumber daya ucapan di portal Azure. Pilih tingkat harga "Standard S0" jika Anda ingin membuat sumber daya ucapan untuk mengakses avatar.
Kunci dan wilayah sumber daya ucapan Anda: Setelah sumber daya Ucapan Anda disebarkan, pilih Buka sumber daya untuk melihat dan mengelola kunci. Untuk informasi selengkapnya tentang sumber daya layanan Azure AI, lihat Mendapatkan kunci untuk sumber daya Anda.

Menyiapkan lingkungan

Untuk sintesis avatar real time, Anda perlu menginstal Speech SDK untuk JavaScript untuk digunakan dengan halaman web. Untuk petunjuk penginstalan, lihat Menginstal Speech SDK.

Berikut adalah kompatibilitas avatar real-time pada platform dan browser yang berbeda:

Platform	Chrome	Microsoft Edge	Safari	Firefox	Opera
Windows	Y	Y	T/A	Y¹	Y
Android	Y	Y	T/A	Y¹²	N
iOS	Y	Y	Y	Y	Y
macOS	Y	Y	Y	Y¹	Y

¹ Ini dosen tidak berfungsi dengan server ICE oleh Communication Service tetapi bekerja dengan Coturn.

² Transparansi latar belakang tidak berfungsi.

Pilih teks ke bahasa dan suara ucapan

Fitur teks ke ucapan dalam layanan Ucapan mendukung portofolio bahasa dan suara yang luas. Anda bisa mendapatkan daftar lengkap atau mencobanya di Galeri Suara.

Tentukan bahasa atau suara SpeechConfig untuk mencocokkan teks input Anda dan gunakan suara yang ditentukan. Cuplikan kode berikut menunjukkan cara kerja teknik ini:

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

Semua suara saraf multibahasa dan fasih dalam bahasa dan bahasa Inggris mereka sendiri. Misalnya, jika teks input dalam bahasa Inggris adalah "Saya senang mencoba teks ke ucapan," dan Anda memilih es-ES-ElviraNeural, teks diucapkan dalam bahasa Inggris dengan aksen Spanyol.

Jika suara tidak berbicara bahasa teks input, layanan Ucapan tidak membuat audio yang disintesis. Untuk daftar lengkap suara saraf yang didukung, lihat Dukungan bahasa dan suara untuk layanan Ucapan.

Suara default adalah suara pertama yang dikembalikan per lokal dari API daftar suara. Urutan prioritas untuk berbicara adalah sebagai berikut:

Jika Anda tidak mengatur SpeechSynthesisVoiceName atau SpeechSynthesisLanguage, suara default dalam en-US berbicara.
Jika Anda hanya mengatur SpeechSynthesisLanguage, suara default dalam lokal yang ditentukan akan berbicara.
Jika keduanya SpeechSynthesisVoiceName dan SpeechSynthesisLanguage diatur, SpeechSynthesisLanguage pengaturan diabaikan. Suara yang Anda tentukan dengan menggunakan SpeechSynthesisVoiceName ucapan.
Jika elemen suara diatur dengan menggunakan Speech Synthesis Markup Language (SSML), SpeechSynthesisVoiceName pengaturan dan SpeechSynthesisLanguage diabaikan.

Pilih karakter dan gaya avatar

Karakter dan gaya avatar yang didukung dapat ditemukan di sini.

Cuplikan kode berikut menunjukkan cara mengatur karakter dan gaya avatar:

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

Menyiapkan koneksi ke avatar real-time

Avatar real time menggunakan protokol WebRTC untuk menghasilkan aliran video avatar. Anda perlu menyiapkan koneksi dengan layanan avatar melalui koneksi serekan WebRTC.

Pertama, Anda perlu membuat objek koneksi serekan WebRTC. WebRTC adalah protokol P2P, yang bergantung pada server ICE untuk relai jaringan. Layanan ucapan menyediakan fungsi relai jaringan dan mengekspos REST API untuk mengeluarkan informasi server ICE. Oleh karena itu, kami sarankan Anda mengambil server ICE dari layanan ucapan. Anda juga dapat memilih untuk menggunakan server ICE Anda sendiri.

Berikut adalah contoh permintaan untuk mengambil informasi ICE dari titik akhir layanan ucapan:

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

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

Cuplikan kode berikut menunjukkan cara membuat koneksi serekan WebRTC. URL server ICE, nama pengguna server ICE, dan kredensial server ICE semuanya dapat diambil dari payload permintaan HTTP di atas.

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

Catatan

URL server ICE memiliki dua jenis: satu dengan awalan turn (seperti turn:relay.communication.microsoft.com:3478), dan satu dengan awalan stun (seperti stun:relay.communication.microsoft.com:3478). Dalam skenario contoh sebelumnya, untuk urls Anda hanya perlu menyertakan URL dengan awalan turn .

Kedua, Anda perlu menyiapkan elemen pemutar video dan audio dalam ontrack fungsi panggilan balik koneksi serekan. Panggilan balik ini dipanggil dua kali selama koneksi, sekali untuk trek video dan sekali untuk trek audio. Anda perlu membuat elemen pemutar video dan audio dalam fungsi panggilan balik.

Cuplikan kode berikut menunjukkan cara melakukannya:

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

Ketiga, Anda perlu memanggil Speech SDK untuk membuat synthesizer avatar dan terhubung ke layanan avatar, dengan koneksi serekan sebagai parameter.

// 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 real time kami terputus setelah 5 menit dari status menganggur avatar. Bahkan jika avatar tidak menganggur dan berfungsi secara normal, API real-time akan terputus setelah koneksi 10 menit. Untuk memastikan pengoperasian berkelanjutan avatar real-time selama lebih dari 10 menit, Anda dapat mengaktifkan koneksi ulang otomatis. Untuk cara menyiapkan koneksi ulang otomatis, lihat kode sampel ini (cari "sambungkan ulang otomatis").

Mensintesis video avatar berbicara dari input teks

Setelah langkah-langkah di atas, Anda akan melihat video avatar diputar di browser web. Avatar aktif, dengan kedipan mata dan sedikit gerakan tubuh, tetapi belum berbicara. Avatar sedang menunggu input teks untuk mulai berbicara.

Cuplikan kode berikut menunjukkan cara mengirim teks ke synthesizer avatar dan membiarkan avatar berbicara:

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

Anda dapat menemukan sampel kerja end-to-end di GitHub.

Edit latar belakang

API sintesis real-time avatar saat ini tidak mendukung pengaturan gambar/video latar belakang dan hanya mendukung pengaturan latar belakang warna solid, tanpa dukungan latar belakang transparan. Namun, ada cara alternatif untuk menerapkan kustomisasi latar belakang di sisi klien, mengikuti panduan berikut:

Atur warna latar belakang ke hijau (untuk kemudahan matting), yang didukung API sintesis real time avatar.
Buat elemen kanvas dengan ukuran yang sama dengan video avatar.
Ambil setiap bingkai video avatar dan terapkan perhitungan piksel demi piksel untuk mengatur piksel hijau menjadi transparan, dan gambar bingkai yang dihitung ulang ke kanvas.
Sembunyikan video asli.

Dengan pendekatan ini, Anda bisa mendapatkan kanvas animasi yang diputar seperti video, yang memiliki latar belakang transparan. Berikut adalah kode sampel untuk menunjukkan pendekatan seperti itu.

Setelah Anda memiliki avatar latar belakang transparan, Anda dapat mengatur latar belakang ke gambar atau video apa pun dengan menempatkan gambar atau video di belakang kanvas.

Bagikan melalui