True Audio Player Webflow Clonable Development

We were so excited to go all out on this audio player. We wanted it to not only solve our problems but also the problems that other creatives would have. These are the features we needed the audio player to have:

• Simple 1 track playback with play and pause controls
• Multi-track playback with next and previous controls
• 100% customizable design of dynamic data including Song name, Artist name, Album name, Thumbnail, etc.
• Global audio player feature: the audio player is separate from its audio tracks. Similar to other mainstream audio-focused websites (Soundcloud, Youtube Music, Bandcamp, etc)

We wanted to make an audio player that could be used with Webflow with the least amount of custom code. So we developed a plugin that uses attributes to add features to the developer’s design. This allows users to design their audio player any way they please, without having to worry about custom coding. All they need to do is add the appropriate attributes to their HTML elements, and our plugin will do the rest. We believe that this is the best way to create an audio player that can be used with Webflow.

To make the audio player feel more interactive, the audio player will add state helper classes to any element you decide so that it can be styled with CSS based on its current state. Some of the existing states include: playing, paused, and current.

Our biggest goal was to allow the track listing to live completely separate from the audio player, yet have them still interact with each other. This way, when the user clicks on a song, the audio player (which is a separate element) will show the song details and start playing the selected song. Similar to Youtube music, Bandcamp, and Soundcloud, this provides a seamless experience for the user. By keeping the two elements separate, we were able to create a more intuitive interface that allows the user to easily control the playback of their music.

We’re thrilled with how the True Audio Player turned out. It’s been a huge hit with music lovers, and we’ve gotten great feedback from users. However, there’s always room for improvement.  Here are some of our future plans for the True Audio Player.

• Add shuffle button option
• Migrate from jQuery to Vanilla JS
• Media Session Support

There’s so much we can talk about with the True Audio Player. To learn everything about what our audio player can do, please visit the True Audio Player home page.