Flask前端录音发送给后端|极客笔记

Flask前端录音发送给后端

在Web开发中，有时候需要使用录音功能，将用户录制的音频发送到后端进行处理。本文将介绍如何利用Flask框架搭建一个简单的前端录音功能，并将录音发送给后端的方法。

准备工作

在开始之前，我们需要安装一些必要的库：

Flask：用于搭建Web应用的Python框架；
PyAudio：用于录音的Python库；
Wave：用于处理音频文件的Python库；

你可以通过以下命令来安装这些库：

pip install flask
pip install pyaudio
pip install wave

前端录音

首先，我们需要在前端页面上添加一个录音按钮，让用户点击之后开始录音。我们可以使用 Web Audio API 来实现录音功能。

<!DOCTYPE html>
<html>
<head>
    <title>录音页面</title>
</head>
<body>
    <button id="recordButton">开始录音</button>
    <audio controls id="audioPlayer"></audio>

    <script>
        let recordButton = document.getElementById('recordButton');
        let audioPlayer = document.getElementById('audioPlayer');
        let audioChunks = [];

        navigator.mediaDevices.getUserMedia({audio: true})
            .then(stream => {
                let mediaRecorder = new MediaRecorder(stream);

                recordButton.addEventListener('click', () => {
                    if (mediaRecorder.state === 'inactive') {
                        audioChunks = [];
                        mediaRecorder.start();
                        recordButton.textContent = '停止录音';
                    } else {
                        mediaRecorder.stop();
                        recordButton.textContent = '开始录音';
                    }
                });

                mediaRecorder.ondataavailable = event => {
                    if (event.data.size > 0) {
                        audioChunks.push(event.data);
                    }
                };

                mediaRecorder.onstop = () => {
                    let audioBlob = new Blob(audioChunks);
                    audioPlayer.src = URL.createObjectURL(audioBlob);
                    audioPlayer.play();
                };
            })
            .catch(error => {
                console.error('录音失败：', error);
            });
    </script>
</body>
</html>

在上面的代码中，我们首先获取用户的麦克风权限，然后创建一个 MediaRecorder 对象来录制音频。用户点击按钮开始录音，点击停止按钮停止录音。录音结束后，会生成一个音频文件，并通过 audio 标签来播放录制的声音。

后端接收录音

接下来，我们使用Flask框架来搭建一个简单的后端应用，接收前端发送过来的音频文件，并保存到服务器上。

from flask import Flask, request
import wave
import os

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['audio']
    file.save('audio.wav')

    return '上传成功'

if __name__ == '__main__':
    app.run()

在上面的代码中，我们创建了一个简单的Flask应用，它有一个 /upload 接口，用来接收前端发送过来的音频文件。我们通过 request 对象来获取音频文件，并保存在服务器上。

测试

首先，运行Flask应用：

python app.py

然后访问前端页面，点击开始录音按钮进行录音。录音结束后，可以看到页面上会显示一个音频播放器，播放录制的声音。接着点击停止录音按钮，会发送录音文件到后端。

通过postman等工具发送POST请求，将录音文件上传给后端：

POST http://127.0.0.1:5000/upload
Content-Type: multipart/form-data

audio: <audio_file>

如果一切顺利，你会看到上传成功的提示，并在服务器上保存了一个名为 audio.wav 的音频文件。

总结

通过本文的介绍，你学会了如何使用Flask框架搭建一个前端录音功能，并将录音发送给后端的方法。你可以根据需要对录音进行处理，例如识别语音内容、转换成文字等。

Flask前端录音发送给后端