[Из песочницы] Интерактивная музыка в браузере04.09.2015 17:48

В последнее время появилось много примеров использования Web Audio API для синтеза звука в браузере. Ознакомиться с наиболее интересными проектами в этой области можно на сайте Audiocrawl.co:

image

Какие библиотеки/фреймворки можно использовать для создание аудио-приложений? Есть MIDI.js, поиском по Github можно найти ещё несколько разной степени заброшенности.

Но хотелось бы чего-то бОльшего:

  • полный набор виртуальных инструментов, а не только пианино или синусоидальная волна;
  • менять музыку даже во время воспроизведения;
  • играть отдельные ноты/аккорды;
  • должно работать в том числе и на мобильных платформах.


И такая библиотека есть!
Это SSSynthesiser.js. Примеры использования можно посмотреть на странице проекта.

image

Общая идеология


  • музыка подготавливается в сервисе Molgav (можно делать свою, можно импортировать из MID, можно взять из общей библиотеки);
  • сохраняется в формате JSON вместе с сэмплами, треками, нотами и пр.;
  • полученный файл можно загрузить и проигрывать с помощью SSSynthesiser.js;
  • загруженный JSON можно менять стандартными средствами Javascript в любой момент.

Пример использования вместе с WebGL


image

Отличительные характеристики

  • можно использовать любой из нескольких тысяч инструментов сервиса Molgav (несколько банков с полным набор MIDI, от гитар до саксофонов);
  • есть огромная библиотека уже готовых композиций (открыть) из сервисов ultimate-guitar.com и songsterr.com.

Примеры кода


Подключение библиотеки:


Инициализация и загрузка: 

var sssynthesiser = null;
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open('GET', "http://site/x/sviridovtimeforward.molgav", true);
xmlHttpRequest.onload = function () {
    var o = JSON.parse(xmlHttpRequest.response);
    sssynthesiser = new SSSynthesiser(o);
};
xmlHttpRequest.send();


Разумеется, на сайте должен быть настроен CORS.

Воспроизведение: 

sssynthesiser.startPlaySong();


Одна нота: 

sssynthesiser.playKey(sssynthesiser.findSampleBySubPath(s),1000,45);


где 45 — это высота ноты по шкале MIDI, в данном случае это A3, т.е. Ля третьей октавы.

Один аккорд: 

sssynthesiser.playChord(sssynthesiser.findSampleBySubPath(s),2000,[48,52,55,60,64]);


где 48,52,55,60,64 — это высоты нот по шкале MIDI.

Формат файлов JSON


Пример можно посмотреть тут. Идеологически он близок трекерным файлам и кроме нот содержит сэмплированные инструменты.

Производительность


В SSSynthesiser.js производится микширование сэмплов непосредственно во время произведения. Тем не менее, звук беспроблемно синтезируется даже на очень слабых моделях телефонов.

Совместим с Chrome/Safari/Firefox/Opera/MSEdge на десктопе и мобильных платформах, богомерзкий IE конечно в пролёте.

© Habrahabr.ru