使用recorder.js录制语音并将其上载到pythonflask服务器，但WAV文件已损坏
回答此问题可获得 20 贡献值，回答如果被采纳可获得 50 分。
<p>我想认识到这一点</p>
<ol>
<li>用户与web浏览器对话</李>
<li>网络浏览器（GoogleChrome）将用户的语音记录为WAV文件（Recorder.js），并将其发送到python服务器</李>
</ol>
<p>我通过addpipe的simple recorder.js示例实现了这一点。
<a href="https://github.com/addpipe/simple-recorderjs-demo" rel="noreferrer">https://github.com/addpipe/simple-recorderjs-demo</a></p>
<p>此示例使用php服务器，因此我更改了原来的app.js</p>
<p>原始app.js</p>
<pre><code>xhr.open("POST","uplod.php",true);
</code></pre>
<p>我的app.js</p>
<pre><code>xhr.open("POST","/",true);
</code></pre>
<p>我在本地检查了我的web应用程序，然后一切看起来都很完美。我使用Windows 10、WSL、Debian 10/buster、python3.7.6、Google Chrome。这是终点站的记录</p>
<pre><code>127.0.0.1 - - [03/Feb/2020 11:53:17] "GET / HTTP/1.1" 200 -
./file.wav exists
127.0.0.1 - - [03/Feb/2020 11:53:32] "POST / HTTP/1.1" 200 -
</code></pre>
<p>然而，当我用ffprobe命令检查上传的“file.wav”时，它被破坏了</p>
<pre><code> libavutil 56. 22.100 / 56. 22.100
libavcodec 58. 35.100 / 58. 35.100
libavformat 58. 20.100 / 58. 20.100
libavdevice 58. 5.100 / 58. 5.100
libavfilter 7. 40.101 / 7. 40.101
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 3.100 / 5. 3.100
libswresample 3. 3.100 / 3. 3.100
libpostproc 55. 3.100 / 55. 3.100
file.wav: Invalid data found when processing input
</code></pre>
<p>这是我的应用程序的截图。当我按下“保存到磁盘”按钮时，我可以在本地下载WAV文件。
如果我检查下载的WAV文件，它没有损坏</p>
<pre><code> libavutil 56. 22.100 / 56. 22.100
libavcodec 58. 35.100 / 58. 35.100
libavformat 58. 20.100 / 58. 20.100
libavdevice 58. 5.100 / 58. 5.100
libavfilter 7. 40.101 / 7. 40.101
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 3.100 / 5. 3.100
libswresample 3. 3.100 / 3. 3.100
libpostproc 55. 3.100 / 55. 3.100
Input #0, wav, from '/mnt/c/Users/w0obe/Downloads/2020-02-03T02_53_29.366Z.wav':
Duration: 00:00:07.34, bitrate: 768 kb/s
Stream #0:0: Audio: pcm_s16le ([1][0][0][0] / 0x0001), 48000 Hz, 1 channels, s16, 768 kb/s
</code></pre>
<p><a href="https://i.stack.imgur.com/BmlF7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BmlF7.png" alt="my app"/></a></p>
<hr/>
<p>我的目录结构在这里</p>
<pre><code>.
├── file.wav(uploaded WAV file)
├── main.py
├── Pipfile
├── Pipfile.lock
├── static
│ └── js
│ └── app.js
└── templates
└── index.html
</code></pre>
<p>这是main.py</p>
<pre><code>#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask
from flask import request
from flask import render_template
import os
app = Flask(__name__)
@app.route("/", methods=['POST', 'GET'])
def index():
if request.method == "POST":
f = open('./file.wav', 'wb')
f.write(request.get_data("audio_data"))
f.close()
if os.path.isfile('./file.wav'):
print("./file.wav exists")
return render_template('index.html', request="POST")
else:
return render_template("index.html")
if __name__ == "__main__":
app.run()
</code></pre>
<p>这是index.html</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Recorder.js demo with record, stop and pause - addpipe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Simple Recorder.js demo</h1>
<div id="controls">
<button id="recordButton">Record</button>
<button id="pauseButton" disabled>Pause</button>
<button id="stopButton" disabled>Stop</button>
</div>
<div id="formats">Format: start recording to see sample rate</div>
<p><strong>Recordings:</strong></p>
<ol id="recordingsList"></ol>
<!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script src="/static/js/app.js"></script>
</body>
</html>
</code></pre>
<p>这是app.js</p>
<pre><code>//webkitURL is deprecated but nevertheless
URL = window.URL || window.webkitURL;
var gumStream; //stream from getUserMedia()
var rec; //Recorder.js object
var input; //MediaStreamAudioSourceNode we'll be recording
// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //audio context to help us record
var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");
var pauseButton = document.getElementById("pauseButton");
//add events to those 2 buttons
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);
pauseButton.addEventListener("click", pauseRecording);
function startRecording() {
console.log("recordButton clicked");
/*
Simple constraints object, for more advanced audio features see
https://addpipe.com/blog/audio-constraints-getusermedia/
*/
var constraints = { audio: true, video:false }
/*
Disable the record button until we get a success or fail from getUserMedia()
*/
recordButton.disabled = true;
stopButton.disabled = false;
pauseButton.disabled = false
/*
We're using the standard promise based getUserMedia()
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
*/
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
/*
create an audio context after getUserMedia is called
sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
the sampleRate defaults to the one set in your OS for your playback device
*/
audioContext = new AudioContext();
//update the format
document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"
/* assign to gumStream for later use */
gumStream = stream;
/* use the stream */
input = audioContext.createMediaStreamSource(stream);
/*
Create the Recorder object and configure to record mono sound (1 channel)
Recording 2 channels will double the file size
*/
rec = new Recorder(input,{numChannels:1})
//start the recording process
rec.record()
console.log("Recording started");
}).catch(function(err) {
//enable the record button if getUserMedia() fails
recordButton.disabled = false;
stopButton.disabled = true;
pauseButton.disabled = true
});
}
function pauseRecording(){
console.log("pauseButton clicked rec.recording=",rec.recording );
if (rec.recording){
//pause
rec.stop();
pauseButton.innerHTML="Resume";
}else{
//resume
rec.record()
pauseButton.innerHTML="Pause";
}
}
function stopRecording() {
console.log("stopButton clicked");
//disable the stop button, enable the record too allow for new recordings
stopButton.disabled = true;
recordButton.disabled = false;
pauseButton.disabled = true;
//reset button just in case the recording is stopped while paused
pauseButton.innerHTML="Pause";
//tell the recorder to stop the recording
rec.stop();
//stop microphone access
gumStream.getAudioTracks()[0].stop();
//create the wav blob and pass it on to createDownloadLink
rec.exportWAV(createDownloadLink);
}
function createDownloadLink(blob) {
var url = URL.createObjectURL(blob);
var au = document.createElement('audio');
var li = document.createElement('li');
var link = document.createElement('a');
//name of .wav file to use during upload and download (without extendion)
var filename = new Date().toISOString();
//add controls to the <audio> element
au.controls = true;
au.src = url;
//save to disk link
link.href = url;
link.download = filename+".wav"; //download forces the browser to donwload the file using the filename
link.innerHTML = "Save to disk";
//add the new audio element to li
li.appendChild(au);
//add the filename to the li
li.appendChild(document.createTextNode(filename+".wav "))
//add the save to disk link to li
li.appendChild(link);
//upload link
var upload = document.createElement('a');
upload.href="#";
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","/",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);
}
</code></pre>
<p><strong>如何将WAV文件上载到flask服务器？</strong>
你能给我一些信息或建议吗</p>
<p>先谢谢你</p>
<p>真的，卡祖</p>
请先 登录 后评论
针对此问题: 更多的回答
- 89 关注
- 1 收藏，216 浏览
- 网友 提问于 2天前
相关Python问题
- 当用户用PYTHON设置一个或一个不带值的URL时，他们怎么能输入一个/a的代码呢？ 5 回答
- 当用户登录到站点时，如何显示不同的导航栏 10 回答
- 当用户登录时，在Flask中向用户显示处理结果 3 回答
- 当用户的Flask会话结束时，我如何从Redis后端中移除所有Celery结果？ 10 回答
- 当用户的Okta配置文件字段当前为blan时，更新该字段 3 回答
- 当用户的付款逾期2天时，从Django模型检索数据 3 回答
- 当用户的消息以问号结尾时，如何让机器人说些什么？ 1 回答
- 当用户的系统上可能也安装了Python 2.7时，如何在用户的系统上运行Python 3脚本？ 2 回答
- 当用户确定打印数量时，使用Matplotlib打印动画 7 回答
- 当用户离开时是否可以删除整个网页？ 2 回答
- 当用户给出一个单词时如何打印？ 2 回答
- 当用户继续更改TKin中的值（使用trace方法）时，使用Entry并更新输入的条目 9 回答
- 当用户编辑表单字段时，从Django时间字段中删除秒数 5 回答
- 当用户被更改时，消息不会来自web套接字 9 回答
- 当用户访问表单时，如何使表单为只读，而不具有更改权限 8 回答
- 当用户试图更改对象的值时，使用描述符类引发RuntimeError 9 回答
- 当用户调整GUI的大小时，是否有方法更改GUI内容的大小？ 6 回答
- 当用户调整风的大小时，pythontkinter小部件的大小会不均匀 9 回答
- 当用户购买某个类别时，是否查找其他类别的销售？ 10 回答
- 当用户转到上一页时，Django和芹菜插入操作 9 回答
