1.说明
本页面用于介绍如何在wikidot中嵌入midi文件并展示相应的可视化效果，使用者需要具备一定的HTML和CSS语法技能与音乐知识。
组件来源于html midi播放器，<midi-player> 和 <midi-visualizer> HTML 元素由 @magenta/music （Magenta.js） 提供支持，完全可设置样式和脚本。
许可协议为BSD 2-Clause License
以下为本人使用“Lovely Composer”及其附带音色写的几首8bit风格示例歌曲，均适用于CC-BY-SA 3.0协议。
《拉赫曼尼诺夫前奏曲-Remix》
《循环》
《空军进行曲-8bit》
《攻击战-8bit》
《塔朗泰拉-8bit》
值得注意的是，在浏览器上播放midi其使用的库中自带的音源，因此会与上述音频的音色不同，使用时需要注意。
2.演示
简单midi可视化
普通midi样式
附注：通用的样式，适用于大部分midi
五线谱样式
附注：五线谱样式更适合于简单曲调的midi
瀑布样式
注意：本样式可能因为源JS库年久失修，现已出现了不能播放可视化的问题。
高级midi显示
风格已适配sigma-9版式
摩斯密码
3.使用
上传midi文件
由于跨源资源共享（Cross-Origin Resource Sharing，CORS）问题，该JS库无法直接使用本地文件以及wikidot上的文件链接，这需要你拥有一个Github库，将文件上传到Github上即可解决该问题。
考虑到国内很可能无法直接访问github，建议使用JsDeliver进行加速，简要的操作要领为：发布一个release，然后使用该链接即可：
https://cdn.jsdelivr.net/gh/用户名/页面名@版本号>/文件名.midi。
嵌入代码方块
以五线谱样式举例
[[html]] <midi-player src="https://cdn.jsdelivr.net/gh/msjand/live2d-jand@0.0.3/air-march.mid" sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/salamander" visualizer="#myStaffVisualizer"> </midi-player> <midi-visualizer type="staff" id="myStaffVisualizer" src="https://cdn.jsdelivr.net/gh/msjand/live2d-jand@0.0.2/loop.mid"> </midi-visualizer> <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0"></script> [[/html]]
其中的<midiplayer>标签为播放器部分，而<midi-visualizer>标签为midi可视化部分，其顺序与其相互位置相关。
https://cdn.jsdelivr.net/gh/msjand/live2d-jand@0.0.2/loop.mid为笔者使用的URL，可见已经进行了cdn加速。
<midi-visualizer>中的type有三种样式piano-roll/staff/waterfall，分别对应普通样式、五线谱样式、瀑布样式。
其余midi可视化组件的参数可在magenta-js中查询。
最重要的是
<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0"></script>
标签，其指向改组件的JS库，也经过了CDN加速，每个html块中必须包含该原封不动的标签。
同时，该插件可以更改midi音色，库中有三种内置音色，分别为：
钢琴（https://storage.googleapis.com/magentadata/js/soundfonts/salamander）
默认（https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus）
爵士鼓（https://storage.googleapis.com/magentadata/js/soundfonts/jazz_kit）
更改相应的sound-font链接即可，也可以使用相同的方法在github上上传你想用的音色，再使用类似的方法引用。
定制高级样式
midi可视化可以使用对应的CSS样式，例如上文展示的（已加入注释）：
<style> /* 自定义 MIDI 播放器样式 */ #section1 midi-player { display: block; /* 让播放器以块级元素显示 */ width: inherit; /* 继承父级的宽度 */ margin: 4px; /* 设置播放器的外边距 */ margin-bottom: 0; /* 底部外边距设置为 0 */ } #section1 midi-player::part(control-panel) { background: #fff; /* 控制面板背景颜色为白色 */ border: 2px solid #000; /* 边框为黑色，宽度 2px */ border-radius: 10px 10px 0 0; /* 圆角设置：上两个角为圆角，下两个为直角 */ } #section1 midi-player::part(play-button) { color: maroon; /* 播放按钮的颜色为栗色 */ border: 2px solid currentColor; /* 边框颜色与当前文本颜色一致 */ background-color: #fff; /* 背景色为白色 */ border-radius: 20px; /* 按钮圆角设置为 20px */ transition: all 0.2s; /* 添加过渡效果，使样式切换更平滑 */ content: 'hello'; /* 设置伪元素内容为 'hello'（无实际效果，但可修改显示内容） */ } #section1 midi-player::part(play-button):hover { color: maroon; /* 鼠标悬停时，按钮文本颜色保持栗色 */ background-color: #fff; /* 悬停时背景色保持白色 */ border-radius: 10px; /* 悬停时改变圆角为 10px */ } #section1 midi-player::part(time) { font-family: monospace; /* 时间显示使用等宽字体 */ } /* 自定义 MIDI 可视化样式 */ #section1 midi-visualizer .piano-roll-visualizer { background: #fff; /* 可视化背景颜色为白色 */ border: 2px solid black; /* 黑色边框，宽度 2px */ border-top: none; /* 顶部边框取消 */ border-radius: 0 0 10px 10px; /* 设置下两个角为圆角 */ margin: 4px; /* 外边距为 4px */ margin-top: 0; /* 顶部外边距设置为 0 */ overflow: auto; /* 超出内容可滚动 */ } #section1 midi-visualizer svg rect.note { opacity: 0.6; /* 音符矩形透明度为 0.6 */ stroke-width: 2; /* 描边宽度为 2 */ } #section1 midi-visualizer svg rect.note[data-instrument="0"] { fill: red; /* 设置乐器 0 的音符颜色为红色 */ stroke: red; /* 描边颜色为红色 */ } #section1 midi-visualizer svg rect.note[data-instrument="1"] { fill: green; /* 设置乐器 1 的音符颜色为绿色 */ stroke: green; /* 描边颜色为绿色 */ } #section1 midi-visualizer svg rect.note[data-instrument="2"] { fill: blue; /* 设置乐器 2 的音符颜色为蓝色 */ stroke: blue; /* 描边颜色为蓝色 */ } #section1 midi-visualizer svg rect.note[data-is-drum="true"] { fill: yellow; /* 打击乐音符的颜色为黄色 */ stroke: yellow; /* 打击乐音符的描边颜色为黄色 */ } #section1 midi-visualizer svg rect.note.active { opacity: 1; /* 激活的音符透明度为 1 */ stroke: maroon; /* 激活音符的描边颜色为栗色 */ } </style> <body> <!-- 定义一个包含 MIDI 播放器和可视化工具的部分 --> <section id="section1"> <!-- MIDI 播放器组件 --> <midi-player src="https://cdn.jsdelivr.net/gh/msjand/live2d-jand@0.0.1/Rachmaninoff.mid" sound-font visualizer="#section1 midi-visualizer"> </midi-player> <!-- MIDI 可视化组件 --> <midi-visualizer src="https://cdn.jsdelivr.net/gh/msjand/live2d-jand@0.0.1/Rachmaninoff.mid"> </midi-visualizer> </section> <!-- 引入相关库文件 --> <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script> </body>