将录制的音频作为WAV文件从浏览器持久化到Python API_Python_Audio_Base64_Wav_Mediarecorder

将录制的音频作为WAV文件从浏览器持久化到Python API

python audio

将录制的音频作为WAV文件从浏览器持久化到Python API,python,audio,base64,wav,mediarecorder,Python,Audio,Base64,Wav,Mediarecorder,我正在从事一个项目，该项目要求我：从浏览器录制音频（当前通过MediaRecorder API）通过HTTP POST发送到Python API 将此音频数据作为WAV文件保存在文件系统的某个位置我目前正在将从浏览器录制的音频编码为base64字符串（从音频块构造的Blob）： } 将其发送到后端，并尝试通过解码base64字符串和使用Python“Wave”包编写文件来保存音频。然而，我只是在结果文件中得到静态 def write_to_file(base64_audio): decod

我正在从事一个项目，该项目要求我：

从浏览器录制音频（当前通过MediaRecorder API）

通过HTTP POST发送到Python API

将此音频数据作为WAV文件保存在文件系统的某个位置

我目前正在将从浏览器录制的音频编码为base64字符串（从音频块构造的Blob）：

}

将其发送到后端，并尝试通过解码base64字符串和使用Python“Wave”包编写文件来保存音频。然而，我只是在结果文件中得到静态

def write_to_file(base64_audio):
decoded = base64.standard_b64decode(base64_audio)
print(type(decoded))
with wave.open('temp/test.wav', 'wb') as wav:
    wav.setparams((2, 2, 16000, 0, 'NONE', 'NONE'))
    wav.writeframes(decoded)

任何关于如何解决此问题或改进流程的建议都将不胜感激。

Python

import base64
import wave

from flask import Flask, request

app = Flask(__name__)


@app.route("/test", methods=["POST"])
def hello():
    data = str(request.form)[59:][:-4].replace(" ", "+").encode()
    write_to_file(data)
    return "Hello World!"


def write_to_file(base64_audio):
    import base64
    wav_file = open("temp.wav", "wb")
    decode_string = base64.b64decode(base64_audio)
    wav_file.write(decode_string)


if __name__ == "__main__":
    app.run("0.0.0.0", 5000)

HTML








函数start（）{
返回新承诺（解决=>{
navigator.mediaDevices.getUserMedia（{audio:true}）
。然后（流=>{
this.mediaRecorder=新的mediaRecorder（流）；
this.audioChunks=[]；
this.mediaRecorder.addEventListener（'dataavailable'，event=>{
this.audioChunks.push（event.data）；
});
这是一个.mediaRecorder.start（）；
});
});
}
函数停止（）{
this.mediaRecorder.stop（）；
}
函数getData（）{
让blob=newblob（this.audioChunks，{type:'audio/wav；codecs=opus'}）；
let reader=new FileReader（）；
reader.readAsDataURL（blob）；
reader.onloadend=（）=>{
让base64data=reader.result；
console.log（base64data）
/*
this.http.post（，{audio:base64data}）.subscribe（res=>{
控制台日志（res）；
});
*/
$.ajax({
类型：“POST”，
网址：'http://localhost:5000/test',
数据：base64data，
成功：功能（数据）{
警报（数据）；
}
});
};
}

import base64
import wave

from flask import Flask, request

app = Flask(__name__)


@app.route("/test", methods=["POST"])
def hello():
    data = str(request.form)[59:][:-4].replace(" ", "+").encode()
    write_to_file(data)
    return "Hello World!"


def write_to_file(base64_audio):
    import base64
    wav_file = open("temp.wav", "wb")
    decode_string = base64.b64decode(base64_audio)
    wav_file.write(decode_string)


if __name__ == "__main__":
    app.run("0.0.0.0", 5000)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<input type="button" value="start" onclick="start()"></br>
<input type="button" value="stop" onclick="stop()"></br>
<input type="button" value="getData" onclick="getData()"></br>

<script type="text/javascript">
    function start() {
        return new Promise(resolve => {
            navigator.mediaDevices.getUserMedia({audio: true})
                .then(stream => {
                    this.mediaRecorder = new MediaRecorder(stream);
                    this.audioChunks = [];
                    this.mediaRecorder.addEventListener('dataavailable', event => {
                        this.audioChunks.push(event.data);
                    });

                    this.mediaRecorder.start();
                });
        });
    }

    function stop() {
        this.mediaRecorder.stop();
    }


    function getData() {
        let blob = new Blob(this.audioChunks, {type: 'audio/wav;codecs=opus'});
        let reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = () => {
            let base64data = reader.result;
            console.log(base64data)
            /*
            this.http.post(, {audio: base64data}).subscribe(res => {
                console.log(res);
            });
            */
            $.ajax({
                type: "POST",
                url: 'http://localhost:5000/test',
                data: base64data,
                success: function (data) {
                    alert(data);
                }
            });
        };
    }
</script>
</body>
</html>