Microphone input in HTML for Flask

Question

I am developing a web app with Flask and speech recognition for audio inputs, processing and displaying an output on screen. This post has helped me organize the input of audio files, here is my flask code:

list_msg = []

@app.route("/process_wav", methods=['GET', 'POST'])
def process_wav():
    if request.method == 'POST':
        audio_file = request.form.get("audio-recording")
        dir = 'audio/'+str(audio_file)
        msg = Mensaje(dir)  # this is a custom class I created for storing and processing the audio
        list_msg.append((dir, msg.sentence, msg.word_counter))
    return render_template("process_wav.html", list_msg=list_msg)

and my HTML code:

{% block flask %}
<h1>Prototype</h1>

<section>
<form action="" method="POST" class="form-input">
<div class="form-input">
  <label for="audio-recording">Audio file (.wav)</label>
  <input name="audio-recording" type="file" accept="audio/*" id="audio-recording" >
  <button class="form-submit" type="submit" id="entry">Submit</button>
</div>
</form>
</section>

{% for msg in list_msg %}
<section class="form-output" id="output">
  <h3>{{ msg[0] }}</h3>
  <p>Result: "{{ msg[1] }}"</p>
  <p>Counter: {{ msg[2] }}</p>
</section>
{% endfor %}
{% endblock flask %}

but I find it necessary to input audio directly through a microphone (and to process it the same way as with the .wav audio files). So my question is: how could I input audio through a microphone to the web page, in HTML, so that I pass it to Flask and python for processing and then displaying the output?

Being new to Flask and HTML, I find it hard to look for good references, although I found out that HTML does not offer this natively. Any advice is welcome

This answer may get you on the right track: https://stackoverflow.com/a/60850613/5252522. You can utilize JS to send audio to Flask and this answer should assist in capturing that data. Edit: The question provides the JS necessary for frontend audio capture: https://stackoverflow.com/q/60032983/5252522 — Quentin, Apr 08 '21 at 21:19
@Quentin your comment helped me tons, I appreciate it. Now I'm using that code from the answer by Arunavo Ray, but it seems the `request.files['audio_data]` is not found because the request.files dictionary is empty, why could that be? PS: i haven't altered the app.js, and I tested it as-is and saw it worked as intended (returned the audio recording onto the browser) — veziop, Apr 11 '21 at 11:56
@Quentin if you mean the JS script other than app.js then yes. It’s called recorder.js and it’s referenced in a web URL — veziop, Apr 11 '21 at 22:58
Hmm... Maybe inspect the frontend to ensure the data is being sent — Quentin, Apr 12 '21 at 02:45

score -1 · Answer 1 · answered Apr 08 '21 at 18:40

-1

function to stream audio live using flask. Actually i didn't get what you acutually want to do. But this way you can stream audio in flask.

@app.route("/fetchAudio",methods=["GET"])
def fetch_audio():
    def generate():
       with open("SampleAudio.mp3", "rb") as audio: # your audio file path here
          audio_data = audio.read(1024)
       while audio_data:
            yield audio_data
            audio_data = audio.read(1024)
    return Response(generate(), mimetype="audio/x-wav") # header for audio type

I hope this'll help. github_link

answered Apr 08 '21 at 18:40

iampritamraj

196
2
6

2

basically I intend on having the website's visitor to say something to their computer microphone (audio input) which then gets passed to the Python backend so that I can transcribe it with the SpeechRecognition module, and finally return the transcribed text (alognside some other basic text computations) back to the display. – veziop Apr 08 '21 at 20:20

Microphone input in HTML for Flask

1 Answers1

Linked