Audio Frequency Visualizer

A tiny visualizer plugin based on Audio Web API developed by Nuevodevel.com can be a nice add-on 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>
const player=videojs("my_player", {"license: "key"});
var player=player.nuevo({option:"option value"})
player.visualizer();
</script>

You can show visualizer for video content by enabling plugin's video option.

Code snippet

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

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

Code snippet

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

Caps default color is white. It's possible to use any other color for caps through visualizer option and hexadecimal 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 the player's height, aligned to the bottom of the player. It is possible to change the height of visualizer container and set the 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.