Renders the dynamic range of a MediaStream waveform slice as a percentage in a requestAnimationFrame callback.
Not a particularly complicated task, but it requires more code than you might expect. Also being able to control how the output is tweened (in and out independently!) allows you to get a custom look and feel pretty easily 😎
Web Audio API's AnalyserNode#getByteTimeDomainData()
var volumemeter = require('volume-meter')
var getusermedia = require('getusermedia')
var ctx = new AudioContext()
var el = document.querySelector('.meter')
var meter = volumemeter(ctx, { tweenIn: 2, tweenOut: 6 }, function (volume) {
el.style.height = volume + '%'
})
getusermedia({ audio: true, video: false }, function (err, stream) {
if (err) return console.error(err)
var src = ctx.createMediaStreamSource(stream)
src.connect(meter)
src.connect(ctx.destination)
stream.onended = meter.stop.bind(meter)
})A slightly more full featured example can be found here. You can run it by doing:
$ npm run example$ npm install volume-meterThe latest stable release is published to npm.
Copyright © 2014 Jesse Tane [email protected]
This work is free. You can redistribute it and/or modify it under the terms of the WTFPL.
No Warranty. The Software is provided "as is" without warranty of any kind, either express or implied, including without limitation any implied warranties of condition, uninterrupted use, merchantability, fitness for a particular purpose, or non-infringement.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent