Audio element

Custom element wrapper for pcm audio streams. Provides basic connection interface and helper functions. Useful to create html views for audio streams.

Recipe

I N G R E D I E N T S

• [ ] audio-element
• [ ] browserify
• [ ] document-register-element

D I R E C T I O N S

1. Install audio-element

2. Extend audio-element

my-element.js:

var AudioElement = require('audio-element');
var Generator = require('audio-generator');


var MyElementPrototype = Object.create(AudioElement.prototype);

MyElementPrototype.createdCallback = function () {
    //set some pcm stream as `stream` property
    this.stream = Generator({duration: 2});

    //your code...

    AudioElement.prototype.createdCallback.call(this);
};
MyElementPrototype.attachedCallback = function () {};
MyElementPrototype.detachedCallback = function () {};
MyElementPrototype.attributeChangedCallback = function (attr, oldVal, newVal) {
    //your code...

    AudioElement.prototype.attributeChangedCallback.call(this);
};

//connection logic
MyElementPrototype.numberOfInputs = 0;
MyElementPrototype.numberOfOutputs = 1;

//meta stuff — used by audio-lab
MyElementPrototype.thumbnail = '☯';
MyElementPrototype.label = 'Magic';
MyElementPrototype.description = 'Just try and you will see';


module.exports = document.registerElement('my-element', { prototype: MyElementPrototype });

3. Use as import link

$ browserify my-element.js -o ./dist/my-element.js

my-element.html:

<!-- <link rel="stylesheet" type="text/css" href="./dist/my-element.css"/> -->
<script src="./dist/my-element.js"></script>

main.html:

<link rel="import" href="./my-element.html">
<link rel="import" href="./node_modules/audio_speaker">

<my-element connect="#speaker"></my-element>
<audio-speaker id="speaker"></audio-speaker>

4. Use within bundle

app.js:

var MyElement = require('./my-element');
var SpeakerElement = require('audio-speaker/element');

var myElement = document.createElement('my-element');
var speakerElement = document.createElement('audio-speaker');

myElement.connect(speakerElement);
myElement.emit('ready');

document.body.appendChild(myElement);
document.body.appendChild(speakerElement);

//disconnect after a second
setTimeout(function () {
    myElement.disconnect();
}, 1000);

$ browserify app.js -o bundle.js

5. Season with polyfills, if needed

<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/0.5.0/document-register-element.js"></script>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=default,WeakMap,WeakSet,Node.prototype.contains"></script>

Elements using audio-element

audio-gain — volume controller.
audio-speaker — audio speaker output
audio-biquad — biquad filter, same as BiquadFilterNode in web-audio-api, but for streams.
audio-generator — generator readable stream based on function.

Related

audio-lab — audio playground, sound graph constructor for basic audio elements.
document-register-element — polyfill for document.registerElement.
element-boilerplate — boilerplate for custom element.