В последнее время появилось много примеров использования Web Audio API для синтеза звука в браузере. Ознакомиться с наиболее интересными проектами в этой области можно на сайте Audiocrawl.co:
Какие библиотеки/фреймворки можно использовать для создание аудио-приложений? Есть MIDI.js, поиском по Github можно найти ещё несколько разной степени заброшенности.
Но хотелось бы чего-то бОльшего:
И такая библиотека есть!
Это SSSynthesiser.js. Примеры использования можно посмотреть на странице проекта.
Подключение библиотеки:
Инициализация и загрузка:
Разумеется, на сайте должен быть настроен CORS.
Воспроизведение:
Одна нота:
где 45 — это высота ноты по шкале MIDI, в данном случае это A3, т.е. Ля третьей октавы.
Один аккорд:
где 48,52,55,60,64 — это высоты нот по шкале MIDI.
Пример можно посмотреть тут. Идеологически он близок трекерным файлам и кроме нот содержит сэмплированные инструменты.
В SSSynthesiser.js производится микширование сэмплов непосредственно во время произведения. Тем не менее, звук беспроблемно синтезируется даже на очень слабых моделях телефонов.
Совместим с Chrome/Safari/Firefox/Opera/MSEdge на десктопе и мобильных платформах, богомерзкий IE конечно в пролёте.
Какие библиотеки/фреймворки можно использовать для создание аудио-приложений? Есть 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 конечно в пролёте.
Комментарии (4)
bakhirev
05.09.2015 15:49+1Библиотека проигрывает MIDI, при том «богомерзкий IE конечно в пролёте». Но богомерзкий IE мог проигрывать MIDI ещё в версии 3.0 от 1996 года. 96 КАРЛ!!! (они тогда еще всех достали, т.к. сайты начали ставить фоновую музыку)
Генерация звук задача редкая. А для игр важнее не генерировать, а одновременно проигрывать несколько mp3 и динамически изменять их громкость, в зависимости от расстояния до объектов. Ну а в общем, +1 за статью
musicriffstudio
05.09.2015 16:14Библиотека проигрывает MIDI
— не совсем так.
Может просто играть всю композицию, может отдельные ноты или аккорды, предоставляет доступ к изменению любых свойств инструментов или мелодии непосредственно во время исполнения.
Подойдёт тем, кому нужно немного больше чем просто играть midi/mp3. Примеры таких приложений
— https://chrome.google.com/webstore/category/app/81-music-and-radio, их там тысячи разной степени качества и востребованности.
При использовании SSSynthesiser.js такие игры и приложения можно будет делать намного проще.
Phizio
Неплохой обзор, и библиотека реально простая, удобная в использовании… Из серии 'для людей' :) даже захотелось попробовать прикрутить звуковую уведомлялку на свою систему личных сообщений в одном социальных проектов. С возможностью отключения, конечно же. Мелодии посложнее более актуальны для игр, хотя там уже все на полноценные wav/mp3 перешли… Я думаю, многим было бы интересно увидеть продолжение данного обзора, уже про полноценные звуки из аудиофайлов.