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.

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

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

The article subfolder should contain at least two subfolders:

• the js folder has been tought to contain javascripts code;
• the second one is the sounds folder and, as the name suggests, will be used to store all the soundfiles used by the article.

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

Edit 2024/12/24: better to have the js folder (with the wavesurfer.min.js file inside) placed outside the articles parent folder. This way, if more than one article will need the library, we are not going to have duplicate files inside the website repository.

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:

• instantiate the wavesurfer audio visualizers
• load proper audiofiles into them
• implement the upload callback function used by the play/stop buttons

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

^

[1]

Fabien Sanglard article where he is using wavesurfer.js players