Menambahkan Text-to-Speech ke JavaScript

Anda tidak butuh framework untuk menambahkan text-to-speech (TTS) ke website. Entah Anda memakai HTML dan JavaScript biasa, static site generator, atau halaman yang dirender di server, menambahkan suara ke konten Anda itu mudah.

Panduan ini menjelaskan cara kerja suara di browser, untung-rugi tiap pendekatan, dan cara mengintegrasikan TTS2Go ke proyek JavaScript apa pun.

Browser modern sudah dilengkapi Web Speech API bawaan. Cukup dengan beberapa baris JavaScript murni, Anda bisa:

```js

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

window.speechSynthesis.speak(utterance);

```

Tanpa paket npm, tanpa API key, dan tanpa server. Gratis dan bisa berjalan offline.

Kekurangannya ada pada kualitas dan konsistensi:

• Suaranya sering terdengar seperti robot.
• Kualitas dan pilihan suara berbeda di tiap platform.
• Chrome di Windows terdengar berbeda dengan Safari di macOS.
• Anda tidak bisa menjamin pengalaman mendengarkan yang konsisten untuk semua pengguna.

Text-to-speech AI telah mengubah apa yang mungkin dilakukan dengan suara di web. Model suara neural menghasilkan audio yang benar-benar terdengar seperti manusia, lengkap dengan jeda, penekanan, dan ritme yang alami.

Salah satu opsinya adalah membuat audio untuk semua konten Anda sejak awal, lalu meng-host file-nya di CDN.

Kelebihan

• Pemutaran instan bagi pengguna
• Kualitas dan suara yang sama di mana pun

Kekurangan

• Anda membayar pembuatan audio untuk setiap konten di muka, entah nanti diputar atau tidak
• Semua konten harus sudah diketahui sebelumnya
• Setiap pembaruan berarti membuat ulang file
• Biaya penyimpanan ikut membengkak seiring bertambahnya konten

Pembuatan di muka cocok untuk katalog kecil yang jarang berubah, tetapi menjadi mahal dan kaku saat skalanya membesar.

Pendekatan yang lebih efisien adalah membuat audio hanya ketika seseorang benar-benar menekan tombol putar.

Keuntungan

• Anda hanya membayar audio yang diminta pengguna
• Konten dinamis dan konten buatan pengguna tertangani secara alami

Tantangan

Tanpa pembatasan, siapa pun yang mengunjungi situs Anda bisa memicu pembuatan audio yang mahal. Anda perlu cara untuk menentukan apa yang dibuat dan kapan, agar anggaran tetap terkendali sambil tetap menawarkan TTS di mana-mana.

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

1. Key sisi klien yang aman

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

1. Pengunjung pertama: TTS browser instan + pembuatan di latar belakang

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.

1. Persetujuan dan kontrol anggaran

Di dashboard TTS2Go, Anda bisa:

• Menyetujui permintaan pembuatan secara manual, atau
• Mengatur sistem persetujuan AI agar otomatis menyetujui permintaan yang memenuhi kriteria Anda.

Dengan begitu, Anda memegang kendali penuh atas anggaran pembuatan audio.

1. Pengunjung berikutnya: audio AI premium dari CDN

Setelah permintaan disetujui dan audionya dibuat, setiap pengguna berikutnya yang menekan TTS pada konten yang sama akan mendapatkan audio AI berkualitas tinggi dengan suara pilihan Anda, langsung dari CDN TTS2Go.

Praktisnya: pengunjung pertama mendapat TTS browser, biaya dikendalikan lewat persetujuan, dan semua orang sesudahnya mendapat audio AI premium.

Instal paket JavaScript vanilla TTS2Go menggunakan npm:

npm install @tts2go/vanilla

Jika Anda tidak memakai bundler, Anda bisa memuatnya dari CDN dengan tag <script> dan mengaksesnya sebagai window.TTS2Go.

Inisialisasi instance TTS2Go baru dengan kredensial proyek Anda:

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

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

Panggil tts.create() dengan teks dan ID suara untuk mendapatkan instance TTS dengan kontrol pemutaran lengkap:

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

Dari sini, Anda bisa menjelajahi API JavaScript TTS2Go selengkapnya, termasuk:

• tts.getVoices() – menampilkan daftar suara yang tersedia untuk proyek Anda