Why we decided to use wavesurfer.js

The main challenge

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.

Yes! We've got it. We had a tool we could use, and we were able to start the real implementation. Firstly, we implemented the main functionality:

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

With these few lines of code, we were able to prepare a spectrum which was consistent with our designs on Firma. Let's imagine how many lines of code we'd have to write if we decide to implement everything from scratch. We quickly configured the container where our spectrum should be rendered, maximum height and width, color of track progress and wave, and some other things, and it worked. Simple, isn't it? After a small amount of time, the audio player looked like that:

I guess the thing that may interest you as well is plugins. As you saw in our configuration script, we added such a line:

WaveSurfer.js offers us several plugins that help extend the way of customising spectrum and also allow us to create more complex solutions. We used one of them called Regions . Our business requirement was to let users play hooks. The hook is a specific part of the track, e.g. chorus or guitar riff, which should be highlighted somehow on the spectrum. We decided to use Regions because this plugin creates such a hook on the spectrum and allows us to do some magic with it, e.g. resizing or moving.

This simple config added a hook to our spectrum:

The hook menu above the spectrum is not part of WaveSurfer.js. It's a custom component, but the hook is fully supported by the Regions plugin.

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.

‍