Why we decided to use wavesurfer.js

Why we decided to use wavesurfer.js

In one of our projects, we faced the business requirement to create a custom audio player—nothing complex, with several controls: play, pause, previous and next track, and changing volume. The challenge was the player should also be responsible for drawing the audio spectrum.

Available solutions

Creating a simple, custom audio player with main functionality is relatively easy. JavaScript programmers, can use the browser API, which allows us to deal with such things. Drawing a spectrum is more complex and forces us to pay more attention to it. Some algorithms are available on the web, but adjusting such an algorithm to our needs is still time-consuming. Because of this, we decided to find some ready solution and base the audio player on this library.****

Does Vue.js Audio Player library exist?

In Bravelab, our standard tech stack on the Frontend side is Vue.js. Our first idea was to find a Vue.js library and integrate it with our player. Unfortunately, it was impossible because there is no such library for Vue.js. Some libs can play tracks and draw a spectrum, but it was impossible to adjust them to our needs and look & feel. Our research was taking more and more. It wasn't very pleasant. We wanted to go back to the previous idea and write the complete functionality from scratch (even with a spectrum). Of course, almost everything is possible, and it is also possible to do it from scratch, but time was running out, and we had only a few weeks to close this topic.

Our solution

Finally, we found a library that covered all our requirements. It's called WaveSurfer.js, a customisable audio spectrum visualisation plugin based on Audio API and HTML 5 Canvas. We looked at the documentation and read several opinions, and I decided to choose it. Also, the fact that WaveSurfer has ten years proves it's a good candidate for our application.

• playing and pausing track,
• switching to the other track
• changing volume

WaveSurfer.js supports it, so our solution was based on the library. It wasn't so challenging to achieve this part of the audio player. The main functionality was covered and working, so we switched to drawing the track spectrum, and… with WaveSurfer.js, it was also straightforward. The ways of customisation of the spectrum are incredible. You can draw it in whatever way you want.

The audio player module is done. The business need was fulfilled, and from the perspective of time, we arereally happy we found and used WaveSurfer.js. For sure, we saved a lot of time using it. If we implemented a fully custom solution, it'd take me much more time because there'll surely be some bugs. WaveSurfer.js is working without any issues, the configuration is simple, and you can quickly achieve what you need. The only con is the documentation. From our perspective, it should be extended a bit, and there should be more examples of usage of, e.g. methods.

However, we recommend this library to everyone who is standing before the implementation of a similar component. It's worth using! You can see the results of our work here.