Playing a wavefile from the html using flask framework?

This is my run.py code

        from flask import *

        app = flask.Flask(__name__)
        app.config.from_object('config')                          
        @app.route('/', methods=['GET','POST'])
        def new_task():
            if flask.request.method == 'POST':
               tts = flask.request.form['tts']
            if int(tts) == 3:
               return redirect("/tts1")
            function()
                flask.flash(str(tts)+'is being selected')
                   print str(tts)+"output"
            else:
               flask.flash('Parakrant ---->')
                return flask.render_template("tasks.html")
            return redirect('/') 
    @app.route('/tts1')
    def wav():
        print "wavfile reached"
        return flask.render_template("s1.html")

This my base.html file

    <html>
    <head>
        <title>names</title>
      </head>
      <body>
        <div>PS: <a href="/ps">Home</a></div>
        <hr>
        {% block content %}{% endblock %}
      </body>
    </html>

this my tasks.html

  {% extends "base.html" %}
  {% block content %}
  <div class="page">
  <table>
  <tr>
  <form action="{{ url_for('new_task') }}" method="POST" class=new-task>
 </tr>
  <tr>
   <td>
   <label>name :</label>
  <select name="name" width="100px">
   <option value="1">name1</option>
  <option value="2">name2</option>
   <option value="3">name3</option>
  <option value="4">name4</option>
  <option value="5">name5</option>
   </select>
  </td>
   <td>
   &nbsp;
   &nbsp;
    <input class="button" type="submit" value="Press">
   <audio controls>
   <source src="ps.wav" type="audio/wav">
  </audio>
   </td>
    </form>
   </tr>
  </table>
   </div>
   </table>
 {% endblock %}

This my s1.html

    {% extends "base.html" %}
    {% block content %}
      <div class="page">
      <table>
      <tr>
      <form action="{{ url_for('new_task') }}" method="POST" class=new-task>
      </tr>
      <tr>
      <td>
      <label>name :</label>
      <select name="name" width="100px">
      <option value="1">name1</option>
      <option value="2">name2</option>
      <option value="3">name3</option>
      <option value="4">name4</option>
      <option value="5">name5</option>
      </select>
      </td>
      <td>
      &nbsp;
      &nbsp;
      <input class="button" type="submit" value="Press">
      <audio controls>
        <source src="ps.wav" type="audio/wav">
      </audio>
      </td>
      </form>
       </tr>
       </table>
       </div>
       </table>
    {% endblock %}

In the s1.html i have a hyperlink to a audio wav file . I want to play the audio file from the s1.html. The wav file is present in the root directory.
It is throwing error

GET /ps.wav HTTP/1.1″ 404 Please tell how to solve this. Help will be highly appreciated!

Answer

In the case of audio files, when you give <audio src="C://somePath"/>, this throws an error saying cannot load local resource. This makes sense because any webpage can’t simply give a local path and access your private files.

In case you are trying to play audio with dynamic paths, by changing src property through JS, then here is a sample implementation using Flask server and HTML.

server.py

@app.route("/")
def home():
     return render_template('audioMap.html')
    
@app.route('/<audio_file_name>')
def returnAudioFile(audio_file_name):
    path_to_audio_file = "C:/Audios/yourFolderPath" + audio_file_name
    return send_file(
         path_to_audio_file, 
         mimetype="audio/wav", 
         as_attachment=True, 
         attachment_filename="test.wav")

audioMap.html

{% raw %}
<!DOCTYPE html>
<html>
<body>
    AUDIO: <audio src="xyz.wav" controls  >
           //Here I have given src="dummy value", but according to your needs, you can always change the src property value using JS, and the flask endpoint will fetch that audio file.
</body>
</html>
{% endraw %}

Explanation:

When you give the audio file name under the src property, this creates a get request in the flask as shown

127.0.0.1 - - [04/May/2021 21:33:12] "GET /xyz.wav HTTP/1.1" 200 -

As you can see that flask sent a Get request for the xyz.wav file. So to serve this get request, we wrote an endpoint that takes the audio file name, reads it from the local directory, and returns it back. Hence the audio shows up on UI.

Note: This works only if you are rendering your HTML file using the render_template method via flask or to say, using flask as your web server.

Advertisement

Answer