前端使用websocket接收实时音频数据并显示波形图的完整代码
时间: 2024-03-01 17:51:26 浏览: 270
以下是一个完整的前端实时音频数据通过 WebSocket 显示波形图的代码,包括前端和后端的实现。
前端代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Audio Waveform</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wavesurfer.js"></script>
<style>
#waveform {
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div id="waveform"></div>
<script>
var socket = io.connect('http://localhost:3000'); // 连接 WebSocket 服务器
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
}); // 创建 WaveSurfer 实例
socket.on('audio', function (data) { // 监听 WebSocket 服务器发来的音频数据
wavesurfer.loadDecodedBuffer(data); // 解码并加载音频数据
});
</script>
</body>
</html>
```
后端代码(使用 Node.js 和 Socket.IO 库)
```javascript
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const fs = require('fs');
const lame = require('lame');
const Speaker = require('speaker');
const { Transform } = require('stream');
// 创建一个可写流,将音频数据转换为 PCM 格式
class AudioTransformer extends Transform {
constructor(source, options) {
super(options);
this.source = source;
}
_transform(chunk, encoding, callback) {
this.push(chunk);
callback();
}
}
// 读取音频文件,并转换为 MP3 格式
const audioFile = fs.createReadStream('demo.wav');
const audioTransformer = new AudioTransformer(audioFile);
const encoder = new lame.Encoder({
channels: 2,
bitDepth: 16,
sampleRate: 44100,
bitRate: 128,
outSampleRate: 44100,
mode: lame.MONO
});
const mp3File = fs.createWriteStream('demo.mp3');
audioTransformer.pipe(encoder).pipe(mp3File);
// 播放音频文件
const audioStream = fs.createReadStream('demo.mp3');
const decoder = new lame.Decoder();
const speaker = new Speaker();
audioStream.pipe(decoder).pipe(speaker);
// 向客户端发送实时音频数据
io.on('connection', function (socket) {
const audioStream = fs.createReadStream('demo.mp3');
const decoder = new lame.Decoder();
audioStream.pipe(decoder);
decoder.on('data', function (data) {
socket.emit('audio', data);
});
});
http.listen(3000, function () {
console.log('listening on *:3000');
});
```
在上面的代码中,我们使用 Node.js 和 Socket.IO 库实现了一个简单的 WebSocket 服务器,同时将一个示例音频文件转换为 MP3 格式,并在客户端连接到 WebSocket 服务器后向客户端发送实时音频数据。
需要注意的是,这里的音频数据需要经过编码和解码才能在网络上传输,这里我们使用了 lame 库对音频数据进行编码和解码。同时,为了在客户端显示波形图,我们使用了 WaveSurfer.js 库。
阅读全文