返回赛题列表
网页钢琴
进阶可弹奏的虚拟钢琴键盘——键盘映射黑白键、触屏多指触控、按压视觉反馈与 Web Audio 合成音色，支持录制并回放旋律。考察 Web Audio API、键盘事件设计与 CSS 钢琴布局。
规则说明▼
模型需要生成一个单文件 HTML（内联 CSS + 原生 JS），不得使用 JSX 或任何需要编译的语法。
所有音色必须通过 Web Audio API 自行合成（OscillatorNode、GainNode 等），不允许加载外部音频采样文件。
phase1：一句话需求，测模型对"虚拟钢琴"的默认认知能做到什么程度
phase2：给出包含曲库跟弹在内的完整详细需求，测模型在复杂需求下的执行力
phase3 step1：在新的对话窗口，给出 phase1 的一句话需求，要求模型自行撰写 PRD
phase3 step2：在同一个对话窗口，要求模型根据自己生成的 PRD 输出 HTML 文件
Prompt▼
phase1：▼
做一个可弹奏的虚拟钢琴网页。单文件 HTML。
phase2：▼
做一个可弹奏的虚拟钢琴网页。单文件 HTML。
要求：
- 至少覆盖 2 个八度（C4–B5）的完整钢琴键盘，黑白键布局还原真实钢琴的排列
- 电脑键盘映射：用两排按键（如 A-L 行映射白键，W/E/T/Y/U 等映射黑键）弹奏，按键提示显示在琴键上
- 触屏支持：移动端可多指同时触控弹奏和弦
- 按下琴键时有明显的视觉按压反馈（颜色变化/下沉效果）
- 音色通过 Web Audio API 合成（OscillatorNode），不使用外部音频文件
- 提供录制功能：点击录制按钮后开始记录弹奏的音符和时间戳，再次点击停止，可回放录制的旋律
- 内置示例曲库：至少提供 3 首不同风格的预置示例曲（如《小星星》《欢乐颂》《卡农》片段等），用户可从列表中选择并一键播放，播放时琴键同步高亮显示当前音符
- 跟弹练习模式：选择一首示例曲后可进入跟弹模式，琴键上高亮提示下一个该按的音符，用户按对后自动前进到下一个音符，按错时给出视觉提示，完成后显示准确率和用时
- 界面美观，有乐器的质感
请输出完整的 HTML。
phase3(2 steps)▼
phase3 step1：▼
以下是一个设计需求：
"做一个可弹奏的虚拟钢琴网页。单文件 HTML。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase3 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。