Blynk + haodaMIDI,一个人就是一支乐队!

怎么也没想到,我,一个五音不全、乐理不通的人,有一天会来分享音乐相关的作品。还不是因为疫情隔离期间,家里没啥动静,实在太无聊了,总想搞点声音出来!

所以就想到了 haodaMIDI 模块。haodaMIDI 模块可以接入各种控制器控制如 micro:bit、掌控板、好搭酷、Arduino、徽章板等。haodaMIDI 模块带耳放,可以接耳机播放。硬音源带 128 种乐器音色,60 余种打击乐器,可以图形化编程,控制简单,完全可以制作各种电声乐器,或自动演奏乐器,相当于一支乐队。

由于 haodaMIDI 能演奏的乐器和音色实在是太多了,而我又不懂音乐,但是却硬想要涨涨知识装装逼、听听看每种乐器的效果。这可怎么办才好呢?如果用编程的方式将每一个音色去试一遍,每试一个音色,就要重新编程,然后重新上传程序,那岂不是太麻烦了,估计就算花几天时间,都试不过来。相信大家也碰到过类似的问题,制作 MIDI 作品时,到底用哪个音色呢?怎么测试呢?有没有简单方便的测试办法呢?

当然有!这时候 Blynk 就派上用场了。我们可以用 Blynk 做一个万能 MIDI 试音器,想要知道不同音色听起来是什么效果,直接在 Blynk 里面简单设置一下就行了。

Blynk 不需要任何实体按键,只要一个手机,想要多少按键,就可以设置多少按键,接线简单,成本低廉。再配合 haodaMIDI 模块,不要说万能 MIDI 试音器了,一个人组一支乐队完全都没有问题!不信?你看:

是不是很羡慕?也想拥有一支自己的乐队?那就继续往下看吧,手把手教你自制乐队!

# 电路连接

这里我们使用掌控板来编程,因为掌控板同时支持 Wi-Fi 和蓝牙,可以任选一种方式和 Blynk 进行连接。haodaMIDI 接在掌控板 P0 引脚。当然我们接线的时候,需要通过扩展板,这里画图偷懒了一下,把扩展板省略了。音箱或者耳机可以直接与 haodaMIDI 的耳机口连接。电路连接效果如下图所示:

这个电路相当简单,这里就不多做介绍了,相信你分分钟就搞定了。

# Blynk 项目设置

设置完电路,接着进行 Blynk App 设置。

在 Blynk App 中新建一个项目,取名就叫“MIDI 乐队”。然后拖入一个 Tabs 模块,方便设置多个界面。分别给这些 Tab 命名为“旋律”、“打击乐”、“MORE”等,你也可以根据自己的需求,设置更多的 Tab,这样可以让项目更加完善。

首先我们在“旋律”分栏中设置如下界面,可以大概设置成类似钢琴按键的样子。由于 Blynk 模块位置拖动的限制,钢琴黑键不能放在两个白键之间,所以只能放在白键的边上。然后用两个 Step V 模块,分别设置音阶音色调节按键,其中音阶的调节范围是:-1~9,;音色的调节范围是:0~127。然后再拖入一个 Vertical Slider 模块,用来调节音量,这里我将音量的调节范围设置为:0~100。所有模块的虚拟引脚设置如下左图所示,运行后每个按键显示的音符标号如下右图所示。

在“打击乐”分栏中,拖入一些 Button 模块,用来设置并模拟各种打击乐。根据自己的喜好设置自己想要的打击乐即可。每个按键的虚拟引脚编号和代表的乐器如下图所示。

关于 Blynk 更多详细的教程,这里不再展开,感兴趣的朋友,可以去购买笔者和裘炯涛老师一起写的书《物联网,So Easy》。

本书是基于 Blynk 物联网平台而写的,书中用到了 Arduino 代码和 Mixly 图形化编程两种模式来进行教学,在原理与使用方法上与 Mind+ 版的 Blynk 基本一致,读者可以参考学习。(妈呀,又是广告,防不胜防!)

读者们可以自行去网上搜索购买,或者直接点击下方链接购买,截止本文发表时是有 5 折优惠的。

# 程序编写

接下来开始编写程序,这次我们采用 Mind+ 图形化软件来进行编程。

## 添加模块

在编程时,我们主要用到两个库:BlynkhaodaMIDI 音乐模块。由于这两个库不是 Mind+ 的内置库,所以我们需要手动添加。

打开 Mind+ 软件,添加完主控板之后,在用户库中搜索“铁熊”或者“Blynk”,即可添加 Blynk 模块。没错,这里透露一个小技巧,Mind+ 用户库支持搜索了。

关于 Mind+ 中 Blynk 模块的更多介绍,请跳转:Blynk扩展库正式发布!Mind+软件中也能愉快地使用Blynk物联网平台了!

添加完 Blynk 模块之后,再来添加 haodaMIDI 模块,在搜索栏中输入网址:https://gitee.com/liliang9693/ext-haodamidi ,即可看到 haodaMIDI 音乐模块,点击添加即可。haodaMID 模块,暂时还不支持搜索,不过后面应该会支持。关于 haodaMIDI 编程模块的更多介绍,也可以跳转上述网址查看介绍。

添加完两个模块之后,就可以开始愉快的编程啦。其实程序很简单,我这里将它们分成 4 个部分。

## 主程序部分

首先是主程序部分。在主程序中,我们设置了几个变量:音量、音阶、音色,方便后面进行动态调节。然后初始化 haodaMIDI 和 Blynk 服务。

## 设置部分

然后是设置部分。在设置部分中,我们可以动态从 Blynk App 中接收状态变化,去调节音量(0~100)、音阶(-1~9)、音色(0~127)等。音量比较好理解,音阶其实代表的声音是低沉还是尖锐,音色代表的其实就是不同的乐器。具体不同的编号分别代表哪种乐器,可以在文末附录查询。这里通过改变音色的数值,就可以方便的改变想要使用的乐器了。

## 音符旋律部分

接着是音符旋律乐部分,也就是对应我们 Blynk App 中设置的钢琴按键,这些按键包括:C、C#、D、D#、E、F、F#、G、G#、A、A#、B,总共 12 个音符,这些音符再配合 10 个音阶,每种乐器都可以发出 120 种声音。然后再配合上面的 128 种音色设置,所以这部分总共可以发出 120×128=15360 种声音,Amazing!通过变量的方式,我们用很短的几句程序,竟然可以实现那么多种声音!这也充分说明了合理使用变量,可以大大简化程序。

这里放一张 MIDI 音符代码表,大家可以看一下音符(C~B)、音阶(-1~9)与对应代码(0~127)的关系。实际上程序底层就是根据音符和音阶,向 haodaMIDI 模块发送对应的代码 0~127。

## 打击乐器部分

最后是打击乐器部分。为什么要把打击乐与前面的乐器分开呢?

这是因为打击乐是不需要设置音阶和音符的,每种打击乐器只能发出一种声音,比如我们熟悉的鼓可以发出“咚咚咚”的声音,锣可以发出“乓乓乓”的声音。打击乐的编程如下图所示,这里我偷懒一下,只挑选了部分打击乐器,没有想上面一样,把所有的打击乐器都包含在内,实际上是可以包含所有打击乐器的。

至此,完整的程序就编写完整了。

# 音乐就是要分享

前面的部分,我们已经完成了所有硬件和软件的设置,那么视频中看到的多人多台设备演奏是怎么实现的呢?

其实很简单,只要在 Blynk 项目设置中,将 SHARED ACCESS 设置打开,然后点击 Generate Link 就会生成一个二维码,别的伙伴只要打开他的 Blynk App 扫描这个二维码,就会在他的手机中出现这个项目。当你对项目改动之后,别的手机上也会自动同步。

这时,你们就可以在不同的分栏里同时演奏不同的乐器啦,当然你们也可以在同一个分栏里演奏同一个乐器。另外,你也可以根据你的乐队需要,在不同的分栏里设置不同的乐器,硬件端几乎不用改变,程序也几乎不用变化,只要在手机里简单设置一下,你的乐队属性马上发生变化!流行乐?摇滚风?金属感?朋克?一切都可以随心而动!

Let's rock!!!

# 附录:音色编码对照表

(还没到终点,继续往下翻,还有程序哦。

这里还是偷懒惹的锅,其实在 Blynk App 中可以设置音色显示对应的乐器名称的,但是懒得打字了,所以就放一张对照表方便查询吧。

# 程序下载

欢迎关注公众号:铁熊玩创客,不定期更新创客制作、技术教程、创客教育等相关内容。

回复“MIDI乐队”获取本文对应的完整程序与 Mind+ 离线扩展库。


*欢迎转发朋友圈。如需转载,请注明出处和原作者。

往期精彩内容

创客项目缺少高颜值电路图?看这里就对了

小白也能学会的激光切割创意盒子设计方法

还在羡慕大疆 S1?教你自制麦轮战车

萌宠Pando机器人,不但能卖萌,还能跳太空步

学生获奖作品:戒烟帽

学生获奖作品:体感转向安全帽

掌控+Mixly+Blynk,让你的麦轮战甲嗨炸全场

搞定掌控板Siri语音控制,只要半小时

我知道你在看

当然可以,以下是一个简单的音乐乐队网页的示例,你可以根据你的需求进行修改和完善: ```html <!DOCTYPE html> <html> <head> <title>My Music Band</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, Helvetica, sans-serif; margin: 0; } /* Header style */ .header { background-color: #f1f1f1; text-align: center; padding: 20px; } /* Navigation style */ .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } .navbar a:hover { background-color: #ddd; color: black; } /* Content style */ .content { padding: 16px; } /* Footer style */ .footer { background-color: #f1f1f1; text-align: center; padding: 10px; } </style> </head> <body> <!-- Header --> <div class="header"> <h1>My Music Band</h1> </div> <!-- Navigation --> <div class="navbar"> <a href="#">Home</a> <a href="#">Music</a> <a href="#">Tour</a> <a href="#">Photos</a> <a href="#">Contact</a> </div> <!-- Content --> <div class="content"> <h2>Welcome to My Music Band</h2> <p>We are a group of passionate musicians dedicated to creating great music and sharing it with the world. Our music covers a wide range of genres including rock, pop, and blues. We have performed in numerous venues and events across the country and are always looking for new opportunities to reach more people with our music.</p> <h3>Upcoming Tour Dates</h3> <ul> <li>June 1 - New York City, NY</li> <li>June 15 - Los Angeles, CA</li> <li>June 30 - Chicago, IL</li> <li>July 15 - Nashville, TN</li> <li>July 31 - Austin, TX</li> </ul> <h3>Our Music</h3> <p>Check out some of our latest tracks:</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <h3>Photos</h3> <img src="https://via.placeholder.com/300x200" alt="Band Photo"> <img src="https://via.placeholder.com/300x200" alt="Band Photo"> <img src="https://via.placeholder.com/300x200" alt="Band Photo"> <h3>Contact Us</h3> <p>Send us a message:</p> <form action="#" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <input type="submit" value="Submit"> </form> </div> <!-- Footer --> <div class="footer"> <p>Copyright © My Music Band</p> </div> </body> </html> ``` 这个示例包括了一个基本的页面结构,包括一个头部、一个导航菜单、一些内容和一个页脚。你可以根据你的需求进行修改,比如改变导航菜单的链接、添加更多的内容、更改样式等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值