Flask 发送音频数据从JS到Python

在本文中，我们将介绍如何使用Flask框架发送音频数据从JavaScript到Python。Flask是一个基于Python的轻量级Web框架，它提供了简单、灵活和可扩展的方式来构建Web应用程序。我们将使用Flask来创建一个可以接收来自前端的音频数据的API，并对该数据进行处理和分析。

阅读更多：Flask 教程

准备工作

首先，我们需要安装Flask框架。打开终端并运行以下命令：

pip install flask

接下来，我们将创建一个新的Python文件，命名为app.py，并在其中导入必要的模块和库：

from flask import Flask, request
import base64
import numpy as np
import io
from scipy.io.wavfile import write

创建Flask应用程序

我们将使用Flask创建一个新的应用程序。在app.py文件中添加以下代码：

app = Flask(__name__)

@app.route('/api/audio', methods=['POST'])
def receive_audio():
    audio_data = request.form.get('audio')
    sample_rate = int(request.form.get('sample_rate'))

    # 将Base64编码的音频数据转换为二进制数据
    binary_audio = base64.b64decode(audio_data)

    # 将二进制数据转换为NumPy数组
    audio_array = np.frombuffer(binary_audio, dtype=np.int16)

    # 将音频数据保存为.wav文件
    write('audio.wav', sample_rate, audio_array)

    # 对音频数据进行处理和分析
    # ...

    return 'Audio received and processed successfully!'

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

在上面的代码中，我们定义了一个路由’/api/audio’，这个路由将接收POST请求并处理音频数据。我们从请求中获取音频数据和采样率，并将其转换为适当的格式。然后，我们将音频数据保存为.wav文件，并可以在文件中进行进一步的处理和分析。

前端实现

在前端，我们需要使用JavaScript来录制音频并将其发送到后端的API。以下是一个简单的示例：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    var chunks = [];
    var mediaRecorder = new MediaRecorder(stream);

    mediaRecorder.addEventListener('dataavailable', function(event) {
      chunks.push(event.data);
    });

    mediaRecorder.addEventListener('stop', function() {
      var blob = new Blob(chunks);
      var reader = new FileReader();

      reader.onloadend = function() {
        var base64data = reader.result;

        // 将音频数据发送到后端的API
        fetch('/api/audio', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: 'audio=' + encodeURIComponent(base64data) + '&sample_rate=' + sampleRate
        })
        .then(function(response) {
          if(response.ok) {
            console.log('Audio sent successfully!');
          } else {
            console.error('Failed to send audio.');
          }
        })
        .catch(function(error) {
          console.error('Error:', error);
        });
      };

      reader.readAsDataURL(blob);
    });

    // 录制一段音频，持续5秒钟
    mediaRecorder.start();

    setTimeout(function() {
      mediaRecorder.stop();
    }, 5000);
  })
  .catch(function(error) {
    console.error('Error:', error);
  });

在上面的代码中，我们使用navigator.mediaDevices.getUserMedia方法来获取用户的音频流。然后，我们创建一个MediaRecorder对象来录制音频，并在每次录制完毕后将音频数据存储到chunks数组中。当录制完成后，我们将chunks数组中的音频数据转换为Blob对象，并使用FileReader将其转换为Base64编码的字符串。最后，我们使用fetch函数将音频数据发送到后端的API。