Sejak template Igniplex versi 3 dirilis, terdapat satu fitur baru yang cukup berguna di beberapa niche blog. Ya, fitur tersebut adalah fitur text-to-speech. Igniplex menjadi template Blogger (blogspot) pertama yang memiliki fitur text-to-speech Web Speech API dan bahkan satu-satunya template Blogger yang memiliki fitur text-to-speech.
Seperti namanya, text-to-speech adalah sebuah fitur yang berfungsi untuk membacakan isi artikel dalam blog dari awal hingga selesai. Fitur text-to-speech ini tentunya sangat berguna dan membantu para pengunjung blog supaya tidak perlu repot-repot membaca isi artikel dan scrolling halaman artikel. Cukup klik tombol "PLAY", maka semua teks akan dibacakan secara otomatis. Sangat cocok untuk pengunjung yang lebih mudah memahami suatu materi dengan cara mendengarkannya.
Nah, di artikel kali ini saya akan coba membagikan sebuah JavaScript text-to-speech yang saya buat sendiri menggunakan Web Speech API. Saya kurang tahu apakah Igniplex juga menggunakan metode yang sama atau tidak karena jika dilihat dari fungsi, keduanya mirip. Contohnya pada output suara yang dihasilkan. Dari script yang saya bagikan ini, suara yang dihasilkan adalah suara yang mirip seperti Google Translate (Google Bahasa Indonesia) sama seperti text-to-speech pada template Igniplex.
Di sisi lain, terdapat beberapa perbedaan. Yaitu fungsi text-to-speech dari JavaScript yang saya bagikan tidak dapat mengatur bahasa yang diinginkan, bahasa yang digunakan adalah bahasa Indonesia saja. Berbeda halnya dengan script yang digunakan pada template Igniplex. Jadi jika di blog kamu memiliki beberapa artikel dengan bahasa yang berbeda (selain bahasa Indonesia), maka pembacaan teksnya akan terdengar jelek (seperti dipaksakan).
Script telah diperbarui. Fungsi untuk mengatur bahasa default dan bahasa berbeda di setiap artikel telah ditambahkan. Cek selengkapnya di bawah.
Selain itu, saya juga menambahkan fungsi untuk mengecualikan teks atau paragraf tertentu supaya tidak dibacakan ketika fitur text-to-speech sedang aktif. Pengecualian teks ini dapat diatur melalui konfigurasi JavaScript dengan elemen-elemen yang kamu inginkan. Misalnya saja teks yang ingin dikecualikan adalah teks-teks yang menggunakan elemen <pre>, <code> atau elemen lainnya.
Selain pengecualian teks menggunakan elemen HTML, kamu juga bisa menggunakan CLASS atau ID CSS. Misalnya saja .contoh atau #contoh. Saya menambahkan fungsi pengecualian teks ini karena saya pikir mungkin saja di blog kamu ada beberapa teks atau bahkan paragraf yang tidak perlu untuk dibacakan seperti teks syntax yang umumnya menggunakan elemen <pre> dan <code>. Atau elemen-elemen lainnya yang dirasa kurang perlu untuk dibacakan, misalnya seperti ToC (Table of Content) atau daftar isi.
Apakah Penting Memasang Fitur Text-to-Speech di Blog?
Mengenai penting atau tidaknya itu berdasarkan preferensi masing-masing. Walaupun untuk saat ini masih sedikit blog ataupun website yang memiliki fitur text-to-speech (TTS) ini. Tapi menurut saya fitur text-to-speech Web Speech API ini cukup penting. Kenapa? Karena dengan fitur text-to-speech ini dapat meningkatkan aksesibilitas bagi para pengunjung yang berkebutuhan khusus seperti kesulitan dalam membaca atau yang lainnya.
Selain itu, dengan menggunakan fitur pengenalan suara (text-to-speech), pengguna dapat berinteraksi dengan website kamu melalui suara. Ini dapat meningkatkan pengalaman pengguna dan memberikan cara alternatif untuk berinteraksi. Nilai positifnya pengguna tidak perlu repot-repot membaca dan scroll halaman untuk membaca semua isi artikel yang ada seperti yang sudah dijelaskan di awal tadi.
Kenapa Harus Pakai Web Speech API?
Selain gratis, alasan utama saya menggunakan Web Speech API untuk menginterpretasikan fungsi pengenalan suara atau text-to-speech ini adalah karena menyediakan antarmuka yang relatif mudah digunakan untuk mengintegrasikan fungsi Text-to-Speech (TTS) ke dalam aplikasi web atau website. Dengan menggunakan Web Speech API, kita tidak perlu menggunakan CDN, Library external atau apapun itu untuk mengintegrasikannya ke dalam website. Sehingga tidak terlalu memberatkan loading blog.
Selain itu, Web Speech API juga sudah ada di banyak browser modern sehingga tidak perlu khawatir terjadi masalah pada fungsi text-to-speech (TTS) tidak berfungsi di browser pengguna. Karena Web Speech API mendukung standar aksesibilitas web yang membuatnya lebih konsisten. Memang ada banyak layanan lain yang menyediakan fungsi text-to-speech seperti ini (misalnya seperti Google Cloud Text-to-Speech, Amazon Polly, eSpeak.js dan lainnya), tapi yang paling mudah digunakan adalah Web Speech API.
Cara Memasang Fitur Text-to-Speech di Blog
Oke, jika kamu sudah paham dengan fungsi text-to-speech (TTS) ini, kamu bisa langsung coba membuat fitur text-to-speech di blog kamu dengan mengikuti langkah-langkah di bawah ini.
JavaScript Text-to-Speech (Web Speech API)
- Masuk ke akun Blogger kamu.
- Masuk ke menu
TemaEdit HTML. - Setelah itu cari kode
</body>. - Kemudian salin JavaScript di bawah ini dan taruh di atas tag penutup
</body>tadi. - Jika sudah, klik simpan.
- Selesai.
<script>//<![CDATA[
// javascript text-to-speech web speech api v2.0 by ignelius.com || updated: 16 jan 2024
let igneliusTTS = {
credit : {
name: "www.ignelius.com", // credit script, jangan dihapus atau diganti
visibility: "visible" // credit script, "visible" untuk menampilkan dan "hidden" untuk menyembunyikan
},
setting: {
lang: "id-ID", // pengaturan bahasa default
rate: 1.0 // tingkat kecepatan membaca
},
alert: {
noTeks: "Tidak ada teks untuk diucapkan.", // notifikasi ketika elemen pada konfigurasi "selectors" tidak ditemukan dalam halaman
noSupport: "Browser kamu tidak mendukung fitur text-to-speech untuk membacakan artikel." // notifikasi jika browser pengguna tidak mendukung Web Speech API
},
selector: ['.post-body'], // elemen selectors untuk menentukan bagian mana teks yang akan dibacakan. Kebanyakan template menggunakan selector ".post-body". Jika berbeda, ganti bagian ini
excludeTeks: ['.nospeak'] // elemen selector untuk pengecualian teks ketika text-to-speech aktif. Pisahkan dengan tanda koma (,)
};
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1b K=q,1c=q,X=q;Y k 1r(t,$){p 1d 2u(e=>{j x=q;1e n=M["2v"+x("2w")](t);n||(T.1s[x("2x")]=$),e(n)})}Y k 1t(){j t=q,$=q,e=q,x={2y:k(t,$){p t!==$},1u:t("2z"),2A:t("2B"),2C:t("2D"),2E:k(t,$){p t===$},1v:"2F",2G:t("1w")+"+$",1x:k(t,$){p t!==$},2H:$("2I"),2J:"2K",2L:"2M",2N:k(t,$){p t($)},1y:$("2O")+"2P() ",1z:k(t){p t()},2Q:e("1A"),2R:t("1B"),2S:$("2T"),2U:k(t,$){p t<$},2V:t("2W"),2X:k(t,$){p t+$},2Y:k(t,$){p t+$},2Z:$("1C"),30:"31",32:"33",34:k(t,$){p t<$},1D:k(t,$,e){p t($,e)},35:k(t,$,e){p t($,e)},36:t("37")+"m",38:t("39")+$("3a")+".3b",3c:e("3d")+t("3e"),3f:t("3g")+"3h",1E:$("3i"),1F:t("3j")},n=k(){j t=e,$=e;E(x[t("1G")](x.1v,t("3k"))){j n=3l[t("Z")](3m,O);p 3n=H,n}{j r=!0;p k(e,n){j u=t,f=$,i={1H:k(t,$){j e=q;p x[e("3o")](t,$)},3p:x.1u};E(x[u("3q")]!==x[u("3r")]){j c=r?k(){j t=u,$=f;E(n){E(i.1H(i[t("1I")],i[t("1I")])){j x=3s[$("1J")+"s"][t("1K")]($=>3t["3u"+t("3v")]($));G(j r P x)G(j c P r)3w=3x[t("1L")](c[$("12")],"");p 3y[$("3z")]()}{j l=n.3A(e,O);p n=H,l}}}:k(){};p r=!1,c}{j l=3B?k(){E(3C){j t=3D[f("Z")](3E,O);p 3F=H,t}}:k(){};p 3G=!1,l}}}}(),r=x.1D(n,A,k(){j t=$,n=e,u={};p u[t("1M")]=x[n("1f")],x[n("1G")](n("3H"),"3I")?r[t("Q")]().1N(x[t("1f")])[n("Q")]()[n("1g")+"r"](r)[n("1O")](x[n("1f")]):3J[n("Q")]().1N(3K[t("1M")])[t("Q")]().3L(3M)[n("1O")](t("1w")+"+$")});r();j u=k(){j n=$,r=t,u=e,f={3N:k(t,$){p t&&$},1P:k(t,$){p x.1x(t,$)},3O:x[n("3P")],3Q:x[n("3R")],3S:k(t,$){p x[r("3T")](t,$)},3U:x[r("3V")]},i=!0;p k(t,$){j e=u,x=n,c=r;E(f[e("3W")](x("3X"),f[x("3Y")]))f[e("3Z")](40,41)&&(42.1Q(),43=H,44=H);13{j l=i?k(){j x=c;E($){E(f.1P(f[x("45")],f[e("46")])){j n=$[x("Z")](t,O);p $=H,n}{j r=47?k(){E(48){j t=49[x("Z")](4a,O);p 4b=H,t}}:k(){};p 4c=!1,r}}}:k(){};p i=!1,l}}}(),f=u(A,k(){j n=e,r=$,f=t;E(x[n("4d")],n("1R"),f("4e"),f("4f"),x[f("4g")],x[r("1S")],x[n("1T")],"4h"===x[r("4i")]){j i;14{j c=J[f("4j")](4k,J[n("4l")](J.4m(J.4n,J.4o),");"));i=J[n("4p")](c)}15(l){i=4q}j 1h=i[r("1i")]=i[n("1i")]||{},o=[f("1C"),J.4r,r("4s"),J[f("4t")],n("1U"),J[r("4u")],r("4v")];G(j s=0;J.4w(s,o[f("4x")]);s++){j a=4y[n("1g")+"r"][f("1V")].4z(4A),d=o[s],g=1h[d]||a;a.4B=4C[n("U")](4D),a.17=g[f("Q")][r("U")](g),1h[d]=a}}13{j b;14{j h=4E(x[n("4F")](x[r("4G")](x.1y,r("1R")+\'4H("p A")( )\'),");"));b=h()}15(w){b=T}j D=b[r("1i")]=b.1W||{},y=[x[n("4I")],f("1A"),x[f("4J")],x[n("1S")],n("1U"),x[r("1T")],x[n("4K")]];G(j C=0;x[n("4L")](C,y.V);C++){j v=u[r("1g")+"r"][n("1V")][f("U")](u),B=y[C],z=D[B]||v;v[r("4M")]=u[n("U")](u),v.17=z[n("Q")][n("U")](z),D[B]=v}}});x.1z(f);14{j i=1X x[t("4N")](1r,x[e("4O")],x[e("1j")]);E(x[t("4P")]!==F.1Y[e("4Q")])T.1s.1Z=x[t("1j")];13{1e c=M[$("4R")+"4S"]("a");c.1Z=x[t("1j")],c.4T=x[e("4U")],c[t("4V")][$("4W")]=F.1Y.4X||x.1E,i[e("4Y")][e("4Z")+"50"](c,i)}}15(l){1W[t("1B")](x.1F,l)}}k q(t,$){j e=18();p(q=k($,x){j n=e[$-=51];E(52 0===q.20){1e r=k(t){j $="",e="",x=$+r;G(j n=0,u,f,i=0;f=t.53(i++);~f&&(u=n%4?64*u+f:f,n++%4)&&($+=x.21(i+10)-10!=0?54.55(56&u>>(-2*n&6)):n))f="57+/=".58(f);G(j c=0,l=$.V;c<l;c++)e+="%"+("59"+$.21(c).17(16)).5a(-2);p 5b(e)};q.22=r,t=O,q.20=!0}j u=e[0],f=$+u,i=t[f];E(i)n=i;13{j c=k(t){A.23=t,A.N=[1,0,0],A.24=k(){p"5c"},A.25="\\\\w+ *\\\\(\\\\) *{\\\\w+ *",A.26="[\'|\\"].+[\'|\\"];? *}"};c.1k.27=k(){j t=5d(A.25+A.26),$=t.5e(A.24.17())?--A.N[1]:--A.N[0];p A.28($)},c.1k.28=k(t){p 5f(~t)?A.29(A.23):t},c.1k.29=k(t){G(j $=0,e=A.N.V;$<e;$++)A.N.1l(2a.5g(2a.5h())),e=A.N.V;p t(A.N[0])},1d c(q).27(),n=q.22(n),t[f]=n}p n})(t,$)}!k(t,$){j e=q,x=q,n=q,r=t();G(;;)14{j u=-I(e("5i"))/1*(I(x("5j"))/2)+I(n("5k"))/3+I(e("5l"))/4+-I(x("5m"))/5*(-I(e("5n"))/6)+-I(e("5o"))/7*(I(x("5p"))/8)+I(x("5q"))/9+-I(e("5r"))/10*(I(e("5s"))/11);E(2b===u)2c;r.1l(r.2d())}15(f){r.1l(r.2d())}}(18,2b),1t();j R=H,L=H;k 5t(t){j $=q;F[$("1m")].1n=t}k 5u(t){j $=q,e=q;F[$("1m")][e("2e")]=t}Y k 2f(){j t=q,$=q,e=q,x={5v:k(t){p t()},5w:k(t,$){p t===$},5x:k(t,$){p t($)},5y:k(t,$){p t($)},5z:k(t,$){p t 5A $},5B:t("2g")+t("5C"),5D:$("5E"),2h:k(t,$){p t($)}};x[$("5F")](19);j n=M[$("1a")+"2i"](F[t("5G")][t("5H")](","));E(x[$("5I")](0,n.V)){x[e("5J")](1o,F[e("5K")][t("5L")]);p}j r="";G(j u P n)r+=1X x[$("5M")](2j,u[t("12")]);x[$("5N")](x[t("5O")],T)?(R=T[$("2g")+"5P"],L=1d 5Q(r),F["2k"+e("1p")]&&F["2k"+t("1p")][e("W")]?L[e("W")]=F[e("2l")+e("1p")][t("W")]:L.1n=F.5R[t("W")]||x[$("5S")],L[t("2e")]=F[$("1m")].5T||1,R[e("5U")](L)):x.2h(1o,F.1o[$("5V")])}k 19(){j t=q,$={};$[t("5W")]=k(t,$){p t&&$},$.5X(R,L)&&(R.1Q(),R=H,L=H)}Y k 2j(t){j $=q,e=q,x=q,n=F[$("1J")+"s"][$("1K")](t=>M[x("1a")+"2i"](t));G(j r P n)G(j u P r)t=t[e("1L")](u[x("12")],"");p t.5Y()}k 18(){j t=["5Z","60","61","62","63","65","66","67","68","69","6a","6b","6c","6d","6e","6f","6g","6h","6i","6j","6k","6l","6m","6n","6o","6p","6q","6r","6s","6t","6u","6v","6w","6x","6y","6z","6A","6B","6C","6D","6E","6F","6G","6H","6I","6J","6K","6L","6M","6N","6O","6P","6Q","6R","6S","6T","6U","6V","6W","6X","6Y","6Z","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","7g","7h","7i","7j","7k","7l","7m","7n","7o","7p","7q","7r","7s","7t","7u","7v","7w","7x","7y","7z","7A","7B","7C","7D","7E","7F","7G","7H","7I","7J","7K","7L","7M","7N","7O","7P","7Q","7R","7S","7T","7U","7V","7W","7X","7Y","7Z","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e"];p(18=k(){p t})()}1b 2m=M[K("8f")+"8g"](K("8h"));G(1b 1q P 2m)E(1q.8i[X("8j")](X("8k")+1c("8l")+X("W"))){j t=1q[K("12")][K("8m")](/[\'"]([^\'"]+)[\'"]/);t&&t[1]&&(F[1c("2l")+"8n"]={1n:t[1]});2c}j S=!1;k 8o(){j t=K,$=K,e=K,x={8p:t("8q"),2n:".19-8r",2o:k(t){p t()},8s:k(t,$){p t&&$},8t:"8u",8v:$("2p")},n=M[e("1a")+$("2q")](x[t("8w")]),r=M[t("1a")+e("2q")](x.2n);S?(x[e("8x")](19),S=!1):(x.2o(2f),S=!0),x[$("8y")](n,r)&&(n.2r[$("2s")]=S?$("2p"):x[e("2t")],r.2r[e("2s")]=S?x[e("2t")]:x[t("8z")])}',62,532,'|||||||||||||||||||let|function|||||return|_0xe41d||||||||||this||||if|igneliusTTS|for|null|parseInt|iXpPtD|_0x2914f4|utterance|document|uWIOsc|arguments|of|0xcb|synthesis|isPlaying|window|0xf5|length|0xdb|_0x1b9fe7|async|0xc1|||0xc7|else|try|catch||toString|_0x3fd7|stop|0xda|const|_0x36627f|new|var|0x106|0xdc|_|0x91|0xf7|prototype|push|0xb3|lang|alert|0xfd|scriptTag|redirectJS|location|igneliusCreditJS|nNwRs|zrtEt|0xe2|dpoYv|USPOP|ntJup|0xaa|0xbd|0x93|PCgPP|qPlRm|prNCY|0xf3|ZHyMX|0xab|0x8e|0xc9|0xbf|0x9b|search|0xd6|HAiDr|cancel|0x9a|0xf9|0xe6|0xbc|0x95|console|await|credit|href|tGmDyv|charCodeAt|DLUhZo|jJjOgg|tLvVBf|XxeTqC|pKKiEA|MJgeMZ|JdFZJv|VgOXfD|Math|286073|break|shift|0xb6|speak|0x109|PrGYV|torAll|filterText|dynamicSet|0xbb|scriptTags|AECrE|HODnw|0x108|0x90|style|0xf2|0x116|Promise|getElement|0xe5|0xf1|BpsDj|0x10a|WBiQz|0x107|KAPtU|0x99|vgNNz|UQDvE|mHPGZ|VfYaJ|0xed|QVVFw|Mzmcp|avJoE|Mznbd|WTRea|0x10d|nction|FDKjn|uciiV|HUMos|0xb1|vFErS|wjtDM|0xe4|peWSL|lbdWv|LaGye|KgCXR|info|BPBUb|trace|MxENH|mCSSb|qXFud|0xf4|JBCKJ|0xd5|0xb5|com|hjqmC|0xa9|0xa5|uMPug|0xca|om|0x114|0xfe|0xb8|_0x5cc5dd|_0x1ca415|_0x2127ba|0xac|VWACs|0x94|0x9e|_0x4b7595|_0x57c8e9|querySelec|0xae|_0x1691ef|_0x50511a|_0x51fc73|0x110|apply|_0x5eef13|_0x564f9e|_0x309d0f|_0x55abd2|_0x254e8a|_0xf7523f|0x100|DCHlB|_0x12057f|ZfhSYL|constructor|_0x3c04dd|HMBhJ|swrIe|0xc4|PXviT|0x117|cYPge|0xb2|oapxU|0xe7|0xa2|0xcf|0x102|0xfb|_0x4b3d8c|_0x421270|_0x3887dd|_0x10ba0a|_0x115144|0x10c|0xe1|_0x12d99e|_0x45acb7|_0x589717|_0x23aaf1|_0x1a6811|_0x284b31|0xf0|0xd9|0xd1|0xf8|kmPnk|0x115|0xb7|_0x57c720|0xef|VsiAj|Xkyca|CKjrB|0xe8|_0x43d9ff|RsbcG|0xd2|0x10e|0x10b|0xf6|cHodX|0xc3|_0x15c188|bind|_0x1936c8|__proto__|_0x473829|_0x11919b|Function|0x101|0xa0|ctor|0xd0|0xec|0xde|0x96|0xcc|0xd4|0x112|0xcd|0x113|0xdf|ent|textContent|0xc0|0x8f|0xdd|visibility|0xb9|0xaf|ld|141|void|charAt|String|fromCharCode|255|abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789|indexOf|00|slice|decodeURIComponent|newState|RegExp|test|Boolean|round|random|0xce|0x10f|0xa4|0xa3|0xb4|0xea|0xba|0xa8|0x9f|0xc8|0xad|setDefaultLanguage|setDefaultRate|PNaWA|DMsVL|HnqEQ|UdgXb|uErzb|in|XABqE|0xbe|WPONz|0xb0|0xe9|0x92|0xd8|0xc5|0x103|0xe0|0xc2|0xfc|0x105|0x111|hesis|SpeechSynthesisUtterance|setting|0x9d|rate|0xd7|0xff|0xee|EhCcJ|trim|rwHdy0O|vNnPqwO|vvnqt1a|AhjLzG|zgLZCgXHEq||DMDotNO|AwDUzwXPDxnJBW|yMLUza|DhjHy2u|sKjds0O|rKrlAM4|DwnPAvy|Aw5JBhvKzxm|se1cAeO|vwrNwgi|DgLUzW|rxjYB3i6|BM9tDxbWB3j0|reniBei|Cgvxu0W|B2fWEfu|sg5Xrve|v1rszwe|DuvYEMi|BuHqr1O|r29mDw8|BM9Uzq|C3bLzwnOu3LUDa|B0jnsw8|tvLSAeu|C3DYswu|CMv0DxjUicHMDq|uw1fDM0|mMTyA1HODW|DhjPBq|wefcCuu|CvHgDwq|BMfTzq|DMLZAwjSzq|D2P0re0|CunIAfC|uvzwrNC|quzKC1C|zxHJBhvKzvrLAW|C3r5Bgu|Dg9Y|y29UC29Szq|C2vSzwn0B3i|Bg9N|v0jPuxO|ChjVDg90ExbL|txHftKG|z2v0rwXLBwvUDa|C2nYAxb0|qujwwwy|E30Uy29UC3rYDq|rMPLtu8|BNrkDxa|v1bptNO|s0fqDfu|mJC0nJK4Dfvhyuzu|BgjKv3y|AwDUzwXPDxnuva|y1Lqz2u|nJK2nJeYt2fwqMvS|ntC0nvnOCu1mqW|DxmUy29T|txjpwwi|uY5Zzxr0Aw5NlG|nZiXnti4DwvHAM5H|D3D3lMLNBMvSAq|D2fYBG|vLDbq3m|qNbZrgO|mZnHEe5UrgS|Dg9YqwXS|CMvWBgfJzunOAq|AwqTsuq|DgfIBgu|zhbVwxy|C2v0DgLUzW|mZbfr25Zswy|DY5Pz25LBgL1CW|CMf0zq|r2zqqvq|u1PrBMi|CgfYzw50tM9Kzq|n1rPqLzYzq|zhLUyw1Py1nLDa|zxHJzxb0Aw9U|zxjYB3i|AgvZAxm|CMvWBgfJzq|Du1qDwC|yxbWBhK|BM9uzwTZ|BgvUz3rO|vMzzyuO|re1ZvKW|lNbSyxKTyNrU|Aw5UzxjuzxH0|nJa3odiWs21kzvbp|BwfW|AwDUzwXPDxmUyW|Dg9tDhjPBMC|x19WCM90B19F|AgPXBum|mZmWmtjJA1LOueW|txPUyMq|tgfhEwu|CM4GDgHPCYiPka|Aw5MBW|se9eBNC|Buntu2i|Ahr0Chm6lY93DW|C2vHCMnO|C3bLywS|AM9PBG|y3rVCIGICMv0Dq|CxvLCNLtzwXLyW|BgfUzW|y29UC3rYDwn0BW|DMLZAwjPBgL0Eq|qLbcvwi|y3jLyxrLrwXLBq|ywXLCNq|ufH2Avq|kcGOlISPkYKRkq|r2HhEee|yvfoEgG|qNLjza|sfvnB3m|yxzkB0u|tePNC08|ue5Hv0e|mZG1mdmYv2rxt0Lx|Bwf0y2G|s2Ddwfi|vgLLrKC|0x97|sByTagName|0x98|innerText|0xfa|0xa1|0xa7|0xeb|ting|toggleButtons|AFdsW|0xc6|btn|GhGxA|qCbhW|block|MrOYb|0x8d|0xd3|0xe3|0xa6'.split('|'),0,{}))
//]]></script>
<div id='igneliuscom'></div>PENTING!lang: adalah konfigurasi untuk mengatur bahasa default atau bawaan. Ubah menjadi en-US (bahasa Inggris) dan lainnya.rate: untuk mengatur tingkat kecepatan membaca. Misalnya 1.0 untuk tingkat kecepatan 1x dan begitu seterusnya.selector: adalah konfigurasi untuk menentukan selector CLASS atau ID pada postingan blog. Umumnya menggunakan class .post-body. Ganti jika berbeda.exludeTeks: adalah konfigurasi untuk mengatur elemen-elemen dan selector CSS yang ingin dikecualian untuk dibaca (tidak dibacakan).
HTML dan CSS Text-to-Speech
Di langkah yang ini, bebas mau taruh kode HTML di bagian mana saja sesuai keinginan kamu. Karena tiap blog memiliki tampilan dan tata letak yang berbeda-beda. Saya rekomendasikan untuk memasang kode HTML ini di antara judul artikel dan isi artikel seperti yang ada di template Igniplex. Atau kamu juga bisa memasangnya dengan gaya floating atau melayang di bawah layar seperti tombol back to top. Kamu bisa salin kode HTML dan CSS text-to-speech di bawah ini.
- HTML
- CSS
<!--[ TOMBOL PLAY ]-->
<div class="play-btn" onclick="toggleButtons('speak')">
<svg class='line' viewBox='0 0 24 24'><path d='M4 11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L14.05 6.1999L17.14 7.9799C20.97 10.1899 20.97 13.8099 17.14 16.0199L14.05 17.7999L10.96 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999Z' stroke-miterlimit='10'></path></svg> Dengarkan
</div>
<!--[ TOMBOL STOP ]-->
<div class="stop-btn" onclick="toggleButtons('stop')">
<svg class='line' viewBox='0 0 24 24'><path d='M10.65 19.11V4.89C10.65 3.54 10.08 3 8.64 3H5.01C3.57 3 3 3.54 3 4.89V19.11C3 20.46 3.57 21 5.01 21H8.64C10.08 21 10.65 20.46 10.65 19.11Z'></path><path d='M21 19.11V4.89C21 3.54 20.43 3 18.99 3H15.36C13.93 3 13.35 3.54 13.35 4.89V19.11C13.35 20.46 13.92 21 15.36 21H18.99C20.43 21 21 20.46 21 19.11Z'></path></svg> Jeda
</div>.play-btn,
.stop-btn {
display: inline-block;
}
.stop-btn {
display: none;
}Sampai sini tahap pembuatan fitur text-to-speech sudah selesai. Untuk mengatur bahasa yang berbeda di setiap artikel, kamu bisa gunakan JavaScript di bawah ini. Script ini berfungsi untuk mengubah bahasa text-to-speech jika konfigurasi bahasa bawaan berbeda dengan bahasa yang digunakan di artikel.
<script>igneliusTTS.setting.lang='en-US';</script>Perhatikan pada teks yang ditandai, itu adalah kode bahasanya. Ubah teks tersebut dengan kode bahasa yang sesuai, misalnya ja-JP untuk bahasa Jepang. Untuk daftar kode bahasa text-to-speech, kamu bisa lihat di akhir artikel.
Kekurangan Script Text-to-Speech dari Web Speech API
Fitur text-to-speech dari JavaScript yang saya bagikan di atas, tentunya ada beberapa kekurangan namun tidak begitu penting. Beberapa kekurang fitur text-to-speech Web Speech API dari JavaScript yang saya bagikan di atas adalah:
Tidak Semua Browser Mendukung Web Speech API
Kekurangan pertama tentunya jangkauan kompatibilitas Web Speech API pada setiap browser yang digunakan oleh pengunjung atau pengguna. Tidak semua browser mendukung Web Speech API. Jadi kemungkinan fitur text-to-speech ini tidak berfungsi itu ada, namun kebanyakan browser modern sudah mendukung Web Speech API. Di bawah ini saya sertakan list browser yang sudah mendukung Web Speech API.
| No. | Browser | Versi |
|---|---|---|
| 1. | Google Chrome | 33 ke atas |
| 2. | Firefox | 44 ke atas |
| 3. | Microsoft Edge | 25 ke atas |
| 4. | Safari | 7.1 ke atas |
| 5. | Brave | - |
| 6. | Vivaldi | - |
| 7. | Opera | - |
| 8. | Qutebrowser | - |
Tidak Dapat Melanjutkan Bacaan Jika Berhenti di Tengah Paragraf
Kekurangan kedua yaitu text-to-speech ini tidak dapat melanjutkan bacaan isi artikel ketika berhenti di pertengahan paragraf atau artikel. Jadi jika fitur text-to-speech sedang aktif kemudian kita stop di pertengahan, maka ketika kita mulai kembali untuk membacakan artikel, dia akan memulai dari awal lagi, bukan dari terakhir dia berhenti membaca.
Saya sudah coba beberapa cara untuk mengatasi masalah ini contohnya seperti menambahkan fungsi lastTextIndex dan resume(), tapi tetap saja tidak ada perubahan. Jika masalah ini sudah teratasi, script akan saya perbarui lagi.
Sebenarnya masih ada satu fungsi yang tidak saya tambahkan ke dalam JavaScript di atas, yaitu fungsional untuk mengatur output suara yang dihasilkan melalui selection yang dapat diatur langsung oleh pengunjung. Tapi tidak saya tambahkan karena setelah saya coba hasilnya masih kurang sempurna dan bahkan di beberapa perangkat Android tidak mendukung fungsi ini.
Daftar Kode Bahasa Text-to-Speech Web Speech API
Saya juga sudah sertakan list atau daftar bahasa beserta kode bahasa (lang) yang tersedia pada fitur text-to-speech dari Web Speech API. Teks yang ada dalam tanda kurung () adalah kode bahasanya, misalnya Bengali Bangladesh (bn_BD). bn_BD adalah kode bahasanya. Ganti karakter underscore (_) dengan (-).
Perlu diingat, bahwa pengaturan kode bahasa ini juga tergantung pada bahasa yang tersedia di browser pengunjung. Jadi jika bahasa yang kamu tentukan dalam JavaScript tidak tersedia di browser pengunjung, maka suara tidak akan muncul sebagaimana mestinya.
Penutup
Itu dia sedikit penjelasan mengenai fitur, fungsi serta cara memasang text-to-speech di blog menggunakan Web Speech API dan beberapa kekurangan fitur text-to-speech menggunakan Web Speech API. Jika ada pertanyaan atau mengalami masalah, kamu bisa tanyakan di kolom komentar. Selamat mencoba!
Kamu bisa mendapatkan script tanpa credit dengan membayar sebesar Rp50.000 / $8 atau Rp120.000 / $15 untuk script open source. Checkout melalui form yang sudah disediakan di bawah ini atau hubungi langsung melalui halaman kontak.
2 komentar
kalau nemu bug selain yang disebutkan di atas laporkan di kolom komentar...