MIDI Board is a Netless app for Musicians, MIDI makers and Music educators.
MIDI Board是一个适用于声网 Netless互动白板的插件，为音乐人、MIDI制作者以及音乐教育工作者提供MIDI文件的编辑与预览。通过本插件，可以实现多端、多用户协同的MIDI编、作曲工作并导出，也可用于线上的音乐相关教学。
因图片显示比例的原因，推荐使用PC端浏览本文档
-
访问声网Workshop获取临时配置环境用于测试
-
将本仓库clone到本地并进入根目录
git clone https://github.com/CorpDreams/app-midi-board.git cd app-midi-board -
复制根目录下的
.env.example并重命名为.env后，分别填写文件中的VITE_APPID,VITE_ROOM_UUID和VITE_ROOM_TOKEN为刚刚获取的临时环境也可直接使用以下测试用环境（不保证最新可用）：
# Whiteboard SDK App ID VITE_APPID=ss4WoMf_EeqfCXcv33LmiA/izfIC88inXYJKw # Whiteboard Room UUID VITE_ROOM_UUID=c1063fe01d4311ed924cff6ad50661b2 # Whiteboard Room Token VITE_ROOM_TOKEN=NETLESSROOM_YWs9VWtNUk92M1JIN2I2Z284dCZleHBpcmVBdD0xNjYzMjMzMjM1OTE2Jm5vbmNlPWMxMmE5MGMwLTFkNDMtMTFlZC1iZWMyLWNiNTUzMjEwMzFlYSZyb2xlPTEmc2lnPWU0MTVmMmZlM2Y0OWUzYTM0YmYyM2IyODIyNDYyOGJkYmQ0MDM2MjNkZDVjODMzNjhhNmY2MTI5MWYyYWY0OTMmdXVpZD1jMTA2M2ZlMDFkNDMxMWVkOTI0Y2ZmNmFkNTA2NjFiMg -
在根目录使用命令行运行以下命令
npm install npm start
运行完成后浏览器会自动打开本地服务器URL（如果没有请手动访问，默认端口为3000），此时可看到白板应用demo已启动，点击右侧工具栏最后一个按钮打开插件列表，点击其中的
MidiBoard即可使用本插件~*推荐最大化插件窗口以获得最佳体验
点击此处，或直接访问http://midi.corpdreams.com:3000可试用本插件
-
**首次打开因需加载SDK的原因会有较长时间的白屏，请耐心等待。**如果长时间未显示可尝试刷新网页。
-
因试用环境为公用，所编辑内容可能会被删除，如需使用自己的环境，可在URL中进行传参（必需参数：
VITE_APPID,VITE_ROOM_UUID和VITE_ROOM_TOKEN），如：
http://43.138.239.25:3000/?VITE_APPID=ss4WoMf_EeqfCXcv33LmiA%2FizfIC88inXYJKw&VITE_ROOM_UUID=c1063fe01d4311ed924cff6ad50661b2&VITE_ROOM_TOKEN=NETLESSROOM_YWs9VWtNUk92M1JIN2I2Z284dCZleHBpcmVBdD0xNjYzMjMzMjM1OTE2Jm5vbmNlPWMxMmE5MGMwLTFkNDMtMTFlZC1iZWMyLWNiNTUzMjEwMzFlYSZyb2xlPTEmc2lnPWU0MTVmMmZlM2Y0OWUzYTM0YmYyM2IyODIyNDYyOGJkYmQ0MDM2MjNkZDVjODMzNjhhNmY2MTI5MWYyYWY0OTMmdXVpZD1jMTA2M2ZlMDFkNDMxMWVkOTI0Y2ZmNmFkNTA2NjFiMg
以下内容包含GIF及图片，为提高加载速度，推荐使用科学上网。
-
打开一个MIDI文件（可使用项目源目录的
examples文件夹中的示例MIDI文件）。
-
点击
播放按钮，或直接使用空格快捷键播放MIDI文件。
-
直接使用鼠标按住并拖动钢琴窗中的音符中部以改变音高及位置。
-
直接使用鼠标按住并拖动钢琴窗中的音符尾部以改变音符的持续时长。
-
点击右上角
铅笔按钮，或直接使用P快捷键切换到铅笔工具。使用该工具在钢琴窗中按住并拖动以画出特定时长的音符。
-
点击右上角
橡皮擦按钮，或直接使用E快捷键切换到橡皮擦工具。使用该工具在钢琴窗中点击或拖动以删除鼠标路径经过的音符。
-
再次点击已选中工具，或点击
鼠标按钮可切换回鼠标。 -
将鼠标移至
对齐处并从下拉菜单中选择所需的值并点击以切换音符操作的对齐模式。
-
将鼠标移至
时间轴处，使用鼠标滚轮可以调整显示范围的大小，也可通过拖拽上方横向滚动块的尾部调整。
-
鼠标在
时间轴上点击时，可以将播放进度调整至点击位置对应时间
-
拖拽上方横向滚动块中部可以调整显示区域（显示位置），注意：在正在播放时拖动，会因为播放进度的更新而导致位置跳动（因设置为播放时播放进度要始终显示在可见区域内）
-
将鼠标移至
轨道列表处从下拉菜单中选择所需的轨道并点击以切换。如只有单一轨道则不会出现下拉菜单，此时可以点击右侧新建轨道按钮新建一条轨道并添加音符。点击下拉菜单中轨道后的×按钮可删除对应轨道。
-
点击
保存文件按钮保存修改后的文件到本地。
功能详细介绍见下一章节功能详解
初次打开插件时，文件名称处会显示请打开或新建MIDI文件，请点击打开MIDI文件或新建MIDI文件按钮开始使用插件。项目源目录的examples文件夹中提供了几个MIDI文件可供使用，以下是部分文件名及可用于测试的功能：
本草纲目.mid 多乐器测试及多轨道MIDI文件编辑
野蜂飞舞.mid MIDI音频预览
Lemon.mid 简单MIDI编辑与续写
*感谢MidiShow网站用户提供用于测试的MIDI文件
也可以点击新建MIDI文件按钮从零开始编曲！
将鼠标移动到当前轨道名称处可展开轨道下拉列表，在下拉列表中点击其中轨道选项可切换到所点击的轨道，将鼠标移到轨道选项上时会显示删除轨道按钮，点击该按钮可删除对应轨道（会有确认提醒）。
若所要删除的轨道是当前显示轨道，需先将轨道切换至其他轨道后，再在轨道下拉列表中点击删除按钮删除。
：播放/暂停按钮
：重新播放按钮
将鼠标移到分数位置（即当前的对齐设置）上，会出现下拉菜单，可以在其中点击所想要设置的对齐。
对齐的分数的含义为，以一拍的1/n为最小单位对齐。
：切换为箭头工具（默认），选择该工具只可以修改已有音符
：切换为铅笔工具，使用该工具可以修改已有音符并绘制新音符
：切换为橡皮擦工具，使用该工具仅可以删除音符
工具的使用见下一章节基础操作
按住并左右拖动显示区域滑块的中部可以调节显示区域的位置，按住并作用拖动显示区域滑块的尾部可以调节显示范围的大小，滑块越长，显示范围越大。
进行音符绘制时，使用较小的显示范围可以更容易控制绘制的音符时长。
钢琴窗右侧每一行对应一个音高，每一根较粗且上方时间轴中带有数字的线分割的区域对应一个小节，时间轴上的数字为对应的小节号。每个小节根据MIDI文件的头部信息分为了对应数量的拍子（目前仅支持四一拍、四二拍、四三拍和四四拍），每一拍之间细线为根据对齐设置生成的分割线。
注：在特殊分辨率的屏幕上可能因为硬件原因导致分割线显示缺失/不均匀，此时可以调整浏览器缩放比例（快捷键为Ctrl+鼠标滚轮）直至分割线可以清晰显示
钢琴窗右侧每行的音高与其左侧钢琴键盘的按键的音高是对应的（以按键最小高度为准），右侧钢琴键盘点击可以听到对应音高的琴声。同时当调整音符音高时也能够预览对应音高的琴声。
用鼠标在时间轴上单击时，可以将播放进度调整至点击位置对应的时间。
在时间轴上使用滚轮同样可以调整显示范围的大小。
对音符的操作见下一章节基础操作
切换为铅笔工具，用鼠标在钢琴窗中空白区域按下并拖动，直至绘制出的音符时长达到所需。
切换为橡皮擦工具，用鼠标在钢琴窗中点击单个音符以删除，或是鼠标按住并在钢琴窗中拖动，此时将删除所有路径经过的音符。
切换为铅笔工具或箭头工具，用鼠标按住钢琴窗中的音符中部（即鼠标样式为四向箭头的位置）并移动鼠标直至音符处于所需的音高以及开始时间后松开鼠标。
切换为铅笔工具或箭头工具，用鼠标按住钢琴窗中的音符尾部（即鼠标样式为左右箭头的位置）并左右移动鼠标直至音符的长度达到所需的持续时间后松开鼠标。