使用 Recorder.js 和 Flask 进行音频录制 - 使用 JavaScript 发布数据答案

【问题标题】：Audio recording with Recorder.js and Flask - post data using JavaScript使用 Recorder.js 和 Flask 进行音频录制 - 使用 JavaScript 发布数据
【发布时间】：2020-09-21 15:04:52
【问题描述】：

更新：

我正在使用 recorder.js 录制来自用户的音频，并且我能够将音频文件上传到我的 Google Cloud Storage 存储桶。当我在本地测试应用程序时，提交表单会将用户发送到我的 Flask 应用程序的 POST 路由。但是，当我在 Google AppEngine（弹性环境）上运行应用程序时，它会到达 GET 路由。

我认为这与使用 XMLHttpRequest 的 app.js 脚本有关，我尝试将 app.js 更改为 here 所述的表单帖子。但是，我是 JavaScript 新手，无法使用它。

这是我的表格：

<html>
    <head>
        <title>Recording Form</title>
    </head>
    <body>
        <div id="controls">
            <button id="recordButton">Record</button>
            <button id="pauseButton" disabled>Pause</button>
            <button id="stopButton" disabled>Stop</button>
        </div>
        <ol id="recordingsList"></ol>
        <script type="text/javascript" src="/static/js/recorder.js"></script>
        <script type="text/javascript" src="/static/js/app.js"></script>
    </body>
</html>

这是我尝试更改为使用常规表单发布而不是 XMLHttpRequest 的 JavaScript 部分：

var upload = document.createElement('a');
upload.href="/record";
upload.innerHTML = "Upload";
upload.addEventListener("click", function(event){
          
    var xhr=new XMLHttpRequest();
    xhr.onload=function(e) {
        if(this.readyState === 4) {
            console.log("Server returned: ",e.target.responseText);
        }
    };
    var fd=new FormData();
    fd.append("audio_data",blob, filename);
    xhr.open("POST","/record",true);
    xhr.send(fd);
})
li.appendChild(document.createTextNode (" "))//add a space in between
li.appendChild(upload)//add the upload link to li

//add the li element to the ol
recordingsList.appendChild(li);
}

这是我的烧瓶应用程序：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask, request
    
app = Flask(__name__)

@app.route('/record', methods=['POST'])
def record_post():
    audio_data = request.files['audio_data'].read()
    return 'done with POST'

@app.route('/record', methods=['GET'])
def record():
    return 'done with GET'
    
if __name__ == '__main__':
    app.run(host='127.0.0.1', port=8080, debug=True)

感谢您的帮助。

recorder.js的源码在这里： https://github.com/mattdiamond/Recorderjs
recorder.js 表单的现场演示在这里： https://addpipe.com/simple-recorderjs-demo/

【问题讨论】：

嗨，马库斯，欢迎来到 SO。您的应用程序需要几个步骤才能到达那里。您需要捕获记录，将其编码为可以发送到服务器的格式，然后让服务器将文件存储在您的存储桶中。然后发回回复说一切顺利，上传完成。你有吗？如果您这样做，请向我们展示与您的问题相关的代码，否则请尝试并查看您的最终结果。开始一门新语言可能很困难，但我们会竭尽全力帮助您，只要您的代码是我们可以帮助您的。
我已经更新了帖子，因为我已经设法让应用程序在本地运行。我的问题是，当我在 Google AppEngine（Flex 环境）上运行它时，它会命中 GET 路由而不是 POST 路由。
您更有可能覆盖您的端点，导致仅存在 GET 变体。由于@app.route 上的methods 参数是复数；尝试结合端点methods=['POST', 'GET']
谢谢埃米尔。我试过了，但得到了相同的结果。它在本地有效，但在 AppEngine 上无效。这是修改后的代码：code@app.route('/record', methods=['POST', 'GET']) def record_post(): if request.method == 'POST': audio_data = request. files['audio_data'].read() upload_blob_audio('my-bucket.appspot.com', audio_data, 'folder/subfolder/recorded-audio.wav') return 'done with POST'

标签： javascript forms flask audio

【解决方案1】：

我发现问题是当语音转文本功能尝试转录时，录制的音频文件尚未上传。我将设置一个发布子主题/订阅以等待上传完成。

【讨论】：