Beranda › Blogger › Rombak Web

Cara Membuat Search by Voice (Pencarian dengan Suara) di Blog

Wahyu Achmad Oktober 18, 2019 11 komentar

Cara membuat Search by Voice atau pencarian dengan suara (Speech Recognition) di Blog ala Mediaachmad. Pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat Search by voice (Speech Recognition) di blog. Search by voice adalah cara pencarian yang di lakukan dengan suara tanpa harus mengetik di form pencarian.

Fitur ini mungkin agak jarang ada di blog dan jarang ada tutorial cara membuatnya terutama untuk di Blogger, mungkin untuk wordpress sudah ada pluginnya, Namun Plugin tersebut belum support untuk Bahasa Indonesia, atau mungkin sudah ada yang support Bahasa Indonesia? Bisa komentar dibawah untuk nama pluginnya.

Namun untuk fitur Search by Voice yang saya buat Sudah Support Bahasa Indonesia, dan teman - teman bisa setting bahasa sesuai dengan keinginan kalian.

Untuk kekurangan dari fitur ini yaitu Kurang support di beberapa browser karena menggunakan Web API Speech Recognition. Fitur itu Aktif tergantung Browser Pengunjung web. Jika menggunakan Google Chrome, pastinya support. Untuk browser yang lain Kalian bisa cek table dibawah ini.

Fitur ini juga akan muncul notifikasi / keterangan jika browser tidak support dengan Fitur Speech Recognition. Simak dibawah ini.

Mungkin teman - teman ada beberapa yang tidak suka dengan fitur ini, karena mungkin terlalu berat, namun script nya sudah saya optimalkan sebaik mungkin. Fitur ini juga masih dalam pengembangan, tentu nantinya akan update berikutnya. Pengotimalan dan meminimalkan script akan terus saya kerjakan. Jadi simak terus website mediaachmad untuk update berikutnya.

Fitur ini akan langsung pakai dan tertata rapi untuk Template Blogger Viomagz. Untuk template yang lain kalian bisa sesuaikan sendiri untuk peletakan icon micnya. Untuk pengguna wordpress bisa coba juga untuk fitur ini, dan tentunya bisa sesuikan sendiri untuk peletakan icon micnya.

Oke langsung saja silakan simak baik - baik tutorial berikut ini.

Untuk tutorial yang admin buat untuk pemasangan di blogger.

Cara membuat Search by Voice (Pencarian dengan Suara) di Blog

Login ke Blogger, masuk ke Tema, klik EDIT HTML. (Untuk Tema blogger yang baru EDIT HTML Terletak di dalam icon titik tiga vertikal kanan).
Kita akan mencari ID dari input search / Kotak Pencarian.

~ Untuk template lain bisa sesuaikan sendiri untuk pencariannya (ingat - ingat ID tersebut).
~ Untuk template viomagz, ID belom ditambahkan oleh Mas Sugeng jadi kalian bisa tambahkan, silakan cari <div id='searchfs'> . lalu tambahkan code property dibawah ini ke dalam input

Kodenya

id='caribicara' aria-label='caribicara'

Sebelum


<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
  <form action='/search' id='search-form' method='get'>
    <b:switch var='data:blog.locale'><b:case value='id'/>
     <input name='q' placeholder='ketik katakunci' type='search' value=''/>
    <b:default/>
      <input name='q' placeholder='type to search' type='search' value=''/>
    </b:switch>
 <input name='max-results' type='hidden' value='8'/>
  </form>
</div>

Sesudah


<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
  <form action='/search' id='search-form' method='get'>
    <b:switch var='data:blog.locale'><b:case value='id'/>
     <input aria-label='caribicara' id='caribicara' name='q' placeholder='ketik katakunci' type='search' value=''/>
    <b:default/>
      <input aria-label='caribicara' id='caribicara' name='q' placeholder='type to search' type='search' value=''/>
    </b:switch>
 <input name='max-results' type='hidden' value='8'/>
  </form>
</div>

Kenapa ada 2 inputnya di atas?
Karena input yang satu untuk settingan bahasa Indonesia, dan satunya lagi untuk settingan bahasa Inggris / bahasa lain. Jadi, untuk template lain cuma ada 1 gapapa.

Kemudian kita akan memasang icon micnya.

~ Untuk template lain bisa sesuaikan sendiri untuk peletakan iconnya.
~ Untuk template viomagz. Silakan kalian cari <div id='searchfs'> . tambahkan Code dibawah ini di ATAS tutup divnya.

Kodenya


 <label class='cari' id='bicara' onclick='bicara()'><svg viewBox='0 0 24 24'>
<path d='M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z' fill='#e3389c' id='micwarna'/>
<path d='M19,11C19,12.19 18.66,13.3 18.1,14.28L16.87,13.05C17.14,12.43 17.3,11.74 17.3,11H19M15,11.16L9,5.18V5A3,3 0 0,1 12,2A3,3 0 0,1 15,5V11L15,11.16M4.27,3L21,19.73L19.73,21L15.54,16.81C14.77,17.27 13.91,17.58 13,17.72V21H11V17.72C7.72,17.23 5,14.41 5,11H6.7C6.7,14 9.24,16.1 12,16.1C12.81,16.1 13.6,15.91 14.31,15.58L12.65,13.92L12,14A3,3 0 0,1 9,11V10.28L3,4.27L4.27,3Z' fill='#676767' id='micoff'/>
</svg><span id='sprec'/></label>
<p id='cariinfo'/>

Sebelum


 <div id='searchfs'>
<button class='close' type='button'>&#215;</button>
  <form action='/search' id='search-form' method='get'>
    <b:switch var='data:blog.locale'><b:case value='id'/>
     <input aria-label='caribicara' id='caribicara' name='q' placeholder='ketik katakunci' type='search' value=''/>
    <b:default/>
      <input aria-label='caribicara' id='caribicara' name='q' placeholder='type to search' type='search' value=''/>
    </b:switch>
 <input name='max-results' type='hidden' value='8'/>
  </form>
</div>

Sesudah


 <div id='searchfs'>
<button class='close' type='button'>&#215;</button>
  <form action='/search' id='search-form' method='get'>
    <b:switch var='data:blog.locale'><b:case value='id'/>
     <input aria-label='caribicara' id='caribicara' name='q' placeholder='ketik katakunci' type='search' value=''/>
    <b:default/>
      <input aria-label='caribicara' id='caribicara' name='q' placeholder='type to search' type='search' value=''/>
    </b:switch>
 <input name='max-results' type='hidden' value='8'/>
  </form>
<label class='cari' id='bicara' onclick='bicara()'><svg viewBox='0 0 24 24'>
<path d='M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z' fill='#e3389c' id='micwarna'/>
<path d='M19,11C19,12.19 18.66,13.3 18.1,14.28L16.87,13.05C17.14,12.43 17.3,11.74 17.3,11H19M15,11.16L9,5.18V5A3,3 0 0,1 12,2A3,3 0 0,1 15,5V11L15,11.16M4.27,3L21,19.73L19.73,21L15.54,16.81C14.77,17.27 13.91,17.58 13,17.72V21H11V17.72C7.72,17.23 5,14.41 5,11H6.7C6.7,14 9.24,16.1 12,16.1C12.81,16.1 13.6,15.91 14.31,15.58L12.65,13.92L12,14A3,3 0 0,1 9,11V10.28L3,4.27L4.27,3Z' fill='#676767' id='micoff'/>
</svg><span id='sprec'/></label>
<p id='cariinfo'/>
</div>

Kita tambahkan Code CSS dibawah ini, Letakkan di ATAS </style> atau ]]></b:skin>


#searchfs > label.cari > span#sprec {pointer-events: none;transition: transform 0.3s ease-in-out 0.3s;transform: scale(0);color: #676767;position: absolute;top: -34%;left: -30%;word-wrap: break-word;margin: 0 auto;height: 95px;width: 95px;z-index: -50;text-align: center;border-radius: 90px;background: #ff28a552;}
#searchfs > label.cari{cursor: pointer;display: block;padding: 8px;background-position: center;transition: all .5s linear;color: #676767;box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);position: relative;top: 55%;word-wrap: break-word;margin: 0 auto;width: 43px;text-align: center;border-radius: 90px;background: #fcfcfc;}
label.cari svg {width: 40px;height: 40px;display: inline-block;vertical-align: -5px;background-repeat: no-repeat!important;content: '';}
#micoff {display: none;}

Tambahkan Code Javascript dibawah, Letakkan di ATAS </body>


 <script type="text/javascript">
 //<![CDATA[
// Search By Voice create by Mediaachmad | Speech Recognition
var idkotaksearch = "caribicara"; // Ganti dengan ID input search / Kotak Pencarian.
var idformsearch = "search-form"; // Silakan kalian ganti dengan ID Form Search Kalian Contoh : <form id="idform" ... />
var bahasa = "id"; // Ganti Code bahasa sesuai keingan kalian 'ID' merupakan code bahasa indonesia
var wmcari = "Mendengarkan..."; // Watermark atau Placeholder input form
var warnarec = "#e3389c"; // warna icon mic
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}('1 s=[\'R=\',\'S=\',\'T\',\'U=\',\'V\',\'W==\',\'X=\',\'Y\',\'Z==\',\'10==\',\'11=\',\'12==\',\'13=\',\'14=\',\'15==\',\'16\',\'17==\',\'18==\',\'19=\',\'1a\',\'1b\',\'1c=\',\'1d=\',\'1e=\',\'1f==\',\'1g==\',\'1h=\',\'1i=\'];(2(b,c){1 d=2(a){1j(--a){b[\'1k\'](b[\'1l\']())}};d(++c)}(s,1m));1 0=2(g,h){g=g-3;1 i=s[g];8(0[\'F\']===G){(2(){1 d;1n{1 e=1o(\'k\\l(2()\\l\'+\'{}.1p(\\1q\\1r\\1s)(\\l)\'+\');\');d=e()}1t(1u){d=t}1 f=\'1v+/=\';d[\'u\']||(d[\'u\']=2(a){1 b=H(a)[\'1w\'](/=+$/,\'\');I(1 c=3,m,5,J=3,v=\'\';5=b[\'1x\'](J++);~5&&(m=c%9?m*1y+5:5,c++%9)?v+=H[\'1z\'](1A&m>>(-w*c&K)):3){5=f[\'1B\'](5)}k v})}());0[\'L\']=2(a){1 b=u(a);1 c=[];I(1 d=3,M=b[\'1C\'];d<M;d++){c+=\'%\'+(\'1D\'+b[\'1E\'](d)[\'1F\'](x))[\'1G\'](-w)}k 1H(c)};0[\'y\']={};0[\'F\']=!![]}1 j=0[\'y\'][g];8(j===G){i=0[\'L\'](i);0[\'y\'][g]=i}z{i=j}k i};1 A=t[\'A\']||t[0(\'3\')];1 n=6[0(\'7\')](1I);1 o=6[0(\'7\')](0(\'w\'))[\'1J\'];1 p=6[0(\'7\')](0(\'1K\'))[0(\'9\')];1 B=6[0(\'7\')](\'B\')[0(\'9\')];1 q=6[\'1L\'](\'q\');8(A){q[0(\'1M\')]=\'1N\\1O\\1P\\1Q\\1R\\1S\';2 1T(){1 d=1U 1V();d[0(\'K\')]=1W;d[0(\'1X\')]=!![];d[0(\'1Y\')]=7;1 e=\'\';1 f=\'\';1 g=\'\';1 h=\'\';d[\'1Z\']=2(){n[\'20\']=21;o[0(\'N\')]=\'#O\';p[0(\'C\')]=P};d[0(\'22\')]=2(){o[0(\'N\')]=P;p[0(\'C\')]=0(\'23\');n[0(\'24\')]=\'25\\26\\27...\\28\\29\'};d[0(\'2a\')]=2(a){8(D[0(\'E\')][0(\'x\')]>3){r=D[0(\'E\')][D[0(\'E\')][0(\'x\')]-7];1 b=r[3][0(\'2b\')];1 c=r[3][0(\'2c\')];8(r[\'2d\']){e+=c;g+=b;n[0(\'2e\')]=g;6[\'2f\'][2g][0(\'2h\')]()}z{f=c;h+=b}}6[0(\'7\')](\'2i\')[0(\'9\')][0(\'2j\')]=0(\'2k\')+f+\'\\l+\\2l.4))\'};d[0(\'2m\')]()}}z{q[\'2n\']=0(\'2o\');p[0(\'C\')]=\'#O\';o[0(\'Q\')]=0(\'2p\');B[0(\'Q\')]=0(\'2q\')}',62,151,'_0x36a6|var|function|0x0||_0x4ca71a|document|0x1|if|0x4|||||||||||return|x20|_0x39e3c5|caribicara|micwarna|bicarabg|cariinfo|sonuc|_0x5f2f|window|atob|_0xb8e9e4|0x2|0x10|MjiZZe|else|SpeechRecognition|micoff|0xa|event|0xf|BhowAJ|undefined|String|for|_0x2cd0b2|0x6|xgGbNK|_0x2b01d2|0x9|ffffff|warnarec|0x19|Z2V0RWxlbWVudEJ5SWQ|bWljd2FybmE|YmljYXJh|c3R5bGU|aW5uZXJIVE1M|bGFuZw|aW50ZXJpbVJlc3VsdHM|bWF4QWx0ZXJuYXRpdmVz|ZmlsbA|YmFja2dyb3VuZA|b25lbmQ|I2ZmZmZmZg|cGxhY2Vob2xkZXI|b25yZXN1bHQ|cmVzdWx0cw|bGVuZ3Ro|dHJhbnNjcmlwdA|Y29uZmlkZW5jZQ|dmFsdWU|c3VibWl0|dHJhbnNmb3Jt|c2NhbGUoY2FsYyg|c3RhcnQ|QnJvd3NlciBBbmRhIFRpZGFrIG1lbmR1a3VuZyBTZWFyY2ggYnkgVm9pY2U|ZGlzcGxheQ|bm9uZQ|YmxvY2s|d2Via2l0U3BlZWNoUmVjb2duaXRpb24|while|push|shift|0x16b|try|Function|constructor|x22return|x20this|x22|catch|_0x5a2707|ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789|replace|charAt|0x40|fromCharCode|0xff|indexOf|length|00|charCodeAt|toString|slice|decodeURIComponent|idkotaksearch|style|0x3|getElementById|0x5|Browser|x20Anda|x20mendukung|x20Search|x20by|x20Voice|bicara|new|webkitSpeechRecognition|bahasa|0x7|0x8|onsoundstart|placeholder|wmcari|0xb|0xc|0xd|Suara|x20tidak|x20jelas|x20Coba|x20Lagi|0xe|0x11|0x12|isFinal|0x13|forms|idformsearch|0x14|sprec|0x15|0x16|x200|0x17|innerHTML|0x18|0x1a|0x1b'.split('|'),0,{}))
 //]]>
</script>

~ Untuk yang ditandai Ganti dengan ID input search / Kotak Pencarian. (yang kalian ingat – ingat tadi).
~ Untuk yang ditandai Ganti dengan ID Form Search Kalian. Contoh: <form id="idform" ... />
~ Untuk yang ditandai Ganti sesuai dengan keinginan kalian.
~ Untuk Code bahasa setiap negara kalian bisa cek disini.

Selesai dan lihat hasilnya.

Untuk Demo silakan klik icon search di website ini :D, Kanan Atas.

Jika terjadi masalah teman - teman bisa berkomentar dibawah. Saya akan bantu sebisa saya :D. Mungkin itu yang dapat saya sampaikan semoga dapat bermanfaat, Maaf jika ada salah. Sekian dan terima kasih.

Cara Membuat Search by Voice (Pencarian dengan Suara) di Blog