<template>
<div>
<audio ref="audioPlayer" controls></audio>
</div>
</template>
<script>
export default {
data() {
return {
ws: null,
buffer: [],
mediaRecorder: null,
intervalId: null,
};
},
created() {
this.connectWebSocket();
},
methods: {
connectWebSocket() {
this.ws = new WebSocket('ws://your-websocket-server');
this.ws.onmessage = this.handleMessage;
this.ws.onopen = this.handleOpen;
this.ws.onerror = this.handleError;
},
handleOpen() {
console.log('WebSocket connected');
this.startRecording();
},
handleMessage(message) {
if (message.data instanceof Blob) {
this.onBlob(message.data);
}
},
handleError(error) {
console.error('WebSocket Error:', error);
},
startRecording() {
this.mediaRecorder = new MediaRecorder(
new MediaStream([new MediaStreamTrack(this.createCapturer())]),
{ mimeType: 'audio/webm; codecs=opus' }
);
this.mediaRecorder.ondataavailable = this.onBlob;
this.mediaRecorder.start();
},
createCapturer() {
// 这里需要实现创建捕获器的逻辑，具体取决于你的应用场景
// 例如从麦克风捕获音频
},
onBlob(blob) {
this.buffer.push(blob);
if (this.intervalId == null) {
this.intervalId = setInterval(() => {
if (this.buffer.length === 0) return;
const blob = new Blob(this.buffer, { type: 'audio/webm' });
this.buffer = [];
this.$refs.audioPlayer.src = URL.createObjectURL(blob);
this.$refs.audioPlayer.play();
}, 1000); // 根据需要调整间隔时间
}
},
},
beforeDestroy() {
if (this.ws) {
this.ws.close();
}
if (this.mediaRecorder) {
this.mediaRecorder.stop();
}
if (this.intervalId) {
clearInterval(this.intervalId);
}
},
};
</script>这个代码实例展示了如何在Vue组件中创建一个WebSocket连接，并且使用MediaRecorder API捕获实时的音频流。捕获的音频流会被周期性地发送到服务器，并且实时地在客户端的<audio>元素中播放。这个例子提供了一个基本框架，开发者可以根据自己的应用场景进行具体的实现和调整。