angular-vumeter - AngularJS directive representing a VU meter

Quick links

• Demo
• Getting started
  • NPM
  • Bower
  • Adding dependency to your project
  • VU meter using the microphone input
  • VU meter using an audio source
  • Custom templates
• Support
  • Documentation
  • Supported browsers
  • Found a bug?

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.module('myModule', ['angular-vumeter']);

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.registerTemplate('myCustomTemplate', {
    path: 'path/to/html/or/svg/template',
    /**
    * Optional: This method is run only once. Function to find
    * elements before execution of the onDraw function.
    * It can be useful to find elements of the template that
    * need to be accessed multiple times during onDraw
    */
    getTemplateElements: function($element) {
        return [];
    },
    /**
    * Required: This method is run every 1024 audio samples.
    * Any manipolation of DOM to show audio visualization should be included here
    */
    onDraw: function($element, volume, templateElements) {}
}

This is the implementation for the default template:

{
    path: 'angular-vumeter/template/angular-vumeter.svg',
    getTemplateElements: function($element) {
        // let's find motion elements in svg knowing their types and ids
        function findElementInSVG(type, id) {
            var elements = $element.find(type);
            for (var i = 0; i < elements.length; i++) {
                var el = elements[i];
                if (el.id === id) {
                    return el;
                }
            }
        }
        // trigger is a g element
        var trigger = findElementInSVG('g', 'trigger');
        // peak is a ellipse element
        var peak = findElementInSVG('ellipse', 'peak');
        return [angular.element(trigger), angular.element(peak)];
    },
    onDraw: function($element, volume, templateElements) {
        // 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 = templateElements[0];
        var led = templateElements[1];
        var minAngle = 65, maxAngle = 100;
        // Transform volume in a visual data
        var deg = Math.min((minAngle * volume) / 100, maxAngle);
        // Trigger rotation
        trigger.attr('transform', 'rotate(' + deg + ' ' + rotationPivot.x + ' ' + rotationPivot.y + ')');
        // Led blinking
        led.attr('fill', volume > 100 ? '#ea2b2c' : '#992B2C');
    }
}

You can create simpler or more complex audio visualization using html or svg templates

Support

Documentation

Check out angular-vumeter 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.