×

开源Web 音频播放器，多人同步听歌，GitHub 收获 2.4k Star

hqy hqy 发表于2025-07-14 00:49:31 浏览13 评论0

抢沙发发表评论

Beatsync

Beatsync 是由 Freeman Jiang 发起的开源 Web 音频播放器，旨在实现多设备间毫秒级别的音频同步播放，支持 Web 空间音效模拟，且无需安装任何客户端，只需打开浏览器，就能将多台设备联合成一个环绕声系统。项目基于现代浏览器技术，融合 Web Audio API 和自研时钟同步机制，是「多人同步听歌」新方向的代表之作。


                                


✨ 核心功能与亮点

1.毫秒级同步

  • • 借鉴 NTP（网络时间协议）原理，通过 websocket 实时校准客户端，本地播放器保持 ±几毫秒精度同步。

2.空间音效模拟

  • • 用户可拖拽设备图标到虚拟空间中，系统将根据距离播放音量，打造环绕声或分布式音效体验。

3.跨平台浏览器兼容

  • • 支持所有现代浏览器，官方推荐 Chrome 获取最佳体验；移动端（iOS/Android）支持仍在持续优化中。

4.开箱即用 & 自托管

  • • 提供官方演示（beatsync.gg），也支持用户自行部署服务端 + 客户端，适合局域网或各种网络环境使用。

5.UI 体验流畅


  • • 具备加载状态、同步指示器、空间布局界面等简洁功能，用户体验设计成熟。


图片


? 技术实现

  • • 后端（apps/server）
    由 Bun 搭建，提供 HTTP 接口与 WebSocket 链接，用于同步时间与控制指令。
  • • 前端（apps/client）
    使用 Next.js、TailwindCSS、Shadcn/ui 构建 UI 与播放控制。
  • • 公共库（packages/shared）
    存放类型定义、同步协议等在前后端共享的模块。
  • • 部署架构
    使用 Turborepo 管理 monorepo 多包结构，开发与部署兼容多平台。

? 安装与使用指南

1.准备环境：安装 Bun；
2.克隆仓库：

git clone https://github.com/freeman-jiang/beatsync.git
cd beatsync

3.安装依赖：


bun install

4.设置 .env：
在 apps/client/.env 填写：

NEXT_PUBLIC_API_URL=http://localhost:8080
NEXT_PUBLIC_WS_URL=ws://localhost:8080/ws

5.启动项目：

bun dev

服务端监听 8080，客户端 UI 在 3000。

6.本地使用：打开 http://localhost:3000，上传音频、加入房间，多台设备访问同一地址即可同步播放。

? 使用场景与社区反馈

  • • 共听体验：适合家庭成员、远程朋友同步听歌或语言学习等。
  • • DIY 音响：可以多个设备组成分布式“环绕声阵列”。
  • • 教程与演示：可用于直播教室、虚拟聚会等同步情景。

? 项目信息

  • • 项目地址：https://github.com/freeman-jiang/beatsync
  • • 官方：https://www.beatsync.gg/
  • • Stars：≈ 2.4k ⭐ / Forks 146 ?
  • • License：MIT



打赏

本文链接：https://kinber.cn/post/5265.html 转载需授权！

分享到：


推荐本站淘宝优惠价购买喜欢的宝贝:

image.png

 您阅读本篇文章共花了： 

群贤毕至

访客