🔎 Search bằng giọng nói📢

Trình duyệt hiện nay hỗ trợ Speech Recognition API (Chrome, Edge khá ổn). 

Có thể thêm nút 🎤 cạnh ô search, khi bấm sẽ tự chuyển giọng nói → text.

Ví dụ sửa HTML như này:

<nav>
    <!-- xử lý JS dòng 227x -->
    <a class="nav-link" data-widget="navbar-search" href="#" role="button">
        <i class="fas fa-search"></i>
    </a>

    <div class="navbar-search-block navbar-dark" style="display:none;">
        <form class="form-inline">

            <div class="input-group input-group-sm">

                <input
                    class="form-control form-control-navbar"
                    id="navbarSearchInput"
                    type="search"
                    placeholder="🔍 Search hoặc 🎤 nói..."
                    autocomplete="off">

                <div id="navbarSuggest" class="navbar-suggest"></div>

                <div class="input-group-append">

                    <!-- Nút micro -->
                    <button
                        class="btn btn-navbar"
                        type="button"
                        id="btnVoice">

                        <i class="fas fa-microphone"></i>
                    </button>

                    <!-- Search -->
                    <button class="btn btn-navbar" type="submit">
                        <i class="fas fa-search"></i>
                    </button>

                    <!-- Close -->
                    <button class="btn btn-navbar"
                            type="button"
                            data-widget="navbar-search">

                        <i class="fas fa-times"></i>

                    </button>

                </div>

            </div>

        </form>
    </div>
</nav>

Thêm JS:

const btnVoice = document.getElementById("btnVoice");
const input = document.getElementById("navbarSearchInput");

if ('webkitSpeechRecognition' in window ||
    'SpeechRecognition' in window) {

    const SpeechRecognition =
        window.SpeechRecognition ||
        window.webkitSpeechRecognition;

    const recognition = new SpeechRecognition();

    recognition.lang = "vi-VN"; // tiếng Việt
    recognition.continuous = false;
    recognition.interimResults = false;

    btnVoice.addEventListener("click", () => {

        recognition.start();

        btnVoice.innerHTML =
            '<i class="fas fa-microphone-slash"></i>';

    });

    recognition.onresult = function(event){

        let text =
            event.results[0][0].transcript;

        input.value = text;

        // trigger gợi ý
        input.dispatchEvent(
            new Event('input')
        );

    };

    recognition.onend = function(){

        btnVoice.innerHTML =
            '<i class="fas fa-microphone"></i>';

    };

} else {

    alert("Trình duyệt không hỗ trợ voice");

}

Kết quả:

👤 User bấm:

🎤 → nói:

"giá vàng hôm nay"

Ô search tự thành:

giá vàng hôm nay

và code suggest/search cũ của Tiến sĩ M vẫn chạy.

---

Nếu muốn đẹp hơn:

#btnVoice{
    transition:.2s;
}

#btnVoice:hover{
    color:#dc3545;
    transform:scale(1.15);
}

#btnVoice.listening{
    color:red;
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.2)}
    100%{transform:scale(1)}
}

Micro sẽ nhấp nháy khi đang nghe 🎤🔴.

Lưu ý:

• Chạy tốt trên Chrome / Edge

• Cần HTTPS nếu deploy (localhost vẫn OK)

• Safari hỗ trợ kém hơn

• Tiếng Việt nhận diện khá ổn nhưng dấu đôi khi sai

🤖✨ Made by AI • Voice-enabled search edition 🎤⚡