| layout | title | tags |
|---|---|---|
post |
有趣的钢琴演奏项目 |
其他 |
今天推荐一个有趣的项目~
用键盘8个键演奏一首蒲公英的约定送给 996 的自己或者一首月亮代表我的心给七夕的她，非常简单~
这个项目仅仅用了几个简单的前端技术实现，献给每一位挚爱音乐的代码家🎹
项目中没有使用市面主流的框架（React，Vue 和 Angular ）和热门的技术，而用的是Omi框架（JSX+WebComponents），还有 Omil 的单文件组件 SFCs 加载器，组件通讯基于Proxy特性，并结合了 VScode 的插件 Eno-Snippets基于AST和正则实时编译.eno或.omi 后缀组件减轻部分的 Webpack 的局部编译压力。
非常好的是该项目除了完成度很好，还在项目里面完整介绍了构建该应用涉及的知识点，包括：
- 技术点和目录结构
- 简单乐理知识
- 如何构建钢琴界面
- 如何播放钢琴音
- 如何音符同步显示
- 如何自动播放以及《蒲公英的约定》和《月亮代表我的心》曲谱
第一次尝试录屏，效果不太好。可以使用如下网站体验
https://wscats.github.io/piano/build/