如何在Golang WebAssembly客户端中播放流式传输的mp3音频文件

完全可以实现，核心逻辑是将Go WebAssembly侧拿到的io.ReadCloser数据流持续同步到浏览器的音频播放接口即可，目前有两种成熟的落地路径：

方案1：基于MediaSource Extensions API实现（兼容性最佳） #

这个方案适配绝大多数主流浏览器，对mp3、flac格式的支持度也最高，实现步骤如下：

• 先在浏览器侧创建HTML5 <audio>元素，同时初始化MediaSource实例，将MediaSource的实例URL赋值给audio元素的src属性
• 在Go WASM侧从io.ReadCloser中按固定大小（建议32KB~128KB，可根据网络状况调整）循环读取二进制块，通过Go的JS交互接口将二进制块转为Uint8Array传递给浏览器侧
• 把拿到的二进制块写入MediaSource绑定的SourceBuffer中，注意控制写入节奏：当SourceBuffer.updating为true时暂停写入，等updateend事件触发后再写入下一块，避免缓冲区溢出
• 读取完所有流数据或者播放终止时，先调用MediaSource.endOfStream()，再关闭io.ReadCloser释放资源

方案2：基于Web ReadableStream实现（开发更简洁） #

如果只需要兼容2020年之后发布的现代浏览器，可以用更简单的可读流对接方案：

• 在Go WASM侧将io.ReadCloser封装为符合Web标准的ReadableStream对象，通过JS交互接口暴露给浏览器环境
• 直接将封装好的ReadableStream赋值给audio元素的srcObject属性，浏览器会自动处理流拉取、缓冲、解码逻辑，不需要手动管理缓冲区状态

注意事项 #

• 播放flac格式前需要确认目标浏览器支持flac原生解码，目前新版Chrome、Firefox、Edge都已原生支持，低版本浏览器可以引入第三方flac解码库做兼容处理
• 不管使用哪种方案，都需要在流中断、播放暂停、页面卸载等场景下主动调用io.ReadCloser.Close()，避免出现内存泄漏
• 如果需要支持音频进度条拖动，需要服务器端支持HTTP Range请求，播放侧根据用户拖动的进度位置发送对应Range头拉取指定偏移量的流即可

内容的提问来源于stack exchange，提问作者jypelle