AngularJS directive representing a VU meter
angular-vumeter -Quick links
Demo
Do you want to see directives in action? Check out the demo page!
Getting started
Install with NPM
$ npm install angular-vumeter
This will install angular-vumeter NPM package.
Install with Bower
$ bower install angular-vumeter
Adding dependency to your project
When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the angular-vumeter
module:
angular;
Including js and css
<script src="../node_modules/angular-vumeter/dist/angular-vumeter.min.js"></script><link href="../node_modules/angular-vumeter/dist/angular-vumeter.min.css" rel="stylesheet" type="text/css">
VU meter using the microphone input
By default the vumeter will be active as soon as the page is loaded and it will use microphone as default input.
You can activate/deactivate VU meter defining the isActive
attribute:
<vu-meter is-active="isActive"></vu-meter>
VU meter using an audio source
<vu-meter is-active="isActive" source-id="mySong"></vu-meter><audio id="mySong" controls="true"> <source src="./assets/kevin_MacLeod-Slow_Burn.mp3" type="audio/mpeg"> Your browser does not support the audio element</audio>
Custom templates
By default the directive will show an svg template. This is inspired to the old analogic VU meter by TEAC corporation. You can download the original illustrator file of the svg template and customize it (vumeter.ai)
Using vuMeterConfig
provider you can register a new template with you own logic:
vuMeterConfig
This is the implementation for the default template:
path: 'angular-vumeter/template/angular-vumeter.svg' { // let's find motion elements in svg knowing their types and ids { var elements = $element; for var i = 0; i < elementslength; i++ var el = elementsi; if elid === id return el; } // trigger is a g element var trigger = ; // peak is a ellipse element var peak = ; return angular angular; } { // this is relative to the original system of coordinates of the template var rotationPivot = x: 292 y: 331 ; // Let's get template elements calculated only once (not on every onDraw iteration) var trigger = templateElements0; var led = templateElements1; var minAngle = 65 maxAngle = 100; // Transform volume in a visual data var deg = Math; // Trigger rotation trigger; // Led blinking led; }
You can create simpler or more complex audio visualization using html or svg templates
Support
Documentation
Check documentation here
Supported browsers
Directives from this repository are automatically tested with the following browsers:
- Chrome
- Firefox
- Edge
- Opera
angular-vumeter uses getUserMediaStream API (check its global support here)
Modern mobile browsers should work without problems.
Found a bug?
Please submit your issue here.