JavaScript'e Metinden Sese Özelliği Ekleme

Web sitenize metinden sese (TTS) özelliği eklemek için bir framework'e ihtiyacınız yok. İster düz HTML ve JavaScript, ister bir statik site oluşturucu, ister sunucu tarafında oluşturulan bir sayfa ile çalışın; içeriğinize ses kazandırmak oldukça kolaydır.

Bu rehberde tarayıcıda konuşma sentezinin nasıl çalıştığını, farklı yaklaşımların artı ve eksilerini ve TTS2Go'yu herhangi bir JavaScript projesine nasıl entegre edeceğinizi anlatıyoruz.

Modern tarayıcılar Web Speech API'yi yerleşik olarak sunar. Birkaç satır saf JavaScript ile şunu yapabilirsiniz:

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

npm paketi, API anahtarı ya da sunucu gerekmez. Ücretsizdir ve çevrimdışı çalışır.

Dezavantajı ise kalite ve tutarlılıktır:

• Sesler çoğu zaman robotik gelir.
• Ses kalitesi ve ses seçenekleri platformdan platforma değişir.
• Windows'taki Chrome, macOS'taki Safari'den farklı ses çıkarır.
• Tüm kullanıcılar için tutarlı bir dinleme deneyimini garanti edemezsiniz.

Yapay zekâ destekli metinden sese, web'de sesle yapılabilecekleri kökten değiştirdi. Nöral ses modelleri; doğal duraklamalar, vurgular ve ritimle gerçekten insan gibi duyulan sesler üretiyor.

Seçeneklerden biri, tüm içeriğiniz için sesi önceden üretip dosyaları bir CDN üzerinde barındırmaktır.

Artıları

• Kullanıcılar için anında oynatma
• Her yerde aynı kalite ve aynı ses

Eksileri

• Oynatılsın ya da oynatılmasın, her içerik için ses üretiminin bedelini baştan ödersiniz
• İçeriğin önceden belli olması gerekir
• Güncellemeler dosyaların yeniden üretilmesini gerektirir
• Depolama maliyetleri içerik kütüphanenizle birlikte büyür

Önceden üretim, küçük ve sabit kataloglar için iyi çalışır; ancak ölçek büyüdükçe pahalı ve esnekliği düşük bir hâl alır.

Daha verimli bir yaklaşım, sesi yalnızca biri gerçekten oynat düğmesine tıkladığında üretmektir.

Avantajları

• Yalnızca kullanıcıların talep ettiği ses için ödeme yaparsınız
• Dinamik ve kullanıcılar tarafından oluşturulan içerikler doğal olarak desteklenir

Zorluk

Herhangi bir kontrol mekanizması olmadan, sitenizi ziyaret eden herkes maliyetli üretimleri tetikleyebilir. Neyin ne zaman üretileceğine karar vermenin bir yoluna ihtiyacınız var; böylece her yerde TTS sunarken bütçenizi de kontrol altında tutabilirsiniz.

TTS2Go; kalite, maliyet ve sadelik arasında denge kuran hibrit bir yaklaşım benimser.

1. Güvenli istemci tarafı 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 gizli bilgi değil; kimlik belirleme ve hız sınırlama mekanizmasıdır.

1. İlk ziyaretçi: anında 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
• Belirlediğiniz kriterleri 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: CDN'den premium 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.

Pratikte: İlk ziyaretçi tarayıcı TTS'ini duyar, maliyetler onay süreciyle kontrol edilir ve sonrasında gelen herkes premium yapay zekâ sesi dinler.

TTS2Go'nun saf JavaScript paketini npm ile kurun:

npm install @tts2go/vanilla

Bir bundler kullanmıyorsanız, paketi bir CDN'den <script> etiketiyle yükleyip window.TTS2Go üzerinden erişebilirsiniz.

Proje bilgilerinizle yeni bir TTS2Go örneği başlatın:

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

Tam oynatma kontrollerine sahip bir TTS örneği almak için metniniz ve bir ses kimliğiyle tts.create() çağırın:

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

Buradan itibaren TTS2Go JavaScript API'sinin tamamını keşfedebilirsiniz. Örneğin:

• tts.getVoices() – projeniz için kullanılabilir sesleri listeler