如何在js中像流一样连续播放不同的音频片段？

Question

我正在尝试创建简单的音频流媒体。在 js 客户端上，我通过 websocket 发送 1 秒音频片段。 Python 服务器返回此音频并在客户端上播放。问题是流中存在间隙。管理这个问题的最佳方法是什么？

前端：

const ws = new WebSocket('ws://localhost:8001'),
    audio = new Audio()

ws.onopen = () => {
    console.log('opened');
    navigator.mediaDevices.getUserMedia({audio: true, video: false})
    .then(audioStream => {
        const mr = new MediaRecorder(audioStream)
        mr.ondataavailable = event => {ws.send(event.data)}
        stream(mr)
    })
}

function stream(mr) {mr.start();setTimeout(() => {mr.stop(); stream(mr)}, 1000)}
ws.onmessage = event => {audio.src = window.URL.createObjectURL(event.data);audio.play()}
ws.onclose = event => {console.log(`closed with code ${event.code}`)}
ws.onerror = () => {console.log('error')}

后端：

import asyncio
import websockets


async def handler(websocket):
    while True:
        try:
            message = await websocket.recv()
            await websocket.send(message)
        except Exception as e:
            print(e)
            break


async def main():
    async with websockets.serve(handler, "", 8001):  # listen at port 8001
        await asyncio.Future()                       # run forever

if __name__ == "__main__":
    asyncio.run(main())

我尝试创建音频队列，但没有成功

Answer 1

处理此问题的最简单方法是不使用 Web Sockets。让你的 Python 服务器返回一个普通的 HTTP 流，然后浏览器将为你处理所有的缓冲区管理。

const audio = new Audio('https://your-python-server.example.com/stream');
audio.play();