原文链接讨厌996？ComeHere&Relax~最近用Vue+Tone.js做了一个钢琴web应用，命名为AutoPiano，生活就像音乐一样，欢快而自由。本文旨在作为项目的总结与分享~项目介绍AutoPiano是一款采用HTML5技术开发的在线钢琴应用，致力于提供一个优雅简洁的平台，让你在学习和工作之余享受钢琴与音乐之美.类似于Flash多年前开发的钢琴游戏，FreePiano只是改变了H5的技术，同时支持钢琴曲的自动播放功能。AutoPiano支持键盘按键和鼠标点击弹奏，按键上会有按键提示和音名提示。此外，AutoPiano还有教学功能，一种是快速上手，通过简单的乐谱按钮进行弹奏，另一种是弹奏范例，通过钢琴曲的自动播放达到示范的目的。目前这两个功能正在不断完善中，如下图所示：体验地址：http://crystalworld.gitee.io/...项目地址：https://github.com/WarpPrism/...像这样开发App需要乐理知识吗？当然。乐理基础知识还是要有的，比如CDEFGAB音名、五线谱、调式、节奏等等，还是要知道一点的。篇幅有限，这里就不展开讨论了。推荐两个网站：https://www.bilibili.com/vide...https://www.cnblogs.com/devym...剩下的就是编程知识，以及如何将乐理知识转化为程序逻辑。AutoPiano目前采用的技术架构是vue框架+tone.js。钢琴界面效果器是怎么写的？可以使用CSS或纹理。作者这里直接用css实现了。考虑到钢琴有黑键和白键，黑键和白键以7:5的比例有序排列，实现起来并不复杂。
