CODEWITHSUNDEEP
javascripthtmlcsshtml5-audiowaveform
Marcos Schmell
Marcos Schmell

Reputation: 47

How Can I Create a waveform with css or js to show when audio files is playing

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.

What I'd like to do is something like this:

Example Image

this is the code of my audio file:

<audio id="audio">
<source src="audio/audio1.mp3" type="audio/mpeg">
</audio>

<div id="showWaveForms"></div>

and this is my jquery code to play the audio:

 $(document).ready(function(){
   $("#start").click(StartGame);

   function StartGame() 
   {
    $("#audio")[0].play();
   }
 });

What I'd like to do is display the waves forms inside the div with id. showWaveForms.

Is there a way to do this with CSS or Javascript/Jquery? Is there any pluging you can suggest to do that?

Upvotes: 0

Views: 2760

Answers (1)

Ahmed Mansour
Ahmed Mansour

Reputation: 83

I Use library ( wavesurfer.js )

/* In your JavaScript app, create a wavesurfer instance, passing the container selector along with some options: Go to The library and see more options 
*/

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
});

/* Here upload your audio */

wavesurfer.load('audio1.mp3');

/* Here Play audio */

wavesurfer.on('ready', function () {
    wavesurfer.play();
});
<html>
    <head>
        <title>Wave audio</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <!-- This is Library CDN -->

        <script src="https://unpkg.com/wavesurfer.js"></script>

    </head>
    <body>
        
<div id="waveform"></div>

<script src="JS/Js.js" type="text/javascript"></script>
    </body>
</html>

Upvotes: 1

Related Questions