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-meter

The latest stable release is published to npm.

• 2.0.0
• Make display logarithmically proportional to the dynamic range
• 1.0.0
• First pass.

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.