ClippPlayer & React-Waves

With the world's growing interest in virtual assistants, I've been wanting to experiment with more audio-based technologies. This is how my original idea for my clip.ps project got started. I wanted to build something where users could upload audio clips, splice them together, and tell their story.

One thing that I love about modern Javascript libraries is their increased focus on smaller, contained components. This shift has changed the way I approach building larger webapps, as now I start by building smaller (often sharable) pieces, that I can later plug in to my larger vision. At the same time, I can often find open-source components that other developers have created and shared, that can jump-start my progress.

The first component in an audio-based platform should probably be your audio player since that experience is what the rest of the app will focus around.

I started out by researching existing shared components, libraries, and similar webapps. I knew in my head that I wanted my player to display more than just a simple timeline of where the listener was in the audio file. I instead wanted to show (what I later learned was called) a waveform version of the file. I thought this provided a cooler experience for the user as they got to see the actual audio waves the sound was producing. Unfortunately shortly after starting my research, I found an existing webapp that did almost the exact same idea that I had come up with. Better yet, their name is super similar, and the guys who made it are based right here in Austin! (there are truly no more original ideas left)

Whatever, time to focus, can’t let myself get distracted by the fact that there’s already a similar product out there. Instead I decided to use their existing player’s (beautiful) UI design as a starting point. If I was going to build something from scratch, I might as well recreate something that had a great user experience. Then from there I could expand on it.

Back to existing libraries. It quickly became clear that wavesurfer.js was one of the best waveform audio visualization libararies out there. Even better, there was already a react-wavesurfer wrapper component that I could use. This would allow me to focus on the audio player user experience, and not have to worry about the lower level HTML DOM interactions. There was one slight problem though, wavesurfer.js had recently upgraded to v2, and it looked like the react-wavesurfer developers had archived their repo instead of attempting to upgrade it to utilize the new wavesurfer version. Seemed lke another opportunity to me!

Ah where to begin. Once again it was starting to feel like a small passion project was quickly growing out of control to the point where I would likely abandon it and move on to something else.

To keep an already long story, shorter, I’ll fast forward a little. Upgrading the existing react-wavesurfer project to wavesurfer v2 wasn’t bad at all. It almost felt like the wavesurfer team had taken some of the features these 3rd-party libraries had implemented and instead just implemented them natively. A prime example was some of the code required to make the component responsive (example code). This allowed me to actually rip out a bunch of code that was no longer required and instead just rely on wavesurfer to handle it directly. After a Sunday afternoon of work, I had myself a working version that was just lacking a few features.

(Check out the example -> HERE)

While I was working on my new react-waves library, I also got started on my audio player that I was now calling ClippPlayer. Within this component I had created a very basic waveform component that would eventually be replaced by my completed react-waves library.

(Check out the example -> HERE)

As you can see, I took a lot of design inspiration from the clyp.it audio player. Now that I’ve created react-waves though, I have a better understanding of a waveform’s properties and can style it however I want once I get an idea of how I want the rest of the webapp to look.

What’s Next?

Like I alluded to early, I’m pretty good at allowing my passion projects get out of hand to the point where I get overwhelmed and no longer motivated to work on them. Luckily I’m getting better at realizing this, and was able to re-align myself while building these simple components. One way I did this was to constantly come up with clear next-steps of what I was going to work on. So here’s some of the remaining next steps…

Import my react-waves library in to the ClippPlayer component
Enhance react-waves to support some of the wavesurfer.js plugins
Add functionality to ClippPlayer (volume, callbacks, etc)

Check them out!

I’d love to hear what you think! Here are the NPM packages for these two components, which also link to the associated github repo.

Stay tuned for more updates regarding my clip.ps project!

Clipps has launched!! Check it out and let me know what you think!