audio-element

1.0.3 • Public • Published

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

D I R E C T I O N S

1. Install audio-element

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

Package Sidebar

Install

npm i audio-element

Weekly Downloads

7

Version

1.0.3

License

MIT

Last publish

Collaborators

  • dfcreative