- PVSM.RU - https://www.pvsm.ru -

400 музыкальных инструментов для Javascript

WebAudioFont [1] — новая технология сходная с DLS [2], но предназначенная для применения в веб-приложениях Javascript.

На данный момент позволяет использовать 400 (четыре сотни) музыкальных инструментов для воспроизведения звука или сгенерированной музыки.

image


По сути, WebAudioFont [1] это набор файлов Javascript, которые содержат массив аудиоданных и описание правил синтеза (AHDSR [3], частоту и пр.).
Для воспроизведения используется плеер на основе Web Audio API [4].
Все возможности Web Audio API доступны для используемых инструментов — можно подключать фильтры, плавно менять громкость и частоту, добавлять эхо и пр.
Синтез звука производится по принципу Wavetable [5].

Hello world

Минимальный код для воспроизведения звука

<html>
    <head>
        <script src='WebAudioFontPlayer.js'></script>
        <script src='webaudiofont/32.0.Accoustic_32Bsaccousticbs_461_460_45127.js'></script>
        <script>
            var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
            var audioContext = new AudioContextFunc();
            var player=new WebAudioFontPlayer();
        </script>
    </head>
    <body>
        <p><a href='javascript:player.queueWaveTable(audioContext, audioContext.destination, _tone_Accoustic_32Bsaccousticbs_461_460_45127, 0, 12*4+7, 2);'>click!</a></p>
    </body>
</html>

Получится примерно такая страница [6].

Подробнее о коде:

<script src='WebAudioFontPlayer.js'></script>

— подключаем плеер WebAudioFontPlayer.js

<script src='webaudiofont/32.0.Accoustic_32Bsaccousticbs_461_460_45127.js'></script>

— подключаем выбранный инструмент из файла 32.0.Accoustic_32Bsaccousticbs_461_460_45127.js

<a href='javascript:player.queueWaveTable(audioContext, audioContext.destination, _tone_Accoustic_32Bsaccousticbs_461_460_45127, 0, 12*4+7, 2);'>click!</a>

— по клику на ссылку вызываем проигрывание ноты.

queueWaveTable (audioContext, target, preset, when, pitch, duration, continuous) это основная (да и, скорей всего, единственная необходимая) функция плеера. Её параметры подробней:

  • audioContext — текущий AudioContext из Web Audio API
  • target — узел через который будет воспроизводиться звук, в простейшем случае это audioContext.destination
  • preset — переменная содержащая пресет (в примере это _tone_Accoustic_32Bsaccousticbs_461_460_45127)
  • when — время начала воспроизведения в секундах относительно audioContext.currentTime
  • pitch — высота ноты
  • duration — длительность ноты в секундах
  • continuous — true если нужно игнорировать AHDSR

Исходный код и дополнительную информацию с примерами можно посмотреть на сайте проекта WebAudioFont [1].

Для каких приложений можно использовать WebAudioFont?

Основное назначение WebAudioFont — виртуальные инструменты, звуковые эффекты в немузыкальных приложениях, генерация и воспроизведение музыки в рилтайме.

image

На сайте проекта есть дополнительные примеры по областям применения:

Отличие от других библиотек

WebAudioFont [1] не является библиотекой или фреймворком, хотя и состоит их кода Javascript. Это большой набор музыкальных инструментов которые вы можете использовать в своих приложениях подключив парой строчек:
image

— в каталоге всего 170 инструментов с разыми вариантами звучания (по 2-3 на каждый инструмент).

Автор: musicriffstudio

Источник [12]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/203911

Ссылки в тексте:

[1] WebAudioFont: https://github.com/surikov/webaudiofont

[2] DLS: https://en.wikipedia.org/wiki/DLS_format

[3] AHDSR: https://www.google.ru/search?q=ahdsr

[4] Web Audio API: https://www.google.ru/search?q=web+audio+api

[5] Wavetable: https://www.google.ru/search?q=wavetable+synthesis

[6] такая страница: http://molgav.nn.ru/WebAudioFontExampleSimple.html

[7] ударник: http://molgav.nn.ru/WebAudioFontExampleDrums.html

[8] пианино: http://molgav.nn.ru/WebAudioFontExamplePiano.html

[9] флейта: http://molgav.nn.ru/WebAudioFontExampleFlute.html

[10] звука автомобиля: http://molgav.nn.ru/WebAudioFontExampleFx.html

[11] один рифф с переключением: http://molgav.nn.ru/WebAudioFontExampleTune.html

[12] Источник: https://habrahabr.ru/post/313886/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best