RocketAudio Player: Building an Easy-to-Use Web Audio Player

By: Ryan Miller

Audio is the cornerstone at Jelli. It is what we do. Every week we distribute thousands of audio files all across the nation. Well, “we” don’t actually do it— our technology does. Jelli provides intuitive tools that empower advertisers to help themselves. Even our side projects relate back to audio in some capacity.

When it comes to playing audio in a web browser, there aren’t any out-of-the-box solutions that are simple, easy-to-use, and customizable. So, we built our own versatile web audio player.

Creating an Audio Player

Using WebAudio API and HTML5 audio, we built the highly flexible and customizable RocketAudio player. With RocketAudio, there isn’t a “player” per se, just building blocks to integrate audio into an overall application. It offers an array of interactions and visualizations to provide users with complete control and clear feedback about the audio in our app.

Many websites embed multiple, tiny audio players in a list. This makes it difficult for users to understand which audio is currently playing. Have you ever accidentally started playing two different audio files at once? Nothing is worse than sitting in a quiet room, furiously scrolling around searching for the right audio to stop playing.

Don’t worry, we built a solution.

By creating a single audio player that dynamically loads and plays audio as needed by the application, audio streaming is intuitive and easy to control. This allows us to have vast lists of audio which all link to one player.

How does it work?

In our playlists, each audio item has a simple icon which allows the user to play or pause, while indicating which item is active. Meanwhile, the player has opened in the footer, displaying a clear and consistent single location for controlling the audio.

Once opened, the audio player is always present in the footer, displaying a smoothly animating progress bar over a detailed waveform representing the audio playing. The user can click and drag to skip or replay any portion of the audio. There is even a volume indicator, showing the audio levels as it plays. However, if the player is in the way, it can be minimized and remain fully functional.

Can it be used to edit audio files?

In addition to providing elegant audio playback, the RocketAudio Player also empowers users to be their own audio engineer. Anybody can trim and master their own audio file just like the pros, with just a few clicks. Our self-service tool provides a simple, intuitive interface for trimming audio files.

Begin by dropping the untrimmed audio into the editor. Next, adjust the start and end points by dragging the trim bars. Don’t worry, our UI will prevent you from accidentally cutting off audible content or from trimming the ad too long or too short. Plus, you can preview the trim until it is just right. When you are happy, simply click “Next” and our service will create a trimmed, level-balanced audio file and present it back to you for final approval.

Our business revolves around music and audio so we’re always excited about projects like this one. LaunchPad is the perfect place for us to share fun things like this that don’t necessarily relate to our day-to-day business. Stay tuned for updates!