用Recorder.js和烧瓶记录音频数据的JavaScript
用Recorder.js和烧瓶记录音频数据的JavaScript
提问于 2020-09-21 15:04:52
更新
我正在使用recorder.js记录来自用户的音频，并且我能够将音频文件上传到我的桶中。当我在本地测试应用程序时，提交表单将用户发送到我的Flask应用程序的POST路径。然而，当我在Google AppEngine (flex环境)上运行这个应用程序时，它会击中GET路径。
我认为这与使用app.js的XMLHttpRequest脚本有关，我试图将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>下面是我试图更改的JavaScript的一部分，以使用常规的表单帖子，而不是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)谢谢你的帮助。
https://github.com/mattdiamond/Recorderjs
- A
- recorder.js的源代码在这里: recorder.js表单的实时演示在这里：https://addpipe.com/simple-recorderjs-demo/
回答 1
Stack Overflow用户
发布于 2021-01-20 15:57:18
我发现问题是，录制的音频文件还没有上传时，发言文本功能，试图转录它。我要设置一个酒吧子主题/订阅，等待上传完成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63995004
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号