Audio Visualizer

Audio frequency visualizer plugin

A tiny visualizer plugin based on Audio Web API developed by Nuevodevel.com can be a nice addon for both: audio and video media files played through video.js player with Nuevo plugin. By default it works only for audio content, though it's easy to enable for video content as well. The visualizer is disabled on Safari browsers, iOS and Android devices.

You just need to load visualizer javascript file and initialize visualizer plugin.

Code snippet

<script sre="/videojs/video.min.js>/script>
<script sre="/videojs/nuevo.min.js>/script>
<script sre="/videojs/plugins/visualizer.js></script>

<audio id="my_player" class="video-js" poster="//path-to-poster.jpg" controls preload="auto" playsinline width="600" height="360">
<source src="//path-to-audio-file.mp3" type="audio/mp3">
</audio>

<script>
  var player=videojs("my_player");
  var player=player.nuevo({option:"option value"})
  player.visualizer();
</script>

You can show visualizer for video content by enabling video option.

Code snippet

<script>
   player.visualizer({video:true});
</script>

The visualizer plugin features option to display caps with transition, which is disabled by default. You can anable it easily through visuzlizer plugin option.

Code snippet

<script>
   player.visualizer({caps:true});
</script>

Caps default color is white. It's possible to use any oother color for caps through visualizer option and hexidecimal color value.

Code snippet

<script>
   player.visualizer({caps:true, capsColor:"#f00"});
</script>

Visualizer bar color is just a gradient of 2 colors. You can change first and second color values in the hexadecimal numeral system. The default values are "#ffcc00" for the first color and "ffff00" for the second color.

Code snippet

<script>
   player.visualizer({color1:"#00ff00",color2:"#ff0000"});
</script>

By default visualizer container is 50% of player's height, aligned to bottom of the player. It is possible to change the height of visualizer container and set offset from bottom position through visualizer options. Both options are percentage values.

Code snippet

<script>
   player.visualizer({height:"30%",bottom:"10%"});
</script>

When using a visualizer plugin and streaming media files from other than production server, you need to set crossorigin="anonumous" or crossorigin="use-credentials" flag for your audio or video tag.

This is our first attempt of Web Audio visualizer plugin for video.js. Certainly in the future it will be extnded with more options and variations.