琴键飞舞开源项目Vibe Coding

我要开发同款
Perwaymean2026年10月02日
3阅读

技术信息

语言技术
HTML5、CSS、JavaScript、Vue、前端
系统类型
Web
行业分类
游戏
开源地址
https://github.com/Perwaymean/piano-game-app
授权协议
Non-Commercial Use

功能介绍

生活娱乐 · 琴键飞舞 —— 用电脑键盘弹钢琴的 AI 沉浸式音乐游戏
是什么: 一款纯前端网页游戏(网站),打开浏览器即可玩,无需下载安装。用电脑键盘或手机触屏弹奏钢琴,支持跟弹打分和自由弹奏双模式,内置 AI 音频转谱功能——上传本地音频文件即可自动生成乐谱和按键提示,配 Three.js 3D 钢琴视觉、粒子特效、多风格背景与摄像头画中画,风格用户可自由切换。
面向谁: 男女老少皆宜。核心用户三类——① 喜欢音乐但没学过钢琴的普通人(学生、上班族,想放松解压);② 有一定钢琴基础、想用碎片时间练琴的爱好者;③ 对 AI 技术好奇、想体验"上传首歌就能自动生成乐谱"的科技尝鲜者。
主要功能:
功能一:键盘弹奏 + 跟弹打分
用电脑键盘(A/S/D/F/G/H/J 弹白键,W/E/T/Y/U 弹黑键,Z/X 切换八度)或手机触屏弹奏钢琴。跟弹模式下,音符从屏幕上方下落,到达判定线时按下对应键即可得分,判定分为 Perfect / Great / Good / Miss 四档,配有连击系统和结算评分。Web Audio API 保证按下到出声延迟 < 50ms,支持钢琴、音乐盒、Pad 等多种音色。
功能二:AI 音频转谱
上传本地 MP4 视频或音频文件(WAV/MP3/OGG/FLAC),浏览器端 Spotify Basic Pitch 神经网络自动识别音高与节奏,生成 MIDI 音符数据,再转换为五线谱(OpenSheetMusicDisplay 渲染)和下落式按键提示。用户无需任何乐理知识,也不需要找 MIDI 文件——上传一首喜欢的歌,就能立刻跟着弹。全程音频不出本机,隐私零泄露。
功能三:沉浸式 3D 视觉
Three.js 渲染 3D 钢琴键盘与粒子系统,按键时触发粒子爆发特效。背景风格可在"星空""樱花""赛博朋克"三种主题间切换,还可开启摄像头画中画功能。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论