Konversi Teks ke Suara pada Situs Web HTML — Sematkan Suara AI
Integrasi HTML
Konversi teks ke ucapan pada situs web HTML — sematkan suara AI dengan satu skrip.
Pengembang dan tim yang menjalankan HTML kustom, situs statis, atau tumpukan CMS non-WordPress dapat sematkan skrip TTS sekali dan memberikan secara alami situs kustom suara AI dengan GSpeechPemutaran dan sintesis berjalan melalui GSpeech Konsol Awan - Tidak memerlukan Kunci API, tanpa tumpukan TTS sisi server, dan tanpa beban hosting tambahan.
Panduan ini menunjukkan cara menambahkan teks ke ucapan ke situs web HTML: tempelkan kode koneksi satu baris sebelum , tempatkan pemain Halaman Penuh / Tombol / Lingkaran dengan dudukan HTML Kustom, lalu petakan Pemilih Konten ke Elemen Render ke kelas dan ID tata letak Anda.
Penyematan satu baris — tempel sebelum pada tumpukan kustom apa pun atau situs statis.
Generasi Audio Awan — Sintesis sekali, simpan dalam cache, dan putar ulang di berbagai kunjungan.
Tidak memerlukan Kunci API — suara dan pemain dari satu konsol.
Pemetaan berbasis selektor — menargetkan artikel, tata letak utama, atau tata letak kustom apa pun.
Terbaik untuk: pengembang, generator statis, dan tema CMS kustom di mana Anda mengontrol HTML dan menginginkan satu embed plus pemilih CSS untuk tata letak kustom.
Buat situs web — jika Anda belum menambahkan situs, ikuti langkah-langkah berikut. buat situs web.
Buka situsnya — pergi ke milikmu dasbor dan pilih situsnya.
Salin kode HTML - membuka Integrasi → Situs Web HTML lalu salin kode koneksinya.
Tempel sebelum — Sisipkan kode ini di template Anda sebelum tanda penutup beri tag, lalu sebarkan.
Kode koneksi sedang dimuat. GSpeech di setiap halaman tempat widget tersebut berada. Pemain hanya muncul di tempat Anda menempatkan mount/HTML Kustom dan hanya ketika widget yang sesuai dipublikasikan dan dikonfigurasi.
Model pemetaan
Sematkan skrip, pemasangan, dan pemetaan pemilih untuk HTML kustom.
Pada situs HTML kustom, satu embed akan memuat mesinnya. Setiap widget kemudian memetakan kelas dan ID Anda sendiri ke sebuah mount — sehingga Anda tetap memegang kendali penuh atas tata letak sementara narasi tetap berada di Cloud Console:
1Kode koneksi
Memuat mesin terlebih dahulu Tanpa itu, tunggangan tidak akan berfungsi.
2Widget khusus
Konfigurasi dasbor: suara, bahasa, desain, pengaturan konten, aturan URL untuk setiap rute atau templat.
3Pemasangan / HTML Kustom
Penanda dalam HTML halaman Anda (misalnya .gsp_full_player) tempat UI pemain muncul.
4Pemetaan konten
Pemilih Konten = apa yang harus dibaca. Elemen Render = tempat pemain muncul. Kecualikan / Judul / URL mempersempit pencocokan.
Widget tidak terbatas — widget Halaman Penuh, Tombol, atau Lingkaran terpisah untuk tata letak, bahasa, atau desain yang berbeda.
Jumlah pemain tak terbatas per widget. — satu widget yang dipublikasikan dapat mendukung setiap pemasangan yang sesuai yang diizinkan oleh aturan Render Element + URL.
Pemasangan HTML kustom — di situs HTML, tampilan mount seperti ini <div class="gsp_full_player"></div>Di WordPress, ide yang sama menggunakan shortcode seperti... [gspeech].
Pengaturan default vs pengaturan lanjutan — Pemasangan default bekerja dengan cepat. Tata letak kustom yang unik memerlukan nilai Pemilih Konten / Elemen Render yang tepat.
Pemain
Tambahkan pemain dengan HTML Kustom
Tempatkan salah satu mount ini di tempat pemain seharusnya muncul di halaman. Klik kartu untuk menyalinnya. Kemudian atur widgetnya. Elemen Render ke kelas yang sama.
Di dalam widget Konten Gunakan tab, pilih selector pada artikel, main, atau wrapper kustom yang Anda miliki — selector CSS apa pun yang diekspos oleh markup Anda.
id → # — HTML id="main" → tulis #main.
kelas → . — HTML class="post-content" → tulis .post-content.
Kumpulkan potongan-potongan — Pemilih Konten menerima beberapa target, dipisahkan oleh koma: #intro,.body,#summary.
Potong potongan — Daftar Pengecualian menggunakan hal yang sama # / . + koma: #comments,.ads,.share-buttons.
Temukan nilai-nilai — Klik kanan → Periksa di halaman langsung. Panduan lengkap untuk pemula: Nilai HTML (# / .).
CS
Pemilih Konten
Mendefinisikan teks apa yang diucapkanGunakan selektor CSS, dipisahkan koma (susun konten secara bertahap). Contoh:
artikel,bagian,#my_id,.my_class — beberapa target dalam satu bidang (bagian-bagian digabungkan menjadi satu narasi).
kelas_induk — membaca pembungkus induk dari mount (berguna untuk HTML Kustom di dalam blok konten).
kelas_sendiri — bacalah pembungkus yang sama tempat dudukan itu berada.
Biarkan kosong jika Anda menggunakannya Konten Teks sebagai gantinya (teks tetap, bukan konten DOM).
RE
Elemen Render
Mendefinisikan di mana UI pemain disuntikkan. Itu harus sesuai dengan elemen nyata di halaman tersebut.
Untuk pemasangan HTML kustom, atur ke kelas pemasangan: .gsp_pemain_lengkap, .gsp_button_player, atau .gsp_circle_player.
Anda juga dapat menargetkan kontainer tata letak seperti tubuh, # isi, atau .header-artikel saat Anda tidak menggunakan dudukan khusus.
Jika Content Selector sudah benar tetapi tidak ada yang muncul, Render Element biasanya salah atau hilang di halaman tersebut.
RP
Posisi Render
Menempatkan pemain Sebelum or Setelah Konten Render Element. Untuk div mount khusus, After/Before biasanya masih berfungsi relatif terhadap node tersebut — biarkan mount kosong dan biarkan widget mengisinya.
EX
Daftar Pengecualian
Selektor yang harus tidak dibicarakan, bahkan jika mereka berada di dalam Pemilih Konten. Sama saja. # / . Aturan, dipisahkan koma. Contoh: #comments,.sidebar,.ads,.no-speech.
TT
Pemilih Judul / Teks Judul
Pemilih Judul — judul dinamis dari halaman (contoh: h1).
Teks Judul — Judul tetap ditampilkan di pemutar. Biarkan Pemilih Judul kosong saat menggunakan Teks Judul.
CT
Konten Teks
Teks narasi tetap opsional. Saat digunakan, Pemilih Konten dapat dibiarkan kosong. Berguna untuk blok promosi statis ketika konten DOM tidak boleh menggerakkan audio.
Aturan praktis untuk situs HTML: Pemilih Konten menunjuk ke pembungkus yang Anda kendalikan (misalnya article.post or #main), Render Element mengarah ke mount, dan Exclude List melewati navigasi, iklan, dan komentar.
contoh
Contoh praktis pemetaan untuk tata letak HTML kustom
Contoh A
Artikel dengan tata letak khusus dan Pemutar Halaman Penuh.
Templat statis atau CMS Anda menyertakan artikel dan dudukan:
Daftar Pengecualian - .share-buttons,.related-posts (Opsional)
Pemilih Judul - h1 (Opsional)
Contoh B
Pasang di dalam wilayah konten CMS — parent_class
Jika mount berada di dalam region konten CMS kustom, Content Selector dapat bersifat relatif:
Pemilih Konten - parent_class (membaca induk dari mount)
Elemen Render - .gsp_full_player
penggunaan self_class ketika pembungkus mount itu sendiri berisi teks yang seharusnya dinarasikan.
Contoh C
Template situs statis dengan widget satu tombol.
Tempat .gsp_button_player di berbagai template statis. Widget One Button Player dengan Render Element. .gsp_button_player dapat memberi daya pada semuanya. Buat widget tambahan hanya jika aturan suara, desain, pemilih, atau URL harus berbeda.
Publikasikan & dengarkan — Ubah Status menjadi Diterbitkan, segarkan halaman langsung, uji pemutaran.
Saat teks halaman berubah, Smart Audio Sync dapat menghasilkan ulang narasi di latar belakang. Bidang pemetaan tetap menentukan yang teks dan dimana Pemain itu masih hidup.
FAQ (Pertanyaan Umum)
Pertanyaan yang Sering Diajukan (FAQ): Penyematan teks ke ucapan pada situs web HTML
Apakah situs web HTML mendukung text-to-speech dan suara AI dengan GSpeech?
Ya. GSpeech Berfungsi pada situs HTML apa pun, generator statis, atau CMS kustom tempat Anda dapat menempelkan skrip sebelumnya. Anda mendapatkan suara AI alami dan pemain modern tanpa perlu membangun alur kerja TTS di sisi server.
Bagaimana cara menyematkan skrip TTS GSpeech di situs web kustom?
Salin kode koneksi dari Integrasi → Situs Web HTML. Tempelkan sekali di templat yang Anda bagikan sebelum lalu sebarkan. Kemudian tambahkan mount seperti <div class="gsp_full_player"></div> Pada layout tempat pemain seharusnya muncul, atur Render Element ke kelas tersebut.
Apa perbedaan antara Content Selector dan Render Element pada situs HTML kustom?
Pemilih Konten adalah selektor CSS apa pun untuk teks yang ingin Anda ucapkan — misalnya #main, article.postatau kelas dari CMS Anda. Elemen Render Di sinilah UI pemain disuntikkan — biasanya kelas tunggangan Anda. Karena Anda mengontrol markup-nya, Anda dapat memetakan tata letak kustom apa pun dengan tepat.
Apakah audio GSpeech akan memperlambat situs HTML atau situs statis saya?
Tidak. Sintesis dan caching terjadi di GSpeech cloud. Embed ini adalah skrip klien yang ringan, dan pemutar hanya dimuat di tempat mount tersedia. Hosting Anda terus menyajikan HTML, CSS, dan JS normal sementara pengunjung mendengarkan sesuai permintaan.
Apakah saya memerlukan kunci API untuk menyematkan suara AI situs khusus?
Nomor GSpeech is Tidak memerlukan Kunci API Untuk situs HTML. Tempel kode sematan, konfigurasikan widget di Cloud Console, dan publikasikan. Suara dan pemutar dikelola dari satu akun tanpa kunci TTS pihak ketiga di basis kode Anda.
Bantuan
Butuh bantuan menemukan selector untuk tema kustom atau layout builder?
Hubungi dukungan GSpeechKirimkan URL halaman dan kami akan membantu memetakan Pemilih Konten / Elemen Render.
