Vue'ya Metinden Sese Özelliği Ekleme

Vue uygulamanıza ses kazandırmak; erişilebilirlik, etkileşim ve kullanıcı deneyimi açısından yeni olanaklar sunar. İster bir içerik sitesi, ister bir e-öğrenme platformu, ister uyarıları sesli okuyan bir panel geliştirin; metinden sese (TTS), kullanıcıların içeriğinizi elleri serbest şekilde tüketmesini sağlar.

Bu rehberde tarayıcıda konuşma sentezinin nasıl çalıştığını, farklı yaklaşımların artı ve eksilerini ve TTS2Go'yu Vue projenize nasıl bağlayacağınızı anlatıyoruz.

Her modern tarayıcı Web Speech API'yi içerir. window.speechSynthesis.speak() ve bir SpeechSynthesisUtterance kullanan birkaç satır JavaScript ile, herhangi bir harici servis veya API anahtarı olmadan metni sesli okutabilirsiniz.

Temel özellikler:

• Tamamen istemci tarafında çalışır – backend veya API çağrısı gerekmez.
• Tamamen ücretsizdir – kullanıma dayalı faturalandırma yoktur.
• Anında entegre edilir – çok az JavaScript yeterlidir.

Asıl dezavantajı kalitedir. Tarayıcı sesleri çoğu zaman mekanik duyulur, işletim sistemleri ve tarayıcılar arasında ciddi farklılık gösterir ve sınırlı ses seçeneği sunar. Aynı metin Chrome'da ve Safari'de ya da Windows'ta ve macOS'ta bambaşka duyulabilir.

Yapay zekâ destekli metinden sese modelleri; doğal ritim, vurgu ve tonlamayla, gerçek bir insan konuşmacıdan neredeyse ayırt edilemeyen sesler üretir. Bu servisler genellikle şunları sunar:

• Onlarca dil
• Yüzlerce benzersiz ses
• Stil, konuşma hızı ve duygu üzerinde daha fazla kontrol

Bunun bedeli ise bu sesi üretmenin para tutması ve bir API çağrısı gerektirmesidir. Bu da kilit bir soruyu gündeme getirir: Sesin ne zaman üretileceğini ve bedelini kimin ödeyeceğini nasıl kontrol edeceksiniz?

Yaklaşımlardan biri, tüm sesinizi önceden üretip bir CDN üzerinden statik dosyalar olarak sunmaktır.

Artıları:

• Oynatma anında başlar.
• Ses kalitesi her dinleyici için tutarlıdır.

Eksileri:

• Dinleyen olsun ya da olmasın, her bir içerik için ses üretiminin bedelini ödersiniz.
• Tüm içeriğinizi önceden bilmeniz gerekir.
• Her içerik güncellemesi, üretim sürecinizi yeniden çalıştırmak anlamına gelir.
• Depolama maliyetleri kataloğunuzla doğru orantılı olarak artar.

Bu yöntem küçük ve sabit içerik kütüphaneleri için işe yarayabilir; ancak ölçek büyüdükçe pahalı ve esnekliği düşük bir hâl alır.

Daha verimli bir strateji, sesi yalnızca bir kullanıcı talep ettiğinde üretmektir.

TTS2Go, hibrit bir modelle kalite, maliyet ve sadelik arasında denge kurar.

1. Güvenli frontend anahtarı

SDK'yı bir frontend API anahtarıyla sitenize eklersiniz. Anahtar, istek domain engelleme ve hız sınırlama (rate limiting) kullandığı için istemci tarafı kodunuzda güvenle yer alabilir. Bu anahtar bir kimlik belirleme ve hız sınırlama mekanizmasıdır, gizli bir bilgi değildir.

1. İlk ziyaretçi: tarayıcı TTS'i + arka planda üretim

Bir içerikte TTS düğmesine ilk tıklayan kişi:

• Tarayıcının konuşma sentezini hemen duyar.
• Aynı anda arka planda TTS2Go'ya bir üretim isteği gönderilir.

1. Onay ve bütçe kontrolü

TTS2Go panelinizde şunları yapabilirsiniz:

• Üretim isteklerini manuel olarak onaylamak veya reddetmek ya da
• Kriterlerinizi karşılayan istekleri otomatik onaylaması için yapay zekâ onay sistemini yapılandırmak.

Böylece üretim bütçeniz üzerinde tam kontrol sahibi olursunuz.

1. Sonraki ziyaretçiler: anında yapay zekâ sesi

Bir istek onaylanıp üretildikten sonra, aynı içerikte TTS'e tıklayan sonraki her kullanıcı, seçtiğiniz seste yüksek kaliteli yapay zekâ sesini TTS2Go'nun CDN'inden anında alır.

Sonuç:

• İlk ziyaretçiniz tarayıcı TTS'iyle işlevsel bir deneyim yaşar.
• Maliyetleriniz onay ve hız sınırlamasıyla kontrol altında kalır.
• Sonrasında gelen herkes, ek gecikme olmadan premium yapay zekâ sesi dinler.

TTS2Go Vue paketini projenize ekleyin:

npm install @tts2go/vue

Paket hafiftir ve Vue 3 ile Composition API üzerinde kutudan çıktığı gibi çalışır.

Vue uygulamanızı oluştururken TTS2GoPlugin'i kurun. Bu sayede TTS2Go istemcisi, Vue'nun dependency injection mekanizması aracılığıyla her bileşene sağlanır.

import { createApp } from "vue";

import { TTS2GoPlugin } from "@tts2go/vue";

import App from "./App.vue";

const app = createApp(App);

app.use(TTS2GoPlugin, {

apiKey: "your-api-key",

projectId: "your-project-id",

});

Reaktif oynatma kontrollerini almak için herhangi bir bileşende useTTS composable'ını kullanın. Hazır bir arayüz için önceden oluşturulmuş TTSButton bileşenini de kullanabilirsiniz.

import { TTSButton, useTTS } from "@tts2go/vue";

const VOICE_ID = "your-voice-id";

const text = "Hello from TTS2Go in Vue!";

const { status, play, stop, pause } = useTTS(text, VOICE_ID);

{{ text }}

{{ status.value === "playing" ? "Stop" : "Play" }}

Davranış:

• İlk tıklama tarayıcı TTS'ini başlatır ve arka planda TTS2Go'ya bir üretim isteği gönderir.
• İstek panelinizde onaylanıp üretildikten sonra, aynı içerikte TTS'e tıklayan gelecekteki tüm kullanıcılar tarayıcı sesi yerine yüksek kaliteli yapay zekâ sesi dinler.

Buradan sonra Vue için TTS2Go'nun daha gelişmiş özelliklerini keşfedebilirsiniz:

• Ses seçimi – birden fazla ses ve dil arasından seçim yapın.
• SSML desteği – telaffuz, vurgu, duraklamalar ve konuşma hızında ince ayar yapın.
• Highlight API – daha iyi erişilebilirlik ve anlama için ekrandaki metni konuşulan kelimelerle senkronize edin.

Vue dokümantasyonunun tamamı ve ileri düzey örnekler için:

• tts2go.com/docs/vue