React'e Metinden Sese Özelliği Ekleme

Metinden sese, modern web'de hızla vazgeçilmez bir özellik hâline geliyor. İster erişilebilirlik, ister etkileşim için geliştirin, isterseniz kullanıcılara içeriği tüketmenin bir yolunu daha sunmak isteyin; React projenize ses eklemek düşündüğünüzden çok daha kolay. Bu rehberde tarayıcıda konuşma sentezinin nasıl çalıştığını, farklı yaklaşımların artı ve eksilerini ve TTS2Go'yu React uygulamanıza adım adım nasıl entegre edeceğinizi anlatıyoruz.

Her modern tarayıcı Web Speech API ile birlikte gelir. window.speechSynthesis.speak() fonksiyonunu bir SpeechSynthesisUtterance ile çağırarak, hiçbir harici servise ihtiyaç duymadan metni sesli dinleyebilirsiniz. Ücretsizdir, API anahtarı gerektirmez ve tamamen istemci tarafında çalışır.

İşin püf noktası kalitedir. Tarayıcı sesleri robotik gelir, işletim sistemine ve tarayıcıya göre değişir ve sınırlı ses seçeneği sunar. Aynı metin farklı cihazlarda bambaşka duyulabilir.

Yapay zekâ destekli metinden sese, oyunun kurallarını değiştirdi. Nöral ses modelleri; doğal tonlama, konuşma hızı ve duyguyla, şaşırtıcı derecede insan gibi duyulan sesler üretiyor. Bu servisler onlarca dili ve yüzlerce sesi destekliyor.

Bunun bedeli ise şu: Bu sesi üretmek para tutar ve bir API gerektirir. Bu da önemli bir soruyu gündeme getirir: Sesi ne zaman ve nasıl üreteceksiniz?

Yaklaşımlardan biri, tüm sesinizi önceden üretip statik dosyalar olarak sunmaktır. Avantajı, ses zaten bir CDN'de olduğu için anında oynatma ve her seferinde tutarlı kalitedir.

Dezavantajı ise maliyettir. Dinleyen olsun ya da olmasın, her içerik için ses üretiminin bedelini ödersiniz. Tüm içeriğinizi önceden bilmeniz gerekir; bu da dinamik metni devre dışı bırakır. Her içerik değişikliği yeni bir üretim sürecini tetikler ve depolama maliyetleri kütüphanenizle birlikte büyür.

Alternatif, sesi yalnızca bir kullanıcı talep ettiğinde üretmektir. Bu yöntem daha ucuzdur, çünkü yalnızca insanların gerçekten dinlemek istediği içerik için ödeme yaparsınız; ayrıca dinamik içerikle de çalışır.

Yine de üretim bütçenizi korumanız gerekir. Bir TTS API'sine sınırsız erişim, herkesin maliyetli üretimleri tetikleyebilmesi demektir. Kimin ne zaman yapay zekâ sesi alacağını kontrol etmenin bir yoluna ihtiyacınız var.

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

SDK'yı bir frontend API anahtarıyla sitenize eklersiniz. API 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, bir kimlik belirleme mekanizmasıdır.

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.

TTS2Go panelinize giriş yapıp bu isteği manuel olarak onaylayabilir ya da yapay zekâ onay sistemini, kriterlerinizi karşılayan istekleri otomatik onaylayacak şekilde yapılandırabilirsiniz. Yalnızca gerçekten istediğiniz ses için ödeme yaptığınızdan, üretim bütçeniz üzerinde tam kontrol sahibi olursunuz.

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â sesi dinler. Ses, TTS2Go'nun CDN'inde önbelleğe alındığı için oynatma anında başlar.

Yani ilk ziyaretçiniz tarayıcı TTS'iyle işlevsel bir deneyim yaşar, üretim maliyetleriniz onay süreciyle kontrol altında kalır ve sonrasında gelen herkes ek maliyet olmadan premium yapay zekâ sesi dinler.

TTS2Go React paketini proje dizininize kurun:

npm install @tts2go/react

Paket, gzip ile sıkıştırıldığında 15 KB'ın altında kalacak kadar hafiftir ve React dışında hiçbir peer dependency gerektirmez.

Uygulamanızı, bileşen ağacınızın kökünde TTS2GoProvider ile sarmalayın. API anahtarınızı ve proje kimliğinizi yapılandırma olarak iletin.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

Oynatma, duraklatma ve durdurma kontrollerini almak için herhangi bir bileşende useTTS hook'unu kullanın. Hızlıca bir hoparlör simgesi eklemek için hazır TTSButton bileşenini de kullanabilirsiniz.

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

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

Oynat düğmesine ilk tıklayan kullanıcı tarayıcı TTS'ini duyarken TTS2Go panelinize bir üretim isteği gönderilir. İstek onaylandıktan sonra gelecekteki tüm kullanıcılar yapay zekâ sesi dinler.

Ses seçimini, telaffuzda ince ayar için SSML desteğini ve ekrandaki metni konuşulan kelimelerle senkronize eden highlight API'sini keşfedin.

İleri düzey kalıplar ve örnekler için tts2go.com/docs/react adresindeki React dokümantasyonunun tamamına göz atın.