openmusic-drum-machine-ui

A Web Component UI for OpenMusic Drum Machine

Usage no npm install needed!

<script type="module">
  import openmusicDrumMachineUi from 'https://cdn.skypack.dev/openmusic-drum-machine-ui';
</script>

README

openmusic-drum-machine-ui

UI for OpenMusic drum machine instrument

Install with NPM

Installation

Do npm install openmusic-drum-machine-ui.

You need to load the module first (with require) and then register it--it is not automatically registered!

require('openmusic-drum-machine-ui').register('openmusic-drum-machine-ui');

But you could even register it with other name, for example:

require('openmusic-drum-machine-ui').register('mega-drum-machine-ui');

Up to you.

Usage

Either create an instance in mark-up:

<openmusic-drum-machine-ui></openmusic-drum-machine-ui>

or via document.createElement:

var el = document.createElement('openmusic-drum-machine-ui');
document.body.appendChild(el);

Although it's pretty useless without an actual machine to control! So you need to attach it to a drum machine instance:

var DrumMachine = require('openmusic-drum-machine');
var context = new AudioContext();

var machine = DrumMachine(context);

// You need to wait until the machine is ready to be used.
machine.ready().then(function() {
    el.attachTo(machine);
});

Have a look at demo/main.js for an example that demonstrates how to use this component with the Web Audio drum machine instrument.