js实现mp3录音通过websocket实时传送+简易波形图效果

这里提供一份详细的攻略，包括步骤、代码实现和示例说明，供参考。

步骤

1. 安装所需的库

我们需要使用的库包括Recorder.js, Flask以及实现WebSocket的库，这里我们使用Flask-SocketIO。先安装好这些库。

npm install recorder-js
pip install flask flask-socketio

1. 前端页面布局

在HTML页面中添加一个录音按钮和一个显示波形图的canvas元素。

<button id="record-btn">录制</button>
<canvas id="canvas"></canvas>

1. JavaScript代码

初始化Recorder.js以及WebSocket连接，并调用相应的函数进行录音和波形图的绘制。

// 获取按钮、canvas元素
var recordBtn = document.getElementById('record-btn');
var canvas = document.getElementById('canvas');
// 获取WebSockets连接地址
var ws_url = "ws://" + document.domain + ":" + location.port + "/websocket";

// 初始化Recorder.js
var audioContext = new AudioContext();
var recorder = new Recorder(audioContext);
recorder.open(function () {
  console.log("recorder opened...");
}, (msg, isWarning) => {
  console.log(msg, isWarning);
});

// 初始化WebSocket连接
var socket = io.connect(ws_url);

// 鼠标按下时开始录音
recordBtn.addEventListener("mousedown", function () {
  console.log("recording...");
  recorder.clear();
  recorder.record();
});

// 鼠标松开时停止录音, 并将录音文件数据发送到服务器
recordBtn.addEventListener("mouseup", function () {
  recorder.stop();
  recorder.exportWAV(function (blob) {
    socket.emit("audio", blob);
  });
});

// 根据实时传来的数据绘制波形图
socket.on('audio_data', function (data) {
  var buffer = new ArrayBuffer(data.length);
  var view = new Uint8Array(buffer);
  for (var i = 0; i < data.length; i++) {
    view[i] = data[i];
  }
  var context = canvas.getContext('2d');
  var width = canvas.width;
  var height = canvas.height;
  context.clearRect(0, 0, width, height);
  context.beginPath();
  for (var i = 0; i < width; i++) {
    var y = view[i] / 128.0 * height / 2;
    if (i == 0) {
      context.moveTo(0, y);
    } else {
      context.lineTo(i, y);
    }
  }
  context.stroke();
});

4.后端Flask应用

在服务器上创建一个Flask应用，用于接收WebSocket连接和传输数据。

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

# 当客户端连接到WebSocket时，触发此事件
@socketio.on('connect')
def on_connect():
    print('Connected')

# 当客户端发送音频数据时，触发此事件
@socketio.on('audio')
def on_audio(audio):
    emit('audio_data', audio, broadcast=True)

if __name__ == '__main__':
    socketio.run(app, debug=True, host='0.0.0.0')

示例说明

示例1: 录音和波形图展示

运行上述代码后，打开浏览器访问http://localhost:5000，界面上会出现一个录音按钮和一个显示波形图的canvas元素。点击录音按钮并按下鼠标开始录音，松开鼠标停止录音。录音期间，波形图会实时更新并展示。

示例2: WebSockets多客户端连接

运行上述服务器端代码后，可以同时在多个浏览器窗口中访问http://localhost:5000，可以看到所有连接的客户端都可以实时收到音频数据并展现波形图。这个功能非常适合用于实时语音通信、跨浏览器音视频聊天等场景。