True Audio Player Webflow Clonable Development

Backstory

How it all started

We were helping Avado Studios integrate an audio player into one of their client’s websites. As we scoured the web looking for an audio player that met all of their requirements we realized that no perfect solution already existed for Webflow. So we took the opportunity to build our own plugin that could be easily used on the Webflow platform and more.

The Objectives

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)

Utilizing Attributes

Giving you complete control

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.

Carleton Maybell
6-1-3-4 Progression Example
0:00
2:21
https://upliftwebdesign.com/wp-content/uploads/2021/11/song-preview.mp3
6-1-3-4 Progression Example
Carleton Maybell
True Volume 2
https://upliftwebdesign.com/wp-content/uploads/2022/04/next.svg

Example single track player

CSS State Helpers

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.

Global Audio Player Feature

The bread and butter

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.

Bright Lights
Truemuzic
00:00
https://upliftwebdesign.com/wp-content/uploads/2022/05/New-York-Vibe.mp3
Bright Lights
Truemuzic
True Volume 2
https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-37.png
Bright Lights
Truemuzic
00:00
https://upliftwebdesign.com/wp-content/uploads/2022/05/Caelon-Keys.mp3
Cae Keys
Truemuzic
True Volume 2
https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-38.png
Voicemail
Truemuzic
00:00
https://upliftwebdesign.com/wp-content/uploads/2022/05/Voicemail.mp3
Voicemail
Truemuzic
True Volume 2
https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-39.png
Dream
Truemuzic
00:00
https://upliftwebdesign.com/wp-content/uploads/2022/05/Dream.mp3
Dream
Truemuzic
True Volume 2
https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-40.png

Get started using the True Audio Player

To help creatives even more, we created a Webflow clonable that allows Webflow users to pull several example audio players directly into their project and start using it instantly.

Webflow clonable

Future of the True Audio Player

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

Want to learn more about the True Audio Player?

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.

Learn more
0:00
2:21
https://upliftwebdesign.com/wp-content/uploads/2021/11/song-preview.mp3
Wavy Beat
Truemuzic
True Volume 2
https://thefader-res.cloudinary.com/private_images/w_760,c_limit,f_auto,q_auto:best/3_awddmu/roddy-ricch-photo-via-atlantic-records.jpg