1.说明
本页面用于介绍如何在wikidot中嵌入midi文件并展示相应的可视化效果，使用者需要具备一定的HTML和CSS语法技能与音乐知识。
组件来源于html midi播放器，<midi-player> 和 <midi-visualizer> HTML 元素由 @magenta/music （Magenta.js） 提供支持，完全可设置样式和脚本。
许可协议为BSD 2-Clause License
+ 显示许可证
Copyright (c) 2020, Ondřej Cífka
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
以下为本人使用“Lovely Composer”及其附带音色写的几首8bit风格示例歌曲，均适用于CC-BY-SA 3.0协议。
《拉赫曼尼诺夫前奏曲-Remix》
+ 背景信息
Rachmaninoff - Prélude in C sharp minor, Op. 3, No. 2
升c小调前奏曲
原曲已进入公有领域，B站有相应的电子版本
以下介绍来自于wikipedia
这首作品是19岁的拉赫曼尼诺夫在1892年5月29日从莫斯科音乐学院毕业后以“自由艺术家”的身份创作的首批作品之一。1892年9月26日，他在莫斯科电气展览会的一场音乐会上首次演奏了这首新作品。次年，它作为五首Morceaux de fantaisie （Op. 3）组曲中的第二首出版，全部献给他在音乐学院的和声老师安东·阿伦斯基。因为当时俄罗斯不是1886年伯尔尼公约的缔约国，俄罗斯出版商不支付版税，因此他从这篇文章中获得的唯一经济回报是40卢布（约合工厂工人两个月工资）的出版费。
《循环》
《空军进行曲-8bit》
+ 背景信息
斯大林空军进行曲/飞得更高(Авиамарш)
也被称作飞行员进行曲（俄语：Марш авиаторов），是一首1923年创作的苏联歌曲，由尤里·海特作曲，帕维尔·赫尔曼作词。自1933年开始，该歌曲成为苏联空军的进行曲。(介绍来自于wikipedia)
原曲已进入公有领域，B站有相应的传统版本
《攻击战-8bit》
+ 背景信息
《攻击战》（朝鲜语：공격전이다／攻擊戰이다 Gonggyeokjeonida）， 是一首朝鲜的歌曲，由朝鲜文学艺术总同盟旗下作曲家安正浩（안정호）作曲，尹斗根（윤두근）填词，由普天堡电子乐团的尹惠英演唱。2010年1月27日的《劳动新闻》中首次披露了这首歌的名称与歌词。歌词内容包含朝鲜著名的白头山、正日峰，以及对全体朝鲜国民勇气的夸赞。(介绍来自于wikipedia)
原曲可能具有版权，但其目前已成为无版权歌曲，B站有相应的摇滚版本
《塔朗泰拉-8bit》
+ 背景信息
“Tarantella Napoletana”是路易吉·里奇 （Luigi Ricci） 于1852年创作的一首塔兰泰拉舞曲，即意大利传统舞曲，与那不勒斯有关。(介绍来自于wikipedia)
原曲已进入公有领域，B站有相应的传统版本
值得注意的是，在浏览器上播放midi其使用的库中自带的音源，因此会与上述音频的音色不同，使用时需要注意。
2.演示
简单midi可视化
普通midi样式
附注：通用的样式，适用于大部分midi
五线谱样式
附注：五线谱样式更适合于简单曲调的midi
瀑布样式
注意：本样式可能因为源JS库年久失修，现已出现了不能播放可视化的问题。
高级midi显示
风格已适配sigma-9版式
摩斯密码
3.使用
上传midi文件
由于跨源资源共享（Cross-Origin Resource Sharing，CORS）问题，该JS库无法直接使用本地文件以及wikidot上的文件链接，这需要你拥有一个Github库，将文件上传到Github上即可解决该问题。
考虑到国内很可能无法直接访问github，建议使用JsDeliver进行加速，简要的操作要领为：发布一个release，然后使用该链接即可：
嵌入代码方块
以五线谱样式举例
[[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>