HTML5 Audio generating wavefrom from .wav file

247 Views Asked by At

How would I make this random SVG waveform generator, generate waveform from audio file;

` 
 https://codepen.io/andrewscofield/pen/oGyrEv  `
1

There are 1 best solutions below

0
On

Here you go. https://codepen.io/Stepancic/pen/ExmZpZj?editors=0010

The main part here is

  var y1 = (config.line_height - filteredData[i] * config.line_height) / 2;
  var y2 = config.line_height - y1;

that gets drawn in the for loop. The multiplier in y1 is just here to make filteredData value "bigger".

Sample rate isn't dynamically generated so you can change the const samples = 92; value depending on your audio file length.

This code still has some work to be done, but I hope it helps. BR