How to create a waveform animation with HTML and JavaScript

Recently, for a pet project, I wanted to create an animation of a waveform based on the varying decibel level of the microphone input. I was thinking about a really simple way to accomplish this with SVG and JavaScript. Given below is the first sample code I did on the Codepen. You can change this code to use with any framework of your choice.

For this sample code, I am using a random number as the microphone input. You can replace it with any other time based input.

Code Pen : https://codepen.io/nadeeth/pen/vmaYXw

For this example, you need an HTML code snippet like the one given below. It’s just an SVG with a Polyline element inside. 

<div style="text-align:center">
  <svg height="150" width="400" id='svg'>
    <polyline id="polyline-id" fill="none" stroke="#005c66" stroke-width="1" />
  </svg>
</div>

And then the plain Javascript code to animate the polyline. You can replace the setInterval function and the statement that generates the random number based on your actual need.

var svg = document.getElementById('svg');
var polyline= document.getElementById('polyline-id');
var width = 400;
var height = 150;
var x = 0;

setInterval(function(){ 
  //Create the new point and increment the x for the next point
  var point = svg.createSVGPoint();
  point.x = x;
  point.y = height - Math.floor((Math.random() * height));
  polyline.points.appendItem(point);
  x++;

  //Reset the x axis points when the line reaches the width
  if (polyline.points.length > width) { 
    //Remove the first point to make space for the last point
    polyline.points.removeItem(0);
    //Reset x points
    for (var j=0; j<width; j++) { 
      polyline.points[j].x = j;
    }
  }
}, 100);