Menambahkan Text-to-Speech ke React

Text-to-speech dengan cepat menjadi fitur wajib di web modern. Entah Anda membangun untuk aksesibilitas, engagement, atau sekadar memberi pengguna cara lain menikmati konten, menambahkan suara ke proyek React ternyata lebih mudah dari dugaan Anda. Panduan ini membahas cara kerja suara browser, untung-rugi tiap pendekatan, dan cara mengintegrasikan TTS2Go ke aplikasi React langkah demi langkah.

Setiap browser modern dilengkapi Web Speech API. Anda bisa memanggil window.speechSynthesis.speak() dengan SpeechSynthesisUtterance dan mendengar teks dibacakan tanpa layanan eksternal apa pun. Gratis, tidak butuh API key, dan berjalan sepenuhnya di sisi klien.

Masalahnya ada pada kualitas. Suara browser terdengar seperti robot, berbeda-beda di tiap sistem operasi dan browser, serta pilihannya terbatas. Teks yang sama bisa terdengar sangat berbeda di perangkat yang berbeda.

Text-to-speech berbasis AI telah mengubah segalanya. Model suara neural menghasilkan audio yang terdengar sangat manusiawi, dengan intonasi, tempo, dan emosi yang alami. Layanan ini mendukung puluhan bahasa dan ratusan suara.

Konsekuensinya, membuat audio seperti ini memerlukan biaya dan API, sehingga muncul pertanyaan penting: kapan dan bagaimana Anda membuatnya?

Salah satu pendekatan adalah membuat semua audio lebih dulu dan menyajikannya sebagai file statis. Kelebihannya, pemutaran instan karena audio sudah ada di CDN, dan kualitasnya selalu konsisten.

Kekurangannya adalah biaya. Anda membayar pembuatan audio untuk setiap konten, entah ada yang mendengarkan atau tidak. Anda juga harus sudah tahu semua konten sejak awal, sehingga teks dinamis tidak mungkin. Setiap perubahan konten memicu proses pembuatan ulang, dan biaya penyimpanan terus naik seiring bertambahnya pustaka konten.

Alternatifnya adalah membuat audio hanya saat pengguna memintanya. Cara ini lebih hemat karena Anda hanya membayar konten yang memang ingin didengar orang, dan bisa dipakai untuk konten dinamis.

Namun, Anda tetap perlu melindungi anggaran pembuatan audio. Akses tanpa batas ke API TTS berarti siapa pun bisa memicu pembuatan audio yang mahal. Anda butuh cara untuk mengatur siapa yang mendapat audio AI dan kapan.

TTS2Go memakai pendekatan cerdas yang menyeimbangkan kualitas, biaya, dan kesederhanaan.

Anda menambahkan SDK ke situs dengan API key frontend. API key ini dilindungi pemblokiran domain permintaan dan rate limiting, sehingga aman ditaruh di kode sisi klien. Fungsinya sebagai mekanisme identifikasi, bukan rahasia.

Saat orang pertama menekan tombol TTS pada sebuah konten, ia langsung mendengar sintesis suara browser. Bersamaan dengan itu, permintaan pembuatan dikirim ke TTS2Go di latar belakang.

Anda bisa masuk ke dashboard TTS2Go dan menyetujui permintaan itu secara manual, atau mengatur sistem persetujuan AI agar otomatis menyetujui permintaan yang memenuhi kriteria Anda. Dengan begitu, Anda memegang kendali penuh atas anggaran, karena hanya membayar audio yang benar-benar Anda inginkan.

Setelah permintaan disetujui dan audionya dibuat, setiap pengguna berikutnya yang menekan TTS pada konten yang sama akan mendengar audio AI berkualitas tinggi dengan suara pilihan Anda. Audio di-cache di CDN TTS2Go sehingga pemutarannya instan.

Artinya, pengunjung pertama tetap mendapat pengalaman yang berfungsi lewat TTS browser, biaya pembuatan audio terkendali lewat persetujuan, dan semua orang sesudahnya menikmati audio AI premium tanpa biaya tambahan.

Instal paket React TTS2Go di direktori proyek Anda:

npm install @tts2go/react

Paketnya ringan, di bawah 15 KB setelah gzip, tanpa peer dependency selain React.

Bungkus aplikasi Anda dengan TTS2GoProvider di akar pohon komponen. Masukkan API key dan ID proyek Anda sebagai konfigurasi.

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

Gunakan hook useTTS di komponen mana pun untuk mendapatkan kontrol putar, jeda, dan berhenti. Anda juga bisa langsung memasang TTSButton siap pakai untuk ikon speaker yang praktis.

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

Pengguna pertama yang menekan putar akan mendengar TTS browser, sementara permintaan pembuatan dikirim ke dashboard TTS2Go Anda. Setelah disetujui, semua pengguna berikutnya mendengar audio AI.

Jelajahi pemilihan suara, dukungan SSML untuk menyempurnakan pelafalan, dan highlight API yang menyinkronkan teks di layar dengan kata yang diucapkan.

Lihat dokumentasi React lengkap di tts2go.com/docs/react untuk pola dan contoh lanjutan.