使用flask框架从html播放波形文件？答案

【问题标题】：Playing a wavefile from the html using flask framework?使用flask框架从html播放波形文件？
【发布时间】：2013-06-25 22:24:47
【问题描述】：

这是我的 run.py 代码

        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")

这是我的 base.html 文件

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

这是我的任务.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 %}

这是我的 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 %}

在 s1.html 中，我有一个指向音频 wav 文件的超链接。我想从 s1.html 播放音频文件。 wav 文件存在于根目录中。
它正在抛出错误

GET /ps.wav HTTP/1.1" 404 请告诉如何解决这个问题。帮助将不胜感激！

【问题讨论】：

How to send audio wav file generated at the server to client browser?的可能重复

标签： python html web flask wav

【解决方案1】：

如果您使用默认的静态文件配置运行 Flask，那么您应该将您的波形文件放在“静态”文件夹中，然后在您的模板中将它们引用为

{{ url_for("static", filename = "ps.wav") }}

【讨论】：

【解决方案2】：

在音频文件的情况下，当您提供<audio src="C://somePath"/> 时，这会引发错误提示cannot load local resource. 这是有道理的，因为任何网页都不能简单地提供本地路径并访问您的私人文件。

如果您尝试使用动态路径播放音频，通过 JS 更改 src property，那么这里是使用 Flask 服务器和 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 flask endpoint will fetch that audio file.
</body>
</html>
{% endraw %}

解释：

当您在 src 属性下提供音频文件名时，这会在烧瓶中创建一个 get 请求，如图所示

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

如您所见，flask 发送了一个获取xyz.wav 文件的请求。因此，为了服务这个 get 请求，我们编写了一个端点，它获取音频文件名，从本地目录中读取它，然后返回它。因此音频会显示在 UI 上。

注意：这仅在您使用通过烧瓶渲染模板方法，或者说，使用烧瓶作为您的网络服务器。

【讨论】：