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 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:
js
folder has been tought to contain javascripts code;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 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>
^ | [1] | Fabien Sanglard article where he is using wavesurfer.js players |