Polymer elements around WebAudio.
bower install kaste/audio-lego -S
Everything WebAudio starts with an AudioContext
. You get one using:
<audio-context
open
ctx="{{context}}"
></audio-context>
To record your microphone, you first ask for getUserMedia
in JS. This translates to:
<user-media
open
audio
stream="{{stream}}"
></user-media>
For both elements open
denotes an action. If you remove the attribute, the context will be closed, likewise with the mediastream you requested.
You can now go on and record this stream:
<record-media
recording
ctx="[[context]]"
stream="[[stream]]"
data="{{data}}"
></record-media>
Actually, you want to parametrize the recording
attribute. The recording starts, if the attribute is set, and stops if it is unset.
You get the raw recording data back [as a Float32Array], and feed it to the player:
<play-sample
play
ctx="[[context]]"
data="[[data]]"
></play-sample>
The same as above with the recording
, the play
attribute denotes an action. If play
is set the playback will start. When the sample comes to its end, the attribute will be unset. If you unset the attribute before, playback will stop.
Finally, you can view the waveform of the recording, like so:
<draw-waveform
data="[[data.0]]"
></draw-waveform>
But you really should look at the demo index.html
git clone https://github.com/kaste/audio-lego
cd audio-lego
npm install
bower install
gulp