Metin okuma avatarı için gerçek zamanlı sentez yapma (önizleme)

Makale
05/10/2024

Not

Metin okuma avatarı şu anda genel önizleme aşamasındadır. Bu önizleme, hizmet düzeyi sözleşmesi olmadan sağlanır ve üretim iş yükleri için önerilmez. Bazı özellikler desteklenmiyor olabileceği gibi özellikleri sınırlandırılmış da olabilir. Daha fazla bilgi için bkz. Microsoft Azure Önizlemeleri Ek Kullanım Koşulları.

Bu nasıl yapılır kılavuzunda, gerçek zamanlı sentez ile metin okuma avatarı (önizleme) kullanmayı öğreneceksiniz. Yapay avatar videosu, sistem metin girişini aldıktan sonra neredeyse gerçek zamanlı olarak oluşturulur.

Önkoşullar

Başlamak için aşağıdaki önkoşullara sahip olduğunuzdan emin olun:

Azure aboneliği: Ücretsiz bir abonelik oluşturun.
Konuşma kaynağı: Azure portalında konuşma kaynağı oluşturun. Avatara erişmek için konuşma kaynağı oluşturmak istiyorsanız "Standart S0" fiyatlandırma katmanını seçin.
Konuşma kaynak anahtarınız ve bölgeniz: Konuşma kaynağınız dağıtıldıktan sonra anahtarları görüntülemek ve yönetmek için Kaynağa git'i seçin. Azure AI hizmetleri kaynakları hakkında daha fazla bilgi için bkz . Kaynağınızın anahtarlarını alma.

Ortamı ayarlama

Gerçek zamanlı avatar sentezi için JavaScript için Konuşma SDK'sını bir web sayfasıyla birlikte yüklemeniz gerekir. Yükleme yönergeleri için bkz . Konuşma SDK'sını yükleme.

Gerçek zamanlı avatarın farklı platformlarda ve tarayıcılarda uyumluluğu aşağıdadır:

Platform	Chrome	Microsoft Edge	Safari	Firefox	Opera
Windows	Y	Y	Yok	Y¹	Y
Android	Y	Y	Yok	Y¹²	N
iOS	Y	Y	Y	Y	Y
macOS	Y	Y	Y	Y¹	Y

¹ İletişim Hizmeti tarafından ICE sunucusuyla çalışmaz ancak Coturn ile çalışır.

² Arka plan saydamlığı çalışmıyor.

Metinden konuşma diline ve sese seçme

Konuşma tanıma hizmetindeki metin okuma özelliği, geniş bir dil ve ses portföyünü destekler. Listenin tamamını alabilir veya Ses Galerisi'nde deneyebilirsiniz.

Giriş metninizle eşleşecek dili veya sesini SpeechConfig belirtin ve belirtilen sesi kullanın. Aşağıdaki kod parçacığı bu tekniğin nasıl çalıştığını gösterir:

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

Tüm sinir sesleri çok dillidir ve kendi dillerinde ve İngilizcede akıcıdır. Örneğin, İngilizce giriş metni "Konuşmayı denemek için sabırsızlanıyorum" ise ve es-ES-ElviraNeural'ı seçerseniz, metin İspanyolca vurgulu İngilizce olarak konuşulur.

Ses, giriş metninin dilini konuşmazsa Konuşma hizmeti sentezlenmiş ses oluşturmaz. Desteklenen sinir seslerinin tam listesi için bkz . Konuşma hizmeti için dil ve ses desteği.

Varsayılan ses, ses listesi API'sinden yerel ayar başına döndürülen ilk sestir. Konuşma önceliği sırası aşağıdaki gibidir:

veya SpeechSynthesisLanguageseçeneğini ayarlamazsanız SpeechSynthesisVoiceName içindeki en-US varsayılan ses konuşarak ifade eder.
Yalnızca ayarını yaparsanız SpeechSynthesisLanguage, belirtilen yerel ayardaki varsayılan ses konuşur.
Hem hem de SpeechSynthesisVoiceName SpeechSynthesisLanguage ayarlandıysa, SpeechSynthesisLanguage ayar yoksayılır. Konuşmaları kullanarak SpeechSynthesisVoiceName belirttiğiniz ses.
Ses öğesi Konuşma Sentezi biçimlendirme dili (SSML) SpeechSynthesisVoiceName kullanılarak ayarlanırsa ve SpeechSynthesisLanguage ayarları yoksayılır.

Avatar karakterini ve stilini seçme

Desteklenen avatar karakterleri ve stilleri burada bulunabilir.

Aşağıdaki kod parçacığında avatar karakterinin ve stilinin nasıl ayarlanacağı gösterilmektedir:

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

Gerçek zamanlı avatara bağlantıyı ayarlama

