Как я могу использовать midi.js и jasmid.js?

Я пытаюсь создать вариант цветного пианино на сайте http://mudcu.be/piano/ и действительно изо всех сил пытаюсь найти хороший рабочий пример того, как анализировать 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>
Источник

2 ответа

Я попробовал последнюю версию сегодня. Я использую Linux Mint OS. Приведенные примеры работают. заметил, что в примерах loadPlugin в примерах есть "onsuccess", а не "callback". Изменил это, и это сработало. Кстати, я не использовал точно ваши файлы, так как мои пути были другими. я скопировал раздел заголовка из MIDIPlayer.html под примерами. Кроме того, если вы тестируете файловую систему без веб-сервера, браузер может не разрешить доступ к другим файлам, таким как midi-файл, с помощью ajax. Это происходит с хромом. Я использовал Firefox. Консоль отладки показывает синтаксическую ошибку в акустической боли, но похоже, что она все еще работает. Периодически звук не воспроизводится, и когда я открываю звуковую консоль, я вижу, что громкость установлена ​​на ноль для этого конкретного экземпляра приложения (браузера). Я увеличиваю его и слышу звук. не уверен, почему это происходит. Другая проблема с MIDI.js, кажется, в том, что он не поддерживает все атрибуты midi. Например, он не может воспроизвести MIDI-файл с текстами песен. Тем не менее, Джасмид может справиться с этим. Мой код выглядит так:

<!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>
Источник

Используйте https://github.com/surikov/SSSynthesiser.js

Он имеет доступ к тысячам виртуальных инструментов. Смотрите примеры на странице проекта

Источник
Другие вопросы по тегам