Хабрахабр

MIDI-проигрыватель на Javascript

Будем делать проигрыватель файлов .mid на Javascript и Web Audio API.

image

Конечный результат может выглядеть вот так — https://surikov.github.io/webaudiofont/examples/midiplayer.html
image

Для чего

Делать свой плеер имеет смысл для интерактивных музыкальных приложений т.к. будет возможен полный контроль за воспроизведением (смена инструментов, редактирование нот в рилтайме, точное позиционирование и т.п.).
Для обычной фоновой музыки больше подходит обычный mp3.

Составные части

Файл с нотами надо как-то прочитать, загрузить используемые инструменты, синтезировать звук и отправить его в аудиовыход.

Всё просто.

Чтение файлов

Простой поиск по GitHub даёт нам кучу проектов для чтения MIDI-событий из файлов.

Выберем https://github.com/nfroidure/MIDIFile. Он выдаёт массив событий от смены программы, noteOn/noteOff и пр.

Для удобства придётся его немного модифицировать чтоб сразу получать ноты со временем и длительностью:
image

Загрузка музыкальных инструментов

Для звука используется библиотека WebAudioFont, загрузка инструментов в ней делается буквально парой строчек, примерно так:

for (var i = 0; i < song.tracks.length; i++) { var nn = findFirstIns(player, song.tracks[i].program); var info = player.loader.instrumentInfo(nn); player.loader.startLoad(audioContext, info.url, info.variable); }

Синтез звука

Можно отправить в очередь воспроизведения все ноты сразу. Но их тысячи даже в небольших музыкальных фрагментах и такой размер «повесит» аудио подсистему. Выход — отправлять небольшими кусками через обычную функцию setInterval:

setInterval(function () { if (audioContext.currentTime > nextStepTime - stepDuration) { sendNotes(song, songStart, currentSongTime, currentSongTime + stepDuration, audioContext, input, player); currentSongTime = currentSongTime + stepDuration; nextStepTime = nextStepTime + stepDuration; }
}, 22);

О параметрах функции отправки звуков в очередь воспроизведения можно прочитать на странице проекта WebAudioFont.

Интерактив

В любой момент можно определить в каком месте файла сейчас находится воспроизведения. В демо-плеере это выглядит так:

function showPosition(song, currentSongTime) { var o = document.getElementById('position'); o.value = 100 * currentSongTime / song.duration; document.getElementById('tmr').innerHTML = '' + Math.round(100 * currentSongTime / song.duration) + '%';
}

Исходный код

Пример плеера доступен по ссылке https://surikov.github.io/webaudiofont/examples/midiplayer.html

Весь код занимает чуть менее 300 строк.

Теги
Показать больше

Похожие статьи

Проверьте также

Закрыть
Кнопка «Наверх»
Закрыть