Gerçek zamanlı avatar, avatar video akışının çıkışını yapmak için WebRTC protokollerini kullanır. WebRTC eş bağlantısı aracılığıyla avatar hizmetiyle bağlantıyı ayarlamanız gerekir.

İlk olarak, bir WebRTC eş bağlantı nesnesi oluşturmanız gerekir. WebRTC, ağ geçişi için ICE sunucusuna dayalı bir P2P protokolüdür. Konuşma hizmeti ağ geçişi işlevi sağlar ve ICE sunucusu bilgilerini vermek için bir REST API'sini kullanıma sunar. Bu nedenle, ICE sunucusunu konuşma hizmetinden getirmenizi öneririz. Kendi ICE sunucunuzu kullanmayı da seçebilirsiniz.

Konuşma hizmeti uç noktasından ICE bilgilerini getirmek için örnek bir istek aşağıda verilmiştir:

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

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

Aşağıdaki kod parçacığı, WebRTC eş bağlantısının nasıl oluşturulacağını gösterir. ICE sunucusu URL'si, ICE sunucusu kullanıcı adı ve ICE sunucusu kimlik bilgilerinin tümü yukarıdaki HTTP isteğinin yükünden getirilebilir.

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

Not

ICE sunucusu URL'si iki türe sahiptir: biri ön eki turn (gibi turn:relay.communication.microsoft.com:3478) ve biri ön eki stun (gibi stun:relay.communication.microsoft.com:3478) ile. Önceki örnek senaryoda, yalnızca urls ön ekine sahip turn bir URL eklemeniz gerekir.

İkinci olarak, eş bağlantının geri çağırma işlevinde ontrack video ve ses oynatıcı öğelerini ayarlamanız gerekir. Bu geri arama, bağlantı sırasında bir kez video parçası ve bir kez ses parçası için iki kez çağrılır. Geri çağırma işlevinde hem video hem de ses oynatıcı öğeleri oluşturmanız gerekir.

Aşağıdaki kod parçacığı bunun nasıl yapılacağını gösterir:

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

Üçüncü olarak, bir avatar sentezleyici oluşturmak ve eş bağlantısını parametre olarak kullanarak avatar hizmetine bağlanmak için Konuşma SDK'sını çağırmanız gerekir.

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

Gerçek zamanlı API'mizin bağlantısı avatarın boşta durumundan 5 dakika sonra kesiliyor. Avatar boşta olmasa ve normal şekilde çalışsa bile, gerçek zamanlı API'nin bağlantısı 10 dakikalık bir bağlantıdan sonra kesilir. Gerçek zamanlı avatarın 10 dakikadan uzun süre sürekli çalışmasını sağlamak için otomatik yeniden bağlanmayı etkinleştirebilirsiniz. Otomatik yeniden bağlanmayı ayarlama hakkında bilgi için bu örnek koda ("otomatik yeniden bağlanma" araması yapın) bakın.

Metin girişinden konuşan avatar videosunu sentezle

Yukarıdaki adımlarda avatar videosunu web tarayıcısında oynatıldığını görmeniz gerekir. Avatar aktif, göz yanıp sönme ve hafif vücut hareketi ile, ama henüz konuşmuyor. Avatar, metin girişinin konuşmaya başlamasını bekliyor.

Aşağıdaki kod parçacığında avatar sentezleyicisine metin gönderme ve avatarın konuşmasına izin verme gösterilmektedir:

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

GitHub'da uçtan uca çalışma örnekleri bulabilirsiniz.

Arka planı düzenle

Avatar gerçek zamanlı sentez API'si şu anda arka plan görüntüsü/video ayarlamayı desteklememektedir ve saydam arka plan desteği olmadan yalnızca düz renkli arka plan ayarlamayı destekler. Ancak, aşağıdaki yönergeleri izleyerek istemci tarafında arka plan özelleştirmesi uygulamanın alternatif bir yolu vardır:

Avatar gerçek zamanlı sentez API'sinin desteklediği arka plan rengini yeşil (matlama kolaylığı için) olarak ayarlayın.
Avatar videosuyla aynı boyutta bir tuval öğesi oluşturun.
Avatar videosunun her karesini yakalayın ve yeşil pikseli saydam olarak ayarlamak için piksel piksel hesaplaması uygulayın ve yeniden hesaplanmış çerçeveyi tuvale çizin.
Özgün videoyu gizleyin.

Bu yaklaşımla, saydam arka planı olan bir video gibi oynatılan animasyonlu bir tuval elde edebilirsiniz. İşte böyle bir yaklaşımı göstermek için örnek kod .

Saydam arka plan avatarını aldıktan sonra, resmi veya videoyu tuvalin arkasına yerleştirerek arka planı herhangi bir görüntüye veya videoya ayarlayabilirsiniz.

Aracılığıyla paylaş