Skip to main content

Posts

Showing posts from 2017

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