add-voice-function

Add Voice Functionality for a Flask Chatbot

In this post you’ll learn how to upgrade your Flask-based chatbot to support voice input and voice output, with support for multiple languages like English, Swedish, Turkish, and Farsi.

In this post we are going to implement Voice functionality in chatbot.

This means when user press to Speak button and speak then the response is coming up first Voice and then text.

Files Modified

We’ll update the following files:

  1. chatbot.py — Flask backend (HTML/JS is embedded here)

  2. (Optionally: chat.html if your frontend is separate — skip if inline)

1. Update Flask @app.route("/") — UI + JavaScript Logic

Replace your existing @app.route("/") in chatbot.py with this complete version:

from flask import Flask, request, make_response
import uuid

@app.route("/", methods=["GET"])
def home():
    try:
        session_id = request.cookies.get("session_id") or str(uuid.uuid4())
        html = f"""
        <html>
        <head>
            <style>
                body {{ font-family: Arial; max-width: 600px; margin: auto; padding: 20px; }}
                input[type="text"] {{ width: 80%; padding: 10px; }}
                button {{ padding: 10px 15px; margin-top: 10px; }}
            </style>
        </head>
        <body>
            <h2>Chatbot (Voice + Text)</h2>
            <form id="chat-form">
                <input type="text" id="message" name="message" placeholder="Type your message..." required>
                <button type="submit">Send</button>
                <button type="button" onclick="startVoiceInput()">🎤 Speak</button>
                <select id="lang-select">
                    <option value="en-US">English</option>
                    <option value="fa-IR">Farsi</option>
                    <option value="sv-SE">Swedish</option>
                    <option value="tr-TR">Turkish</option>
                </select>
            </form>
            <p id="bot-response"></p>

            <form action="/history" method="get">
                <button type="submit">Show History</button>
            </form>

            <script>
                let isVoice = false;

                document.getElementById('chat-form').addEventListener('submit', async function(e) {{
                    e.preventDefault();
                    const user_input = document.getElementById('message').value;
                    const session_id = getCookie('session_id');
                    const lang = document.getElementById('lang-select').value;

                    const response = await fetch('/chat', {{
                        method: 'POST',
                        headers: {{ 'Content-Type': 'application/json' }},
                        body: JSON.stringify({{ session_id, user_input }})
                    }});

                    const data = await response.json();

                    if (isVoice) {{
                        speakText(data.response, lang, () => {{
                            document.getElementById('bot-response').innerText = data.response;
                            isVoice = false;
                        }});
                    }} else {{
                        document.getElementById('bot-response').innerText = data.response;
                    }}
                }});

                function startVoiceInput() {{
                    isVoice = true;
                    const lang = document.getElementById('lang-select').value;
                    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
                    recognition.lang = lang;
                    recognition.interimResults = false;
                    recognition.maxAlternatives = 1;

                    recognition.start();

                    recognition.onresult = function(event) {{
                        const voiceInput = event.results[0][0].transcript;
                        document.getElementById('message').value = voiceInput;
                        document.getElementById('chat-form').dispatchEvent(new Event('submit'));
                    }};
                }}

                function speakText(text, lang, callback) {{
                    const synth = window.speechSynthesis;
                    let voices = synth.getVoices();

                    if (!voices.length) {{
                        window.speechSynthesis.onvoiceschanged = () => speakText(text, lang, callback);
                        return;
                    }}

                    let voice = voices.find(v => v.lang === lang);
                    if (!voice) {{
                        voice = voices.find(v => v.lang.startsWith(lang.split('-')[0])) || voices[0];
                    }}

                    const utterance = new SpeechSynthesisUtterance(text);
                    utterance.voice = voice;
                    utterance.lang = lang;
                    utterance.onend = callback;
                    synth.speak(utterance);
                }}

                function getCookie(name) {{
                    let value = "; " + document.cookie;
                    let parts = value.split("; " + name + "=");
                    if (parts.length === 2) return parts.pop().split(";").shift();
                }}
            </script>
        </body>
        </html>
        """
        response = make_response(html)
        response.set_cookie("session_id", session_id)
        return response
    except Exception as e:
        print(f"Error in home(): {e}")
        return "Something went wrong", 500

2. Update Your /chat Endpoint

Make sure your /chat route returns JSON, like this:

# === Chat Handler ===
from flask import jsonify

@app.route("/chat", methods=["POST"])
def chat():
    data = request.get_json()
    session_id = data.get("session_id") or str(uuid.uuid4())
    user_input = data.get("user_input", "")

    if not user_input:
        return jsonify({"response": "No input received."})

    # Your chatbot logic
    bot_reply = chatbot_response(session_id, user_input)

    return jsonify({"response": bot_reply})

Language Support Notes

  • The dropdown lets users pick a language.

  • Google Chrome and some other browsers don’t support Farsi voice synthesis out of the box.

  • English, Turkish, and Swedish, Farsi work well.

  • You may need to test on Windows with Edge or mobile Chrome for best multilingual voice.

The new UI shall be as follow:

add-voice-function-1-3.png

✅ Summary

You’ve added full voice support to your chatbot with:

  • 🎙 Voice recognition (SpeechRecognition)

  • 🔊 Voice synthesis (SpeechSynthesis)

  • 🌍 Language selector

  • 📦 Pure HTML + JS + Flask (no external frontend frameworks)

 

All Code is on My Github

Conclusion

In this post we have gone through adding functionality to chatbot so that user can first choose a supported language and then

  1.  Writes text and press to Send button then chatbot response with text
  2. Press to Speak button then the response come up first with voice and after that with text (with selected language.

This post is part of  AI (Artificial Intelligence) step by step

Back to home page