更新：
我正在使用recorder.js记录用户的音频，并且我能够将音频文件上传到我的谷歌云存储桶中。当我在本地测试Flask应用程序时，提交表单会将用户发送到该应用程序的POST路由。然而，当我在Google AppEngine(flex环境(上运行该应用程序时，它会到达GET路线。
我认为这与使用XMLHttpRequest的app.js脚本有关，并且我尝试将app.js更改为这里描述的表单post。然而，我是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>
以下是我试图更改的JavaScript部分，以使用常规表单post而不是XMLHttpRequest:
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/
当语音转文本功能尝试转录时，我发现问题是录制的音频文件尚未上传。我将设置一个pub子主题/订阅，等待上传完成。