Wednesday, March 12, 2025

Flask endpoint to receive an audio recording and save to disk

To See All Articles About Technology: Index of Lessons in Technology

Create a flask endpoint that receives a post request from an HTML form to receive a recording and saves it to disk.
Provide the flask code and the associated HTML/JS


Here’s how you can build a Flask-based backend that receives an audio file from an HTML form and saves it to disk.

1️⃣ Flask Backend (app.py)

This Flask server will handle POST requests, receive the uploaded audio file, and save it locally.

python
from flask import Flask, request, render_template, jsonify
    import os
    
    app = Flask(__name__)
    
    # Ensure uploads directory exists
    UPLOAD_FOLDER = "uploads"
    os.makedirs(UPLOAD_FOLDER, exist_ok=True)
    
    @app.route("/")
    def index():
        return render_template("index.html")  # Serves the frontend
    
    @app.route("/upload", methods=["POST"])
    def upload_audio():
        if "audio" not in request.files:
            return jsonify({"error": "No file part"}), 400
    
        audio_file = request.files["audio"]
        if audio_file.filename == "":
            return jsonify({"error": "No selected file"}), 400
    
        save_path = os.path.join(UPLOAD_FOLDER, audio_file.filename)
        audio_file.save(save_path)
    
        return jsonify({"message": "File uploaded successfully", "file_path": save_path})
    
    if __name__ == "__main__":
        app.run(debug=True, port=5000)

2️⃣ Frontend (templates/index.html)

This page allows users to record audio and send it to the Flask backend.

html
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Audio Recorder</title>
    </head>
    <body>
        <h2>Record and Upload Audio</h2>
        <button id="start">Start Recording</button>
        <button id="stop" disabled>Stop Recording</button>
        <audio id="audioPlayback" controls></audio>
        <button id="upload" disabled>Upload</button>
        <p id="status"></p>
    
        <script>
            let mediaRecorder;
            let audioChunks = [];
    
            document.getElementById("start").addEventListener("click", async () => {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                
                mediaRecorder.ondataavailable = event => {
                    audioChunks.push(event.data);
                };
    
                mediaRecorder.onstop = async () => {
                    const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
                    document.getElementById("audioPlayback").src = URL.createObjectURL(audioBlob);
                    document.getElementById("upload").disabled = false;
                };
    
                audioChunks = [];
                mediaRecorder.start();
                document.getElementById("start").disabled = true;
                document.getElementById("stop").disabled = false;
            });
    
            document.getElementById("stop").addEventListener("click", () => {
                mediaRecorder.stop();
                document.getElementById("start").disabled = false;
                document.getElementById("stop").disabled = true;
            });
    
            document.getElementById("upload").addEventListener("click", async () => {
                const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
                const formData = new FormData();
                formData.append("audio", audioBlob, "recording.wav");
    
                const response = await fetch("/upload", {
                    method: "POST",
                    body: formData,
                });
    
                const result = await response.json();
                document.getElementById("status").textContent = result.message;
            });
        </script>
    </body>
    </html>

How It Works

  1. User clicks "Start Recording" → The browser records audio.
  2. User clicks "Stop Recording" → The recording is stored in memory.
  3. User clicks "Upload" → The recorded audio is sent to the Flask server via Fetch API.
  4. Flask saves the file in the uploads/ folder.

Running the App

  1. Install dependencies: 
    bash
    pip install flask
  2. Start the Flask server: 
    bash
    python app.py
  3. Open your browser and go to:
    👉 http://127.0.0.1:5000/

Would you like to extend this with speech-to-text transcription? 🚀

Tags: Python,Technology,Web Development,
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)