项目简介

Free （）是使用技术开发的在线钢琴应用程序。它致力于为钢琴爱好者，音乐爱好者和所有其他创作者提供优美而简洁的平台。除了学习和工作外，您还可以欣赏钢琴和音乐的美丽。就像许多年前开发的钢琴游戏一样，免费钢琴仅更改为H5技术，并支持钢琴音乐的自动播放功能。

支持键盘键和鼠标点击播放，并且键上会有键和声名提示。此外，还有一个教学功能。一种方法是快速入门并通过简单的得分按钮执行，另一个方法是执行示例，这可以通过自动播放钢琴音乐来实现演示的目的。目前，这两个函数正在连续改进，如下图所示：

经验地址：

项目地址：

开发此类应用需要音乐理论知识吗？

当然。您仍然需要了解基本的音乐理论知识，例如音乐的名称，茎，节奏等。由于空间的限制，我不会在这里讨论。我推荐两个网站：

其他的是编程知识，以及如何将音乐理论知识转变为程序逻辑。当前的技术架构是VUE框架 + TONE.J。

您如何编写钢琴接口效果？

可以与CSS或地图一起使用。作者在此处直接使用CSS实施它。考虑到钢琴有黑色钥匙和白色钥匙，并且以有序的方式将黑键和白色钥匙排列为7：5模式，因此实施并不复杂。

.piano-wrap { width: 90%; margin: 20px auto; .piano-key-wrap { width: 100%; background: @dark; overflow: hidden; position: relative; .wkey { display: inline-block; width: 2.775%; height: 100%; margin: 0 auto; background: linear-gradient(white 10%, rgb(251, 251, 251) 92%, rgb(220, 220, 220) 93%, white 97%); border: solid 1px @dark; border-radius: 0 0 5px 5px; position: relative; &:active { background: linear-gradient(#eee 10%, #ddd 60%, #bbb 93%, #ccc 97%); } } .wkey-active { background: linear-gradient(#eee 10%, #ddd 60%, #bbb 93%, #ccc 97%); } .bkey-wrap { width: 20%; height: 0; position: absolute; top: 0; } .bkey-wrap1 {left: 0;} .bkey-wrap2 {left: 19.5%;}

.bkey-wrap3 {left: 39%;} .bkey-wrap4 {left: 58.3%;} .bkey-wrap5 {left: 77.7%;} .bkey { display: inline-block; width: 10%; height: 70%; background: linear-gradient(#000 10%, rgb(86, 86, 86) 85%, #000 90%); border-radius: 0 0 3px 3px; position: absolute; top: 0; overflow: hidden; &:active { background: linear-gradient(rgb(86, 86, 86) 10%, #000 90%, #222 100%); } } .bkey-active { background: linear-gradient(rgb(86, 86, 86) 10%, #000 90%, #222 100%); } .bkey:nth-child(1) {left: 9%;} .bkey:nth-child(2) {left: 23%;} .bkey:nth-child(3) {left: 50%;} .bkey:nth-child(4) {left: 65%;} .bkey:nth-child(5) {left: 79%;} } }

也有许多此类示例供参考，上述实施不一定采用：

我相信，只要CSS变量和值得到合理控制，每个人都可以创建一个更好的界面。

如何播放一个音符？

为了实现音频播放，最简单的方法是在过程中使用标签并通过触发的播放和方法来控制音频。这就是我从一开始就意识到的。

//

// 预先为每个音符都建立一个audio元素 initAudioDom() { var vm = this for (let i = 0; i< vm.Notes.length; i++) { var note = vm.Notes[i] $('.audios-wrap').append(`

for (let i = 0; i< audios.length; i++) { let audio = audios[i]; if (audio.src.indexOf(url) > -1) { var cloneAudioNode = audio.cloneNode() cloneAudioNode.play() cloneAudioNode.remove() break; } } }

以上是我的第一个实现，即不同的注释触发不同的播放。然后，也许出于好奇心，我尝试了.js，并通过.js +内置采样器实现了对音频播放的更有效控制。当然，它提供的许多复杂功能尚未使用。 。 。

// 初始化合成器 this.synth = SmapleLibrary.load({ instruments: "piano" }).toMaster() // 合成器触发音频释放 playNote(notename = 'C4', duration = '2n') { if (!this.synth) return this.synth.triggerAttackRelease(notename, duration); }

好吧，当前的代码与音乐美学和代码美学一致，这非常令人愉快。当然，我也希望Tone.js能够快速改善中国文档，否则很难入门。有兴趣的朋友可以首先访问其官方网站进行研究。

关于钢琴音乐的自动播放

这部分应该是开发整个应用程序的最困难部分，因为音乐或音乐得分本身非常复杂。根据百科全书的描述，五分位数得分起源于希腊，并且在成为当前的音乐得分标准之前已经不断改进了数千年。简化的分数出现在很长的时间里，但它仍然具有所有内部器官。可以说，简化得分也不简单。

作者的实现想法是将音乐得分格式用作将音乐得分转换为可识别的格式的载体，然后将其导入到程序中进行播放。这种可识别的格式如下，目前也使用：

{ name: '小星星', step: 'C', speed: '100', playState: '', mainTrack: ['1(1)',' 1(1)',' 5(1)',' 5(1)',' 6(1)',' 6(1)',' 5(2)',' 4(1)',' 4(1)',' 3(1)',' 3(1)',' 2(1)',' 2(1)',' 1(2)',' 5(1)',' 5(1)',' 4(1)',' 4(1)',' 3(1)',' 3(1)',' 2(2)',' 5(1)',' 5(1)',' 4(1)',' 4(1)',' 3(1)',' 3(1)',' 2(2)',' 1(1)',' 1(1)',' 5(1)',' 5(1)',' 6(1)',' 6(1)',' 5(2)',' 4(1)',' 4(1)',' 3(1)',' 3(1)',' 2(1)',' 2(1)',' 1(2)', '1<(1)', '1<(1)', '5<(1)', '5<(1)', '6<(1)', '6<(1)', '5<(2)', '4<(1)', '4<(1)', '3<(1)', '3<(1)', '2<(1)', '2<(1)', '1<(2)', '5<(1)', '5<(1)', '4<(1)', '4<(1)', '3<(1)', '3<(1)', '2<(2)', '5<(1)', '5<(1)', '4<(1)', '4<(1)', '3<(1)', '3<(1)', '2<(2)', '1<(1)', '1<(1)', '5<(1)', '5<(1)', '6<(1)', '6<(1)', '5<(2)', '4<(1)', '4<(1)', '3<(1)', '3<(1)', '2<(1)', '2<(1)', '1<(2)'], backingTrack: ['1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '1>(0.5)', '6>(0.5)', '4>(0.5)', '6>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '1>(0.5)', '6>(0.5)', '4>(0.5)', '6>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '7>>(0.5)', '5>(0.5)', '2>(0.5)', '5>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '1>(0.5)', '3>(0.5)', '5>(0.5)',' 1(0.5)', '1>(0.5)', '4>(0.5)', '6>(0.5)',' 1(0.5)', '1>(0.5)', '3>(0.5)', '5>(0.5)',' 1(0.5)', '5>>(0.5)', '7>>(0.5)', '2>(0.5)', '5>(0.5)', '1>(0.5)', '3>(0.5)', '5>(0.5)',' 1(0.5)', '1>(0.5)', '4>(0.5)', '6>(0.5)',' 1(0.5)', '1>(0.5)', '3>(0.5)', '5>(0.5)',' 1(0.5)', '5>>(0.5)', '7>>(0.5)', '2>(0.5)', '5>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '1>(0.5)', '6>(0.5)', '4>(0.5)', '6>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '1>(0.5)', '6>(0.5)', '4>(0.5)', '6>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '7>>(0.5)', '5>(0.5)', '2>(0.5)', '5>(0.5)', '1>(0.5)', '5>(0.5)', '3>(0.5)', '5>(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '1(0.75)', '6(0.25)', '4(0.5)', '6(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '1(0.75)', '6(0.25)', '4(0.5)', '6(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '7>(0.75)', '5(0.25)', '2(0.5)', '5(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '1(0.75)', '3(0.25)', '5(0.5)', '1<(0.5)', '1(0.75)', '4(0.25)', '6(0.5)', '1<(0.5)', '1(0.75)', '3(0.25)', '5(0.5)', '1<(0.5)', '5>(0.75)', '7>(0.25)', '2(0.5)', '5(0.5)', '1(0.75)', '3(0.25)', '5(0.5)', '1<(0.5)', '1(0.75)', '4(0.25)', '6(0.5)', '1<(0.5)', '1(0.75)', '3(0.25)', '5(0.5)', '1<(0.5)', '5>(0.75)', '7>(0.25)', '2(0.5)', '5(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '1(0.75)', '6(0.25)', '4(0.5)', '6(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '1(0.75)', '6(0.25)', '4(0.5)', '6(0.5)', '1(0.75)', '5(0.25)', '3(0.5)', '5(0.5)', '7>(0.75)', '5(0.25)', '2(0.5)', '5(0.5)', '1>(2)'] }

好吧，这不是很复杂和肿吗？ 。 。它使用一个简单的频谱作为载体，并通过特殊符号标记音高和持续时间，从而同时生成和播放它。尽管这种实施很简单，但它具有许多致命的缺点：

与常见的计算机分数格式不兼容，例如并未完全代表音乐的所有维度。例如，许多钢琴得分具有两个以上的曲目，这些曲目过于抽象和复杂，并且不实用，因此很难创建这种识别格式。音乐专业人士：您是什么？

因此，作者转向了另一种实施和分析方式，但是这个过程是耗时和劳动力密集的。目前只完成了一半，并且尚未正确分析一些细节。如果读者有好主意，他们可以在评论区域中留言进行讨论。

欢迎贡献和合作

我没想到会在很短的时间内会有这么多的星星（'・ω・´），所以我很害怕，以至于晚上下班时继续编码代码。 。 。但是，该项目仍然不完整，并且正在连续更新，尤其是对比赛得分的简介相对较少，目前仅是：

所有这些都是我手工制作的T_T。他们的能力有限，只知道这么多，所以是时候见证社区的力量了。

叉时，请按照GPL开源协议。最后，我将发布经验地址：