HTML5 中的 MIDI 音乐支持

Posted 2023-02-16

【中文标题】HTML5 中的 MIDI 音乐支持

【英文标题】：MIDI music support in HTML5

【发布时间】：2013-01-05 02:53:37

【问题描述】：

现在，javascript 和 windows 媒体播放器/quicktime 浏览器插件支持在 html 中播放 midi。 我想知道将来是否有任何关于 html5 将支持播放带有音频标签的 midi 的消息？

【参考方案1】：

如果你想播放 MIDI 文件，你可以在这里看到他们是如何做到的： http://mudcu.be/midi-js/。 示例页面使用MIDI.js。请注意，它甚至使用声音字体，全部通过脚本编写。漂亮整齐。

如果您对控制 MIDI 设备或让 MIDI 设备控制您的 HTML5 页面更感兴趣：W3C 人员正在努力解决这个问题。见draft api description here

【参考方案2】：

使用html-midi-player，只需插入midi-player 元素（一种自定义HTML 元素，其工作方式与audio 元素很相似，但用于MIDI 文件），就可以在网站中嵌入MIDI 文件：

<midi-player src="jazz.mid" sound-font></midi-player>

完整演示：

<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid" sound-font>
</midi-player>

<!-- The following needs to be inserted somewhere on the page for the player(s) to work. -->
<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.22.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0"></script>

完全披露：我是 html-midi-player 的作者。