Skip to content
Simple example of implementing a clip-detecting volume meter in Web Audio.
JavaScript HTML
Branch: master
Clone or download
Latest commit cc16b5f Mar 27, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE.txt Initial commit Jan 27, 2014
README.md fix demo url Mar 27, 2017
index.html Tweaked algorithm Jan 27, 2014
main.js Cache mediaStreamSource. Feb 12, 2015
volume-meter.js Removing var assingment from loop and calculating buffer length outsi… Jan 28, 2014

README.md

Simple volume meter

I whipped this app up to show a basic volume meter on live audio input. It does both clip detection and RMS volume.

A "volume" meter can mean many things; if you want to do clip detection, you really need to access every sample. If you don't need clip detection, I might suggest using an Analyser and getByteTimeDomainData, since it will likely have lower CPU overhead. Note that it is CRITICALLY IMPORTANT to disassociate visual rendering (in the requestAnimationFrame loop) from the onaudioprocess function - you do NOT want to trigger a relayout from inside your audio handler, or it may glitch or cause other issues.

It's also hosted at https://webaudiodemos.appspot.com/volume-meter/.

Check it out, feel free to fork, submit pull requests, etc. MIT-Licensed - party on.

-Chris

You can’t perform that action at this time.