volume-meter

Renders the dynamic range of a MediaStream waveform slice as a percentage in a requestAnimationFrame callback.

Why

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 😎

How

Web Audio API's AnalyserNode#getByteTimeDomainData()

Example

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

Install

$ npm install volume-meter

Require

var volumemeter = require('volume-meter')

Constructor

var meter = volumemeter(context, [opts], onenterframe)

Instance methods

meter.stop()

Releases

The latest stable release is published to npm.

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

License

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.