NICOLA ARIUTTI'S WEBSITE

ABOUT  CONTACT  


September 01, 2024
Wavesurfer test

This is my first test with wavesurfer.js library.

Recently I've came across an article by Fabien[1] where he is showing a beatyful audio player rendered with this javascript lib called wavesurfer.js. So now I would like to try myself in using this very same library here on this test page.


How to make it work? Nicola, this is a reminder for you!

In order to have the wavesurfer.js work on my website (which I think is something similare Fabien is using) you have to take care of properly prepare the article folder like it's shown below:

  /article_subfolder/
  │
  ├── index.html
  ├── js/
  │   └── wavesurfer.min.js
  └── sounds/
      └── file-audio.mp3

The article subfolder should contain at least two subfolders:

Inside the js folder put the wavesurfer.min.js file. You can do that simply by running the commnad npm install --save wavesurfer.js inside this folder, navigate into the dist subfolder to locate the file, moving it outside and removing everything else.

Place the desired audio files inside the sounds folder


Then you have to write some html code inside the article source file. First of all, create a div like this:

  <div id="test_sound" style="border: 1px black solid; background-color: white;">
  </div>

Then another one to contain the play button:

  <div style="text-align:center; margin-top: 1ch; margin-bottom: 2ch;">
    <button onclick="update(this,test_sound);">Play</button>
  </div>

Note that this button, when clicked, will trigger a callback function to be implemented inside our custom javascript code (see below).

Than we should include the javascript library with the line:

  <script src="js/wavesurfer.min.js"></script>

And eventually a last bit of custom javascript code to:

  <script type="text/javascript">
  var test_sound = WaveSurfer.create({
    container: '#test_sound',
    waveColor: '#aaaaaa',
    progressColor: '#000000',
    cursorColor: '#DD0000',
    barHeight: 2,
  });

  test_sound.load('sounds/file-audio.mp3');

  function update(e, wf) {
    if (wf.isPlaying()) {
        wf.pause();
        e.innerText = "Play";
    } else {
        wf.play();
        e.innerText = "Stop";
    }
  }
</script>
References

^ [1]Fabien Sanglard article where he is using wavesurfer.js players


*