文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用midi.js和jasmid.js？

问如何使用midi.js和jasmid.js？
EN

Stack Overflow用户

提问于 2015-05-23 08:30:08

回答 2查看 1.5K关注 0票数 3

我试图在http://mudcu.be/piano/上创建一个彩色钢琴站点的变体，并且正在努力寻找一个好的工作示例，如何解析MIDI文件，绘制图形元素和播放MIDI音符。

有人知道彩色钢琴网站是怎么创建的吗？

我首先只是想得到一个特定的midi文件播放-没有运气。

下面的代码没有做任何事情，也没有显示错误。

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <!-- polyfill -->
        <script src="static/Base64.js" type="text/javascript"></script>
        <script src="static/Base64binary.js" type="text/javascript"></script>
        <script src="static/WebAudioAPI.js" type="text/javascript"></script>
        <!-- midi.js package -->
        <script src="static/audioDetect.js" type="text/javascript"></script>
        <script src="static/gm.js" type="text/javascript"></script>
        <script src="static/loader.js" type="text/javascript"></script>
        <script src="static/player.js" type="text/javascript"></script>
        <script src="static/event.js" type="text/javascript"></script>
        <script src="static/plugin.audiotag.js" type="text/javascript"></script>
        <script src="static/plugin.webaudio.js" type="text/javascript"></script>
        <script src="static/plugin.webmidi.js" type="text/javascript"></script>
        <!-- jasmid just in case-->
        <script src="static/stream.js"></script>
        <script src="static/midifile.js"></script>
        <script src="static/replayer.js"></script>
        <!-- utils -->
        <script src="static/dom_request_xhr.js" type="text/javascript"></script>
        <script src="static/dom_request_script.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
        window.onload = function () {
        MIDI.loadPlugin({
        soundfontUrl: "static/",
        instrument: "acoustic_grand_piano",
        callback: function() {
            MIDI.Player.loadFile("static/mario.mid", MIDI.Player.start);
            }
        });
    }

    </script>
    </body>
</html>

midi.js

jasmid.js

javascript

midi

回答 2

Stack Overflow用户

发布于 2016-08-31 21:03:28

我今天试了最新的版本。我使用Linux mint操作系统。所提供的示例是有效的。注意到示例在loadPlugin调用中有"onsuccess“而不是"callback”。改变了这一点，它起作用了。顺便说一句，我没有使用你的文件，因为我的路径是不同的。我从examples下的MIDIPlayer.html中复制了head部分。此外，如果您在没有web服务器的文件系统上进行测试，浏览器可能不允许使用ajax访问其他文件，如midi文件。这发生在chrome上。我用的是Firefox。调试控制台显示声学钢琴js中的语法错误，但看起来它仍然有效。声音间歇性地无法播放，当我打开声音控制台时，我看到此特定应用程序实例(浏览器)的音量设置为零。我调大音量，就能听到一个声音。不确定为什么会发生这种情况。MIDI.js的另一个问题似乎是它并不支持所有的midi属性。例如，它无法播放带有歌词的midi文件。但是，jasmid可以处理它。我的代码看起来像这样：

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MIDI.js - Sequencing in Javascript.</title>
        <!-- midi.js css -->
        <link href="./css/MIDIPlayer.css" rel="stylesheet" type="text/css" />
        <!-- shim -->
        <script src="../inc/shim/Base64.js" type="text/javascript"></script>
        <script src="../inc/shim/Base64binary.js" type="text/javascript"></script>
        <script src="../inc/shim/WebAudioAPI.js" type="text/javascript"></script>
        <script src="../inc/shim/WebMIDIAPI.js" type="text/javascript"></script>
        <!-- jasmid package -->
        <script src="../inc/jasmid/stream.js"></script>
        <script src="../inc/jasmid/midifile.js"></script>
        <script src="../inc/jasmid/replayer.js"></script>
        <!-- midi.js package -->
        <script src="../js/midi/audioDetect.js" type="text/javascript"></script>
        <script src="../js/midi/gm.js" type="text/javascript"></script>
        <script src="../js/midi/loader.js" type="text/javascript"></script>
        <script src="../js/midi/plugin.audiotag.js" type="text/javascript"></script>
        <script src="../js/midi/plugin.webaudio.js" type="text/javascript"></script>
        <script src="../js/midi/plugin.webmidi.js" type="text/javascript"></script>
        <script src="../js/midi/player.js" type="text/javascript"></script>
        <script src="../js/midi/synesthesia.js" type="text/javascript"></script>
        <!-- utils -->
        <script src="../js/util/dom_request_xhr.js" type="text/javascript"></script>
        <script src="../js/util/dom_request_script.js" type="text/javascript"></script>
        <!-- includes -->
        <script src="./inc/timer.js" type="text/javascript"></script>
        <script src="./inc/colorspace.js" type="text/javascript"></script>
        <script src="./inc/event.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
        window.onload = function () {
        MIDI.loadPlugin({
        soundfontUrl: "./soundfont/",
        instrument: "acoustic_grand_piano",
        onsuccess: function() {
            MIDI.Player.loadFile("minute_waltz.mid", MIDI.Player.start);
            }
        });
    }

    </script>
    </body>
</html>

票数 1

Stack Overflow用户

发布于 2015-09-04 01:53:42

使用https://github.com/surikov/SSSynthesiser.js

它可以访问成千上万的虚拟仪器。请参阅项目页面上的示例

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30407664

复制

相似问题

问如何使用midi.js和jasmid.js？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用midi.js和jasmid.js？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用midi.js和jasmid.js？
EN