Skip to content
Word 'Clavier' extracted from Well-tempered Claviar by Bach. Not only the keyboard ⌨️ but the key board 🎹 Type something here, and listen the music for your words.
JavaScript Vue HTML CSS
Branch: master
Clone or download
Pull request Compare This branch is 19 commits ahead, 38 commits behind WarpPrism:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Vimeo
build
config
src
static
.babelrc
.editorconfig
.gitignore
.postcssrc.js
LICENSE
README.md
favicon.png
index.html
package-lock.json
package.json
yarn.lock

README.md

最近以双鸭山大佬的 Auto Piano 为基础做了一款钢琴类web应用,名字定为键盘(Clavier)。Clavier 选自 Bach 的 Well-tempered Clavier,键盘不仅仅是计算机的键盘⌨️,也可以是乐器的键盘🎹,是一款丰富输入体验的服务设计试水项目。

此文权当作该项目的总结和分享~

项目简介

Watch the video

体验地址:https://mysteriousming.github.io/Clavier/dist/#/

项目演示:https://vimeo.com/337214345

项目说明:https://www.suncreativesolution.com/#/project/clavier

架构来源于双鸭山大佬的auto piano。

双鸭山大佬原项目,真的特别出色:

autopiano.png

体验地址: http://crystalworld.gitee.io/qpiano/#/

项目地址: https://github.com/WarpPrism/AutoPiano

玩法

基于英语的字母使用频率和字母组合(如 th,er,in,ed 等)的使用频率,设计音名与字母之间的对应关系,使之听起来较为符合某一种特定的音乐风格。在输入框中直接进行英文输入,即可随输入听到相应音乐。

目前提供了四种音乐风格可供选择,分别是古典与浪漫时期的 Major Scale,印象派的 Whole Tone Scale(这个用起来真的有 Debussy 的味道),现代主义中代表大佬 Schoenberg 的 Chromatic Scale,和远东风格的 Pentatonic Scale。

钢琴界面效果

在大佬的基础上稍微修改了 CSS

codepen上也有很多这样的例子供参考,不一定采用上述实现:

https://codepen.io/search/pens?q=piano&page=1&order=popularity&depth=everything

相信只要合理地控制css变量和数值,大家能做出更好的 Piano 界面。

下一步计划

  1. 播放已经输入的段落;
  2. 在播放功能实现的基础上,根据单词长度调节 meters,使之更符合对应的音乐风格。

欢迎贡献协作

FORK时,请遵循GPL开源协议。

最后

最后再贴一下体验地址: https://mysteriousming.github.io/Clavier/dist/#/

欢迎体验,分享。

如果下一步计划没有继续实施,那一定是因为摸太多鱼导致毕设不过延毕了。希望蟹老板不要打死我。

再次感谢双鸭山大佬 晶体世界~

You can’t perform that action at this time.