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>
Code snippet
<script> player.visualizer({video:true}); </script>
Code snippet
<script> player.visualizer({caps:true}); </script>
Code snippet
<script> player.visualizer({caps:true, capsColor:"#f00"}); </script>
Code snippet
<script> player.visualizer({color1:"#00ff00",color2:"#ff0000"}); </script>
Code snippet
<script> player.visualizer({height:"30%",bottom:"10%"}); </script>
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.