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 replac…
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 replac…