View on GitHub

x-piano

Web Components for Web Audio API

Download this project as a .zip file Download this project as a tar.gz file

x-piano

Web Components for Web Audio API

Overview

<x-piano> is GUI parts library (Web Components) for Web Applications that use Web Audio API. <x-piano> has has the following features.

Demo

Browser Support

Chrome Opera Firefox Safari
Latest ✔Latest ✔Latest ✔Latest ✔

Installation


$ npm install x-piano

or,


$ bower install x-piano

Usage

<x-piano> tag can be used by the following HTML.


<script type="text/javascript">
<!--
    // This is invoked when import HTML is success.
    var onLoadCallback = function(event) {
        // do something for main document
    };

    //This is invoked when import HTML is failure.
    var onErrorCallback = function(event) {
        // do something for error
    };
//-->
</script>
<link rel="import" href="x-piano/x-piano.html" type="text/html" onload="onLoadCallback(event)" onerror="onErrorCallback(event)" />

or,


<script type="text/javascript">
<!--
    (function() {
        // Create <link> tag for import HTML dynamically
        var link = document.createElement('link');

        link.setAttribute('rel', 'import');
        link.setAttribute('href', 'x-piano/x-piano.html');
        link.setAttribute('type', 'text/html');

        // This is invoked when import HTML is success.
        link.onload = function(event) {
            // do something for main document
        };

        // This is invoked when import HTML is failure.
        link.onerror = function(error) {
            // do something for error
        };

        document.querySelector('head').appendChild(link);
    })();
//-->
</script>

In the case of using Polymer,


<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="x-piano-polymer/x-piano.html" type="text/html" />

To import 'x-piano.html', then describe <x-piano> tag.


<x-piano></x-piano>

Moreover, <x-piano> tag can have some attributes.
For example,


<x-piano type="sawtooth" volume="0.4" attack="1" glide="1.5"></x-piano>

Refer to the following table for attribute details.

Attributes

Attribute Description Value
ui-onlyNot use soundboolean attribute
responsiveResponsive Layoutboolean attribute
themePiano Design'normal' (default), 'fiber', 'wood', 'crystal', 'flat', 'keyboard', 'none'
typeSound Source'piano' (default), 'sine', 'square', 'sawtooth', 'triangle'
volumeMaster Volume0.0 - 1.0 (1.0 by default)
attackEnvelope Generator (Attack)0.0 - 1.0 (0.01 by default)
decayEnvelope Generator (Decay)0.0 - 1.0 (0.3 by default)
sustainEnvelope Generator (Sustain)0.0 - 1.0 (1.0 by default)
releaseEnvelope Generator (Release)0.0 - 1.0 (1.0 by default)
transposeTransposeInteger (0 by default)
glideGlide (Oscillator only)0.0 - (0.0 by default)
valueKeyboard IndexJSON (readonly)

Event handlers

The following event handlers are invoked when keyboard was either down or up.


var xpiano = document.querySelector('x-piano');

/**
 * This event handler is invoked when keyboard was down.
 * @param {HTMLElement} element This argument is the instance of HTMLElement that is added event listener.
 * @param {number} index This argument is the index of keyboard where event occurred.
 *     This value is between 0 and 87.
 */
xpiano.onkeyboarddown = function(element, index) {
    console.log(index + ' :');
    console.dir(element);
};

/**
 * This event handler is invoked when keyboard was up.
 * @param {HTMLElement} element This argument is the instance of HTMLElement that is added event listener.
 * @param {number} index This argument is the index of keyboard where event occurred.
 *     This value is between 0 and 87.
 */
xpiano.onkeyboardup = function(element, index) {
    console.log(index + ' :');
    console.dir(element);
};

Trigger

The sound is created by triggering event.


var xpiano = document.querySelector('x-piano');

/**
 * This method triggers event.
 * @param {number} index This argument is between 0 and 87.
 * @param {boolean} isDown If this argument is true, the designated keyboard is down.
 *     Otherwise, the designated keyboard is up.
 */
xpiano.trigger(index, isDown);

For example,


var xpiano = document.querySelector('x-piano');

window.setTimeout(function() {
    // A (440 Hz) start
    xpiano.trigger(48, true);

    window.setTimeout(function() {
        // A (440 Hz) stop
        xpiano.trigger(48, false);
    }, 1000);
}, 1000);

License

Copyright © 2014 Tomohiro IKEDA (Korilakkuma)
Released under the MIT license