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
2. Extend audio-element
my-element.js
:
var AudioElement = ;var Generator = ; var MyElementPrototype = Object; MyElementPrototype { //set some pcm stream as `stream` property thisstream = Generatorduration: 2; //your code... AudioElementprototypecreatedCallback;};MyElementPrototype {};MyElementPrototype {};MyElementPrototype { //your code... AudioElementprototypeattributeChangedCallback;}; //connection logicMyElementPrototypenumberOfInputs = 0;MyElementPrototypenumberOfOutputs = 1; //meta stuff — used by audio-labMyElementPrototypethumbnail = '☯';MyElementPrototypelabel = 'Magic';MyElementPrototypedescription = 'Just try and you will see'; moduleexports = document;
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"/> -->
main.html
:
4. Use within bundle
app.js
:
var MyElement = ;var SpeakerElement = ; var myElement = document;var speakerElement = document; myElement;myElement; documentbody;documentbody; //disconnect after a second;
$ browserify app.js -o bundle.js
5. Season with polyfills, if needed
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 fordocument.registerElement
.
element-boilerplate — boilerplate for custom element.