কিভাবে Wapkiz সাইটে Voice সার্চ যুক্ত করবেন

বন্ধুরা সবাই কেমন আছেন। আশা করি ভালো আছেন। আশা করি পোস্টটি পড়ার আপনাদের আরো ভালো লাগবে। তো চলো শুরু করা যাক।->>>>

নিচের কোডটি আপনার সাইটের Meta Header এ বসিয়ে দিন।

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

এখন নিচের কোডটি আপনার সাইটের css এ বসিয়ে দিন

.searchContainer {display: inline-flex; flex: 1 1 300px; position: relative; border: 1px solid #ccc; border-radius: 5px; overflow: hidden;} .searchIcon {padding: 0.5rem;} .searchBox {border: 0; padding: 0.5rem 0.5rem 0.5rem 0; flex: 1;} .searchButton {background: #538AC5; border: 0; color: white; padding: 0.6rem; border-radius: 0;}

এখন নিচের javascript কোডটি আপনার সাইটের যেখানে সার্চ box যুক্ত করবেন সেখানে বসিয় দিন।

<script> function startDictation() { if (window.hasOwnProperty("webkitSpeechRecognition")) { var recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = "En-IN"; recognition.start(); recognition.onresult = function(e) { document.getElementById("transcriptt").value = e.results[0][0].transcript; recognition.stop(); document.getElementById("voicesearch") }; recognition.onerror = function(e) { recognition.stop(); } } }</script>

সবশেষে নিচের html সার্চ box কোডটি সাইটে বসিয়ে দিন।

<div class="searchContainer"><form id="voicesearch" method="get" action="/site-search.html"> <i onclick="startDictation()" class="fa fa-microphone searchIcon"></i> <input class="searchBox" type="search" name="to-search" id="transcriptt" value=":to-search:" placeholder="Search..."> <input type="submit" value="Search" class="searchButton"></form></div>

তো এখন আপনার সাইটের voice সার্চ box যুক্ত করা শেষ।