Menambahkan Text-to-Speech ke Svelte

Svelte dibangun dengan mengutamakan kesederhanaan dan performa, dan menambahkan text-to-speech (TTS) ke aplikasi Svelte bisa sama mudahnya.

Entah Anda ingin membuat konten lebih aksesibel, membangun pengalaman membaca lewat audio, atau menambahkan umpan balik suara, TTS bisa diintegrasikan dalam hitungan menit. Panduan ini menjelaskan cara kerja suara browser, untung-rugi berbagai pendekatan TTS, dan cara menjalankan TTS2Go di proyek Svelte Anda.

Browser modern menyertakan Web Speech API, yang memungkinkan Anda memanggil window.speechSynthesis.speak() dengan SpeechSynthesisUtterance untuk membacakan teks.

Karakteristik utamanya:

• Tanpa dependensi: Semuanya berjalan di browser.
• Tanpa API key atau panggilan server: Tidak perlu integrasi backend.
• Tanpa biaya: Memakai suara sistem bawaan.

Namun, ada kekurangannya:

• Kualitas kaku dan tidak konsisten: Suara sering terdengar sintetis.
• Bergantung pada platform: Suara berbeda antara Chrome dan Firefox, macOS dan Windows.
• Pilihan suara terbatas: Lebih sedikit bahasa dan gaya dibanding TTS AI modern.

Model text-to-speech neural menghasilkan audio yang terdengar alami dengan intonasi dan tempo yang realistis. Model ini mendukung banyak bahasa, aksen, dan gaya suara, sehingga ideal untuk narasi dan pengalaman suara berkualitas produksi.

Untung-ruginya:

• Kelebihan:
• Audio alami berkualitas tinggi
• Cakupan bahasa dan suara yang luas
• Suara konsisten di semua perangkat dan browser
• Kekurangan:
• Biaya: Anda membayar per karakter atau per detik audio yang dibuat.
• Panggilan API: Membutuhkan integrasi di sisi server atau di sisi klien yang terautentikasi.

Ini memunculkan pertanyaan desain: bagaimana menyeimbangkan kualitas audio dengan biaya pembuatan, sekaligus mengatur kapan audio dibuat?

Salah satu pendekatan adalah membuat audio untuk semua konten lebih dulu dan meng-host-nya di CDN.

Cara kerjanya:

• Ubah semua konten teks menjadi file audio sejak awal.
• Unggah dan sajikan file tersebut dari CDN.
• Pengguna mendapat pemutaran instan tanpa jeda pembuatan.

Kelebihan:

• Pemutaran instan untuk setiap pengunjung
• Audio berkualitas tinggi yang konsisten
• Perilaku runtime yang sederhana (cukup memutar file)

Kekurangan:

• Anda membayar pembuatan audio untuk konten yang mungkin tidak pernah diputar.
• Semua konten harus sudah diketahui sebelumnya.
• Setiap perubahan konten membutuhkan pembuatan ulang.
• Biaya penyimpanan dan CDN ikut naik seiring volume konten.

Untuk konten dinamis atau yang sering diperbarui, cara ini cepat menjadi mahal dan merepotkan secara operasional.

Strategi lain adalah pembuatan sesuai permintaan (lazy), di mana audio hanya dibuat saat pengguna benar-benar menekan tombol putar.

Cara kerjanya:

• Saat pengguna meminta audio untuk sebuah konten, Anda memanggil API TTS.
• Audio yang dihasilkan di-cache atau disimpan.
• Permintaan berikutnya memakai ulang audio dari cache.

Kelebihan:

• Jauh lebih hemat: Anda hanya membayar konten yang benar-benar didengarkan pengguna.
• Secara alami mendukung konten dinamis dan konten buatan pengguna.
• Mengurangi pembuatan audio yang sia-sia untuk konten yang tidak dipakai.

Tantangan:

• Tanpa kontrol, siapa pun bisa memicu pembuatan audio yang mahal.
• Anda perlu cara untuk menentukan konten mana yang mendapat audio dan kapan.
• Anda harus menyeimbangkan pengalaman pengguna (jeda awal) dengan kontrol anggaran.

TTS2Go memadukan TTS browser dan TTS AI untuk menyeimbangkan kualitas, biaya, dan kesederhanaan.

Ide utamanya:

1. Key sisi klien yang aman

• Anda menambahkan SDK TTS2Go ke situs dengan API key frontend.

Instal paket Svelte TTS2Go:

npm install @tts2go/svelte

Paket ini bekerja dengan Svelte 5 dan menyatu secara alami dengan model reaktivitas Svelte.

Inisialisasi client TTS2Go dengan kredensial proyek Anda. Di Svelte, Anda bisa membuat client langsung di komponen atau di modul bersama.

import { createTTS2GoClient } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

• apiKey: Key TTS2Go publik Anda yang aman dipakai di frontend.
• projectId: Menentukan proyek TTS2Go mana yang dipakai untuk pembuatan audio, persetujuan, dan analitik.

Gunakan createTTS untuk mendapatkan store reaktif dengan kontrol pemutaran dan status.

import { createTTS2GoClient, createTTS } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

const VOICE_ID = "your-voice-id";

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

const tts = createTTS(client, text, VOICE_ID);

let status = $state("idle");

const unsubscribe = tts.status.subscribe((s) => (status = s));

function handleClick() {

if (status === "playing" || status === "fallback") {

tts.stop();

} else {

tts.play();

}

Dari sini, Anda bisa:

• Menjelajahi pemilihan suara agar sesuai dengan brand atau jenis konten Anda.
• Menggunakan SSML untuk kontrol detail atas pelafalan, jeda, dan penekanan.
• Mengintegrasikan API penyorotan teks untuk menyinkronkan teks dengan audio yang diucapkan.

Untuk dokumentasi Svelte lengkap dan contoh lanjutan, kunjungi:

• https://tts2go.com/docs/svelte