В последнее время появилось много примеров использования Web Audio API для синтеза звука в браузере. Ознакомиться с наиболее интересными проектами в этой области можно на сайте Audiocrawl.co:
Какие библиотеки/фреймворки можно использовать для создание аудио-приложений? Есть MIDI.js, поиском по Github можно найти ещё несколько разной степени заброшенности.
Но хотелось бы чего-то бОльшего:
- полный набор виртуальных инструментов, а не только пианино или синусоидальная волна;
- менять музыку даже во время воспроизведения;
- играть отдельные ноты/аккорды;
- должно работать в том числе и на мобильных платформах.
И такая библиотека есть!
Это SSSynthesiser.js. Примеры использования можно посмотреть на странице проекта.
Общая идеология
- музыка подготавливается в сервисе Molgav (можно делать свою, можно импортировать из MID, можно взять из общей библиотеки);
- сохраняется в формате JSON вместе с сэмплами, треками, нотами и пр.;
- полученный файл можно загрузить и проигрывать с помощью SSSynthesiser.js;
- загруженный JSON можно менять стандартными средствами Javascript в любой момент.
Пример использования вместе с WebGL
Отличительные характеристики
- можно использовать любой из нескольких тысяч инструментов сервиса Molgav (несколько банков с полным набор MIDI, от гитар до саксофонов);
- есть огромная библиотека уже готовых композиций (открыть) из сервисов ultimate-guitar.com и songsterr.com.
Примеры кода
Подключение библиотеки:
<script src="SSSynthesiser.js"></script> Инициализация и загрузка:
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 конечно в пролёте.
ссылка на оригинал статьи http://habrahabr.ru/post/266145/
Добавить комментарий