Pembahasan kali ini saya ingin coba membahas tentang bagaimana dari sebuah text atau tulisan di konversi menjadi suara, salah satu contoh-nya ada pada fitur google translate. Jika kamu pernah nyoba google translate, pada saat kamu mengetikan tulisan pada form inputan di sana terdapat sebuah icon speaker dan ketika kamu meng-klik-nya maka google translate akan membacakan isi text yang telah kamu tulis di form inputan tadi.
Nah di pembahasan kali ini saya akan membahas itu. Di praktik kali ini saya memakai Responsive Voice JS . Javascript ini akan membantu kita dalam mengkonversi text menjadi suara. Yang menariknya, dengan javascript ini kamu bisa mengatur kecepatan bicara, volume dan lain-lain.
Sebenarnya javascript ini berbayar, tapi kita masih bisa menggunakan-nya, karena dia menyediakan versi gratisnya, cuma jika memakai versi gratis, kita tidak akan dapat semua fitur-fiturnya. Tapi lumayan, pas kemarin saya coba yang gratisnya fiturnya enak juga. Mari langsung saja ikutin praktinya.
<!DOCTYPE html>
<html>
<head>
<title>speak text to speech with Resvonsive Voice</title>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script type="text/javascript">
function play (){
responsiveVoice.speak(
"Hey nama saya cahya, kang cahya dot kom merupakan web personal saya, terimakasih telah berkunjung kemari.",
"Indonesian Female",
{
pitch: 1,
rate: 1,
volume: 1
}
);
}
function stop (){
responsiveVoice.cancel();
}
function pause (){
responsiveVoice.pause();
}
function resume (){
responsiveVoice.resume();
}
</script>
</head>
<body>
<button onclick="play();">Play</button>
<button onclick="stop();">Stop</button>
<button onclick="pause();">Pause</button>
<button onclick="resume();">Resume</button>
</body>
</html>
Keterangan :
Function play berfungsi untuk menjalankan-nya suara. Parameter pertama pada fungsi responsiveVoice.speak di isi dengan text yang akan dia baca, lalu di parameter kedua di isi dengan tipe suara, pada contoh saya memakai indonesian female, di parameter ke tiga berisi konfigurasi, yaitu ada pitch, rate dan volume (default semuanya bernilai 1).
Untuk Function stop, pause dan resume sepertinya saya tak perlu menjelaskannya lagi, karena mungkin kamu bisa dengan mudah menebaknya sendiri :)
Tambahan (buat auto play)
Pada bagian ini saya akan memberikan contoh bagaimana responsivevoice ini di buat autoplay, jadi pada saat ingin menjalankan ini kita tidak perlu lagi klik play dan lain-lain.
responsiveVoice.OnVoiceReady = function() {
console.log("speech time?");
responsiveVoice.speak(
"Hey nama saya cahya, kang cahya dot kom merupakan web personal saya, terimakasih telah berkunjung kemari.",
"Indonesian Female",
{
pitch: 1,
rate: 1,
volume: 1
}
);
};
Untuk keterangan hampir sama dengan penjelasan souce di atas, cuma disini ada fungsi baru, namanya responsiveVoice.OnVoiceReady, ini berfungsi agar resvonsivevoice berjalan secara otomatis.
Untuk tipe suara, berikut adalah tipe suara yang di support oleh resvonsipe voice :
*) silahkan salin salahsatu.
- UK English Female
- UK English Male
- US English Female
- Arabic Male
- Armenian Male
- Australian Female
- Australian Female
- Brazilian Portuguese Female
- Chinese Female
- Czech Female
- Danish Female
- Deutsch Female
- Dutch Female
- Finnish Female
- French Female
- Greek Female
- Hatian Creole Female
- Hindi Female
- Hungarian Female
- Indonesian Female
- Italian Female
- Japanese Female
- Korean Female
- Latin Female
- Norwegian Female
- Polish Female
- Portuguese Female
- Romanian Male
- Russian Female
- Slovak Female
- Spanish Female
- Spanish Latin American Female
- Swedish Female
- Tamil Male
- Thai Female
- Turkish Female
- Afrikaans Male
- Albanian Male
- Bosnian Male
- Catalan Male
- Croatian Male
- Czech Male
- Danish Male
- Esperanto Male
- Finnish Male
- Greek Male
- Hungarian Male
- Icelandic Male
- Latin Male
- Latvian Male
- Macedonian Male
- Moldavian Male
- Montenegrin Male
- Norwegian Male
- Serbian Male
- Serbo-Croatian Male
- Slovak Male
- Swahili Male
- Swedish Male
- Vietnamese Male
- Welsh Male
- US English Male
- Fallback UK Female
pagi kang cahya artikel sangat membantu, saya mau tanya saya mau membuat skrip diatas otomatis jalan sendirinya tanpa menekan tombol play tapi belum berhasil. mohon bantuannya karena saya sudah coba play(); tidak berhasil juga . terimakasih
BalasHapuspake ini :
HapusresponsiveVoice.OnVoiceReady = function() {
///letakan responsive voice speak disini
};
.
saya udah tambahkan pada artikel di atas,,, bisa di baca ulang
gan cara memberi jeda gimana..ngomngnya itu tidak ada jedanya padahal di sourcode sudah di kasih tanda jeda
BalasHapuskang,saya sudah bisa membuatnya,saya mau suara tsb di confert jadi mp3 dam di download bisa ndak kang? terimakasih sebelumnya
BalasHapuskang..jika kita sisip ke wp di suatu halaman, gimana nyisipnya
BalasHapusuntuk WP ada pluginnya, lihat disini : responsivevoice.com/wordpress-text-to-speech-plugin
Hapusterima ksih kang cahya dyazin
BalasHapuskenapa ya ketika inputan menggunakan type text bisa ada suaranya tp ketika inputan pakai textarea suara yg ditampilkan tidak ada suaranya, mohon solusinya terimakasih.
BalasHapusCoba bisa lihat sintak-nya? Salin ke gist.github.com terus kirim linknya di form komen
Hapusdihalaman admin input beritanya menggunakan textarea dg menambahkan textarea editor yaitu menggunakan ckeditor resposnive, ketika berhasil tersimpan ke database dan saya tampilkan dengan memanggil php nya di halaman tampilan tidak mengeluarkan suara sedangkan ketika saya panggil php yang menggunakan inputan text suara bisa keluar, kesalahannya dimana, dan untuk contohnya nnti saya akan kirim, terimakasih
BalasHapuscoba cek di database, biasanya kalau pake text editor semacam "ckeditor" itu suka ada tag html yg ikut kesimpen, itu bisa bikin masalah
Hapushttps://github.com/pengulik/bantuanya-ya-mas
BalasHapusseperti < p > dalam database kesimpennya gth mohon bantuannya udah saya buat mas
gimana mas apa yang jadi permasalahan dan bagaimana solusinya, maaf saya ingin tau ilmunya dan agar bsa brtambah pengetahuan saya, salam 10 jari ya mas hehehe
BalasHapusAlhamdulillah berhasil sodara perkataan akang ini "coba cek di database, biasanya kalau pake text editor semacam "ckeditor" itu suka ada tag html yg ikut kesimpen, itu bisa bikin masalah"
BalasHapussaya sudah menemukan solusinya, ternyata bener tag html < p >< / p > yang tersimpan kedalam database yang menjadi permasalahannya, salam 10 jari dari pengulik
bisa terhapus hanya tag html yang < p > < / p> ini saja klo menghapus tag html yang lain gimana caranya kang, ngoceh lg ni saya maaf ya mohon bantuannya terimakasih.
BalasHapusSebelum datanya di simpen, valuenya di filter pake fungsi strip_tag ==> php.net/manual/en/function.strip-tags.php
HapusItu masalahnya karena ada tag html aja, soalnya library nya cuma bisa baca text biasa doank
mbb kasih saya contoh kang, saya pakai sistem modul dari lokomedia, value yang dimaksud di aksi_simpan.php apa di inputannya,
BalasHapusValue itu data POST yang dikirim dari form, misal textarea yang agan buat itu punya name "data_voice", nah untuk nangkep post-nya itu pasti agan bakalan pake $_POST['data_voice'] <== nah ini yang dimaksud value. Jadi di phpnya cukup gini aja strip_tags($_POST['data_voice'])
Hapusitu strip_tags berfungsi untuk semua tag html kan, intinya tdk satu pun tag html ikut tersimpan tdk. mksh kang
BalasHapusIya untuk semua tag html.
HapusTapi saran saya biar ga ribet, kalau emng ga butuh tag html mening pake textarea biasa aja, biar pas valuenya di simpen cuma text doank isinya. Jadi ga perlu pake strip_tags.
kalau gk pake textarea editor nanti tidak bisa memasukan gambar yang diambil dari foto google dalam pembuatan artikel, strip_tags gk berhasil menghapus semua tag html kang, udah saya coba tp masih gagal. bisa kasih contoh rinciannya gk kang.
BalasHapusmening dibuat 2 field aja, yg 1 buat conten artikel, yg satu buat suara, yg buat suara pake strip_tags
Hapussempat terpikirkan sama saya mas, ini masukan jenius juga tp nnti saya pikirkan baik2 yaaaa
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusklo pakai strip_tags ternyata mematikan link gambar ya mas dan sangat tidak bagus untuk website portal berita, jika tanpa gambar, makasih untuk bantuannya. siapa tau nnti kita bsa bekerjasama
BalasHapusYa memang, strip_tags menghapus semua tag html.
HapusAda solusi lain sebenernya selain dibikin 2 field.
Pada saat conten artikel di tampilkeun itu ga usah pake strip_tags, cuma pas mau di binding ke voice baru data kontennya di filter pake strip_tags
terima kasih postingannya Gan
BalasHapussy sdh coba mengaplikasikan script anda dan sudah berhasil. Cuma masalahnya masih sering hasil audionya itu di eja. Mohon dibantu solusinya Gan ?
di eja gimana mksdnya?
Hapussaya kan mencoba untuk memanggil nama2 orang, sebagian besar lancar, tetapi untuk nama-nama tertentu itu di eja, terutama utk nama-nama yg ada huruf matinya, seperti : Akhmad, Shinta, dll. Barang kali ada solusinya.. tanpa mengubah tulisan nama orangnya
BalasHapusowh gitu, mungkin sepertinya lib-nya masih belum mendukung untuk membaca kombinasi huruf konsonan seperti itu.
HapusSederhananya agan mungki harus ngakalin dari segi datanya, seperti membuat dua buah field dengan nama "display_name" dan "read_name", pada display name agan input data nama secara normal, lalu di bagian read name agan masukan penulisan nama yang akan di baca, misal pada display name agan input Akhmad, lalu pada read namenya agan input ahmad.
Nanti untuk field display name agan sematkan di tampilan aplikasi, lalu untuk read namenya agan sematkan pada library untuk dibaca nantinya.
Semoga membantu :)
gan,, biar suaranya bisa kedengeran saat web nya di buka pakai android, gimana ya gan..?
BalasHapustks atas solusinya :)
pakai OnVoiceReady, contohnya ada diatas
HapusPermisi gan. Kalau mau make input teks gitu gimana ya gan? Maaf newbie nih
BalasHapusCaranya tinggal buat inputan biasa, lalu text yang nanti di input di ambil valuenya dengan menggunakan ID di javascript. Kemudian value yang tadi di ambil tinggal masukan saja ke sintak responsive voice.
Hapus#INPUT TEXT
[textarea id="text-speech"][/textarea]
#JS-nya
var txtNya = document.getDocumentById("text-speech").value;
function play (){
responsiveVoice.speak(
txtNya,
"Indonesian Female",
{
pitch: 1,
rate: 1,
volume: 1
}
);
}
masih eror nih gan huhuhu ada gmail atau Line ga gan ?
Hapuskang, saya mau nanya. saya pernah coba masukkan satu kalimat panjang pada text area. saat dibunyikan, tiba tiba suaranya berhenti sejenak seperti ada jeda padahal tidak ada tanda koma atau tanda yang buat suaranya berhenti sejenak. seharusnya kalimat itu dibaca secara utuh satu kesatuan, tapi suaranya malah tiba tiba berhenti sedetik setelah itu lanjut lagi. jadi masalahnya dimana ya kang. mohon bantuannya.
BalasHapusassalamualaikum kang, mohon petunjuk dong bgmn menerapkan tts ini pada server xampp secara offline, makasih kang info nya
BalasHapusPak cahya kalo membuat supaya bisa secara offline begimana yak? Ane belajaran pake offline pak hihihi
BalasHapusmaster untuk menampilkan suaranya kita ambil dari inputan database gimana ya penempatanya saya coba tidak terbaca
BalasHapuskalau utk yang autoplay ko ga jalan ya?
BalasHapusbisa offline?
BalasHapusga bisa, mungkin bisa pakai Text to Speech bawaan browser bisa offline
Hapuspak cahya responsiveVoice.OnVoiceReady = function() {
BalasHapus} saya coba bisa tapi mesti klik tombol allow harus tetep di klik pak cahya
caranya bagaimana ya pak cahya supaya otomatis?
Jika merujuk pada dokumentasi yang terbaru di 2024 : https://responsivevoice.org/api/
Hapusharusnya cukup gini saja jika ingin otomatis play :
window.onload = function() {
responsiveVoice.speak("This text will be spoken automatically when the page loads.", "UK English Male");
};
jangan lupa registrasi dahulu untuk dapat UNIQUE_KEY nya
Hapus[script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_UNIQUE_KEY"][/script]
Posting Komentar