Question

我正在尝试通过Flask提供静态mp3文件，因此可以将这些mp3文件嵌入HTML音频块中。我似乎在正确设置路径时遇到问题，但是我不确定是我的问题出在python还是html中。

我的项目概述：

music
    app.py
    static
        button.js
        MDF.mp3
    templates
        button.html

我在app.py中的应用初始化看起来像

app = Flask(__name__, static_url_path="", static_folder="static")

app.py中的路线看起来像

@app.route("/<path:filename>")
def upload1():
    return send_static_file("MDF.mp3")

我的默认路线：

@app.route("/", methods=["GET"])
def home():
    return render_template("button.html", title="Music Box", name="MyName", song1=songList[0], song2=songList[1], song3=songList[2])

我的button.html看起来像

<!DOCTYPE html>
<html lang=en-US xml: lang"en-US">
<body>
    <o1>
        <li> {{song1}}</li>
        <audio controls>
            src=upload1():
            Your browser does not support the <code>audio</code> element.
        </audio>
        <li> {{song2}}</li>
        <audio controls>
            src=upload2():
            Your browser does not support the <code>audio</code> element.
        <li> {{song3}}</li>
        <audio controls>
            src=upload3():
            Your browser does not support the <code>audio</code> element.
    </ol>

    <script src="/static/button.js"></script>
</body>
</html>

我得到的错误代码是

10.245.81.226 - - [01/May/2019 04:25:08] "GET / HTTP/1.1" 404 -
10.245.81.226 - - [01/May/2019 04:25:08] "GET /static/button.js HTTP/1.1" 404 -
10.245.81.226 - - [01/May/2019 04:25:08] "GET /favicon.ico HTTP/1.1" 404 -

Answer 1

如果static文件夹中有音频文件，则可以像其他静态文件一样使用url_for在模板中访问它们。可以在in this URL中找到提供静态文件的文档。

在这里，我展示了一个在模板中获取音频文件URL的示例。我已经将Flask应用中的文件列表传递给了模板。

目录结构：

├── app.py
├── static
│   ├── demo1.mp3
│   ├── demo2.mp3
│   └── demo3.mp3
└── templates
    ├── audio.html

app.py：

from flask import Flask, render_template


app = Flask(__name__, static_folder='static')

@app.route('/')
def index():
    audio_files = ["demo1.mp3", "demo2.mp3", "demo3.mp3"]
    return render_template('audio.html', audio_files=audio_files)

audio.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Audio Example</title>
  </head>
  <body>
    <h2>Serving audio files from Flask</h2>
   {% for file in audio_files %}
    <audio controls>
      <source src={{ url_for('static', filename=file) }} type="audio/mpeg">
    </audio>
    {% endfor %}
    <p>Click on play icon to play</p>
  </body>
</html>

输出：

使用Flask从静态文件夹提供静态文件

1 个答案: