在此页面上传和播放本地的MIDI文件。
最近花时间研究了MIDI这种文件格式，感觉发现了“新大陆”：和常见的音频文件（如.mp3/.flac等）不同，midi文件主要是记录事件（如各个音符的按压事件和控制器相关指令）而不是压缩后的音频数据，这也是为什么midi文件体积可以很小（数十KB）但是歌曲的播放时长却可以达到普通几MB的三、四分钟MP3文件的水平。MIDI文件最终播放时呈现的效果和加载的音色库相关，使用不同细腻度的音色库来播放MIDI文件，最终得到的歌曲听感会有差异。
目前主流的操作系统都可以直接播放MIDI文件，如果要在浏览器内播放MIDI，需要依赖Web Audio API，解析MIDI文件并加载音色库，合成音频再播放。
播放器设计
博客目前已经支持发布MIDI音乐的文章了，文章的路径ID如果是[m]开头的，即表示是带音乐的发文。
播放器的核心实现逻辑和代码参考了开源的在线MIDI编辑器signal-app：https://signal.vercel.app/edit，GitHub上仓库地址：https://github.com/ryohey/signal，这个编辑器实现基于TypeScript + React + Canvas。
博客的MIDI播放器在signal-app原来代码的基础上，精简掉大部分关于MIDI编辑的内容，把它作为一个纯粹的音频文件播放器来进行开发，最终的打包gzip体积仅增加了几十KB。目前播放器支持如下功能（后续播放器的功能会有所调整）：
- 自适应布局，跟随博客切换主题
- 后退5秒
- 单曲循环
- 跳转开头
- 播放/继续播放/暂停/停止
- 静音/取消静音
- 节拍器功能
- 滑动进度条定位
- Track 静音
- 键盘模式(88/76/61/49键)切换
- 音符瀑布流可视化
- 固定播放自定义选择的小节
- 其他功能敬请探索...
博客播放器新的功能在开发中，当然也有一些BUG等待被发现和解决。以及，播放器在移动端上的性能问题，播放时会有一点卡顿，不过在我的开发机器Chrome上测试播放还是很流畅。
播放器初次加载时，因为要下载音色库文件，会比较缓慢，下载完毕后会将前置资源放至indexedDB进行缓存，之后就无需再次等待下载音色库了，点击即可直接播放MIDI。
最后
在博客内第一首发布的MIDI音乐是由德国乐队Fool's Garden带来的Lemon Tree，欢迎聆听。MIDI文件下载自：https://bitmidi.com/lemon-tree-mid
为什么把它作为博客第一首要分享的音乐？一是因为博客是基于Deno Fresh来开发搭建的，而这个Web框架的Logo就是一个柠檬！我觉得十分有意义；而每每听到这首熟悉的旋律，总能让自己回忆起高一开学前夏令营的时光：高中的英语老师在第一堂课上给我们放的就是这首英文歌。
