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


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

  1. Login ke Blogger, masuk ke Tema, klik EDIT HTML. (Untuk Tema blogger yang baru EDIT HTML Terletak di dalam icon titik tiga vertikal kanan).
  2. Kita akan mencari ID dari input search / Kotak Pencarian.
  3. ~ 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.
  4. Kemudian kita akan memasang icon micnya.
  5. ~ 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>
    
  6. Kita tambahkan Code CSS dibawah ini, Letakkan di ATAS </style> atau ]]></b:skin>
  7. 
    #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;}
    
  8. Tambahkan Code Javascript dibawah, Letakkan di ATAS </body>
  9. 
     <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.
  10. 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

Postingan Terkait

7 comments

  1. Jejak dulu dan salam kenal

    ReplyDelete
  2. Mantap gan. Kapan-kapan bagi template ya 😁. Keren templatenya. 👍

    ReplyDelete
  3. JS nya banyak juga ya. Bikin berat blog ga?

    ReplyDelete
    Replies
    1. tidak gan, Namun kedepan untuk update selanjutnya akan saya ringkas lagi scriptnya.. :D

      Delete
  4. Idfrom maksudnya apa ya min?

    ReplyDelete
    Replies
    1. Yang seperti ini gan

      ...
      <form id="id_form_agan" ...>
      ...
      ...
      ...
      </form>
      ...

      Jika TIDAK ADA silakan di tambahkan
      id='search-form'

      Delete

Post a Comment