400 музичних інструментів для Javascript

WebAudioFont — нова технологія схожа з DLS, але призначена для застосування у веб-додатках Javascript.

На даний момент дозволяє використовувати 400 (чотири сотні) музичних інструментів для відтворення звуку або згенерованої музики.

image


По суті, WebAudioFont це набір файлів Javascript, які містять масив аудіоданих і опис правил синтезу (AHDSR, частоту і тощо).
Для відтворення використовується плеєр на основі Web Audio API.
Всі можливості Web Audio API доступні для використовуваних інструментів — можна підключати фільтри, плавно змінювати гучність і частоту, додавати ехо тощо
Синтез звуку проводиться за принципом Wavetable.

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>


Вийде приблизно така сторінка.

Докладніше про код:

<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.

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

image

На сайті проекту є додаткові приклади по областях застосування:


Відміну від інших бібліотек
WebAudioFont не є бібліотекою або фреймворком, хоча і складається з коду Javascript. Це великий набір музичних інструментів, які ви можете використовувати в своїх додатках підключивши парою рядків:
image

в каталозі всього 170 інструментів з будь яким варіантами звучання (по 2-3 на кожен інструмент).
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.