Javascript 如何使用flask在同一页面中从PC选择和播放本地音频_Javascript_Python_Html_Flask_Audio Streaming

Javascript 如何使用flask在同一页面中从PC选择和播放本地音频

javascript python html flask

Javascript 如何使用flask在同一页面中从PC选择和播放本地音频,javascript,python,html,flask,audio-streaming,Javascript,Python,Html,Flask,Audio Streaming,我想将所选文件作为值传递给我的html音频标记，并在单击时播放它。我也可以使用javascript。但是我该怎么做呢。这是我的密码。忽略预测部分，因为它是一个ml项目，我正在使用一些模型。我只想将文件作为值传递到html页面并播放音频。可以使用Javascript app = Flask(__name__) @app.route("/", methods=["GET", "POST"]) def index(): predic

我想将所选文件作为值传递给我的html音频标记，并在单击时播放它。我也可以使用javascript。但是我该怎么做呢。这是我的密码。忽略预测部分，因为它是一个ml项目，我正在使用一些模型。我只想将文件作为值传递到html页面并播放音频。可以使用Javascript

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    prediction=""
    if request.method == "POST":
        print("FORM DATA RECEIVED")
        if "file" not in request.files:
            return redirect(request.url)
        file = request.files["file"]
        if file.filename == "":
            return redirect(request.url)
        if file:
            new_feature = extract_feature(file, mfcc=True, chroma=True, mel=True)
            arr = model.predict([new_feature])
            prediction = arr[0]
    return render_template('index.html', prediction_text=prediction)

if __name__ == "__main__":
    app.run(debug=True, threaded=True)


{%block content%}
上载新文件












所选音频的情感是：
{{prediction\u text}


{%endblock%}

摘自：“[JavaScript]与Java编程语言无关，只有表面上的相似之处……”

<body style="background-color:grey;">
{% block content %}
<div id="speechContainer" class="center">
    <label>Upload new File</label>
    <br>
    <br>
    <form method="post" enctype="multipart/form-data">
        <input type="file" name="file"/>
        <br>
        <br>
        <audio controls="controls" autoplay="autoplay" src=""></audio>
        <br>
        <br>
        <a href="javascript:void(0);">{{sound}}</a>
        <input type="submit" id="submitButton" class="btn btn-primary" value="Predict"/>

        <br>
    </form>
    <br>
    <p id="line">The emotion of the selected audio is:</p>
    <p id="pred">{{ prediction_text }}</p>
    <br>
</div>

{% endblock %}
</body>