title: How Can I Create a waveform with css or js to show when audio files is playing
body: <p>I have an audio file that can be played on my web page, but I would like to show a kind of waveform or bars while the audio is playing. I do not know if there is a plugin with javascript that allows to do this or if it is possible to achieve it with pure css.</p>
  
  <p>What I'd like to do is something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LWcA0.png" rel="nofollow noreferrer">Example Image</a></p>
  
  <p>this is the code of my audio file:</p>
  
  <pre><code>&lt;audio id="audio"&gt;
  &lt;source src="audio/audio1.mp3" type="audio/mpeg"&gt;
  &lt;/audio&gt;
  
  &lt;div id="showWaveForms"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and this is my jquery code to play the audio:</p>
  
  <pre><code> $(document).ready(function(){
     $("#start").click(StartGame);
  
     function StartGame() 
     {
      $("#audio")[0].play();
     }
   });
  </code></pre>
  
  <p>What I'd like to do is display the waves forms inside the div with id. showWaveForms.</p>
  
  <p>Is there a way to do this with CSS or Javascript/Jquery? Is there any pluging you can suggest to do that?</p>