How To Create A Customizable CMS Audio Player In Webflow

Hey there :wave:.

The ability to play audio files from the CMS has been a long sought after Webflow feature. Now this is possible through the Supersparks app. Instead of embedding widgets, this no-code app allows you to create your own custom audio player in the Webflow designer.

Here is a cloneable example of the app in action. Using CMS reference fields and page templates, I am organizing my audio files (in the ‘songs’ collection) into albums & playlists.

Through this audio player, you can build all sorts of audio driven no-code projects in Webflow, such as: musician or podcast websites, member only audio content (eg. a Headspace clone), stock music marketplaces (eg. Epidemic Sound clone), and much more.

Below is an in depth tutorial to help guide you through the installation and development process:

Thanks and let me know if you have any questions or feedback :).

1 Like

Can you queue/target interactions?

Khoi Vinh (https://www.subtraction.com/) did some great work using Flash audio interviews synchronised with reportage photos when he was at the New York Times about two decades ago so I’m interested to see how far the technology has developed.

Cheers, Sam

Hey @Sam_Sharpe !

While it’s possible to add interactions to audio player functions (eg. change progress bar color on hover), our app cannot queue certain interactions for something like an audio slideshow yet. But this is a use case we will explore in the future, as I think it could also be valuable for podcasters.

Thanks for sharing Khoi’s site btw. Awesome content!