piano

Omi Piano 是一个使用 Omi 框架和 Omi Snippets 构建的网页钢琴应用。它通过键盘的 7 个数字键、5 个字母键以及 Shift、Control、Option、Command 四个功能键，组合出 60 个钢琴单音（35 个全音和 25 个半音），覆盖从倍低音到倍高音的音域。 项目提供了完整的开发与安装流程，可通过 npm 安装 omi-piano 包，或克隆仓库后运行 npm start 在本地启动。界面使用 flex 布局和 CSS 阴影绘制黑白琴键，点击琴键或按下对应键盘按键即可播放音符，并伴有按键高亮动画。 应用内置了《蒲公英的约定》和《月亮代表我的心》两首曲谱，支持自动播放。自动播放逻辑通过递归和 Promise 控制音符之间的停顿时间，并在播放时同步高亮底部音符显示。项目还介绍了简谱与键盘按键的映射关系，以及如何编写自定义曲谱。 技术实现上，项目没有使用 React、Vue 或 Angular 等主流框架，而是采用 Omi 的 JSX 与 Web Components 方案，结合 Omil 单文件组件加载器和基于 Proxy 的组件通信机制。音频播放基于 HTML5 的 audio 标签，通过 ref 获取节点并控制播放进度。 该项目适合对前端组件化、键盘事件处理和音频播放感兴趣的开发者学习参考，也适合音乐爱好者作为简单的网页钢琴工具使用。