Create A Custom CMS Audio Player In Webflow. No code!

Our app enables users to play audio files from your CMS collections. Customize your website's audio player to look however you want in Webflow - no more embedding widgets!

Supersparks icon
Webflow
CMS

Audio player for Webflow CMS

Add audio to CMS pages for podcast episodes or musician websites on Webflow.

webflow audio player gif

A Webflow Audio Player With Massive Flexibility

Play Audio From The Webflow CMS

Paste your audio file URLs into a collection and use Webflow's CMS feature to enable a wide range of use cases. For example, you can organize songs into albums and playlists using CMS reference fields. Or create individual pages for podcast episodes!

Full Design Control In Webflow

Customize the audio player to look exactly how you want in the Webflow designer. It even works with interactions! Instead of embedding a 3rd party audio player with limited design options, you can create your own groovy audio player that stands out & matches your brand.

Extensive Audio Player Functionality

Our audio player now supports 8 audio functions in Webflow, including: play, pause, progress bar, timeline select, next, previous, duration, and elapsed. And much more to come!

Power-up your no-code tools today!

Build audio projects that would previously be unfathomable in Webflow!

Podcast Website

Use Webflow's CMS templates to auto-generate SEO-friendly pages with playable audio for each podcast episode.

Musician Websites

Customize your Webflow audio player to showcase a musician's unique brand. Also, create pages or experiences for albums, playlists, and more.

Member Only Audio Content

Create web apps with audio content only registered users can access. Perfect for meditation programs, courses, premium podcast episodes and more.

Audio Marketplace

Allow users to sample audio files before purchasing them through Webflow E-commerce. Perfect for stock music marketplaces, like Epidemic Sound.

Audio Books

Increase book sales by making audio books available to listen to and purchase on your website.

How It Works!

Design in Webflow and install our app in under 10 minutes.
1. Design Audio Player In Webflow

1. Design Audio Player In Webflow

Design an audio player in Webflow, connect your CMS collections, and paste audio file urls into your CMS collection. To get a head start, check out our cloneable example.

2. Select Audio File Collection & Fields

2. Select Audio File Collection & Fields

After authorizing your site, the Supersparks app will sync with your CMS data. Then you just need to select the CMS collection and field with your audio files.

3. Add Code & Classes To Audio Functions

3. Add Code & Classes To Audio Functions

Our step by step tool will guide your through the process of installing our app in under 5 minutes. All you have to do is paste our code snippet and classes to Webflow elements with your audio functions, such as a play button or timeline select div.

Watch Our Tutorial!

Get Cloneable

Simple, transparent pricing

Free 14 day trial - no credit card required!

Basic

$5
per month
Up to 2k pageviews per month
Unlimited websites

Pro

$19
per month
Up to 15k pageviews per month
Unlimited websites

Premium

$49
per month
Up to 100k pageviews per month
Unlimited websites

Supreme

$109
per month
Unlimited pageviews
Unlimited websites

Just This App

Add to an unlimited number of Webflow sites for unlimited usage.

Bulk update an unlimited number of records per month.

$
/mo
Get started

About the Webflow Audio Player App

Webflow currently doesn't have an audio player element for audio content. While it's possible to embed 3rd party solutions, they lack the design and audio collection customizability that audio creators with Webflow sites desire.

Our app allows you to add an audio player to your Webflow site that can be customized in the designer and dynamically play audio links from the CMS. This app is ideal for podcaster and musician websites, as it allows you to create custom CMS collections and page templates dedicated to albums, podcast episodes, playlists, and more. In addition, you can customize the audio user experience to showcase the audio creator's unique brand, increase SEO visibility, and much more.

Our solution

Our step-by-step tool helps you add our audio player and enable it to play audio file links from the CMS in minutes. No coding required. You can customize the audio player design in Webflow to look exactly how you want and show any CMS content, such as album cover, artist name, and more.

Our player will only support links of audio files because it is not possible to upload audio files to Webflow's CMS. Fortunately, it takes seconds to convert and share your mp3, mp4, or wav files as links using tools like Google Drive, Dropbox, and more.

Use cases

Podcast Website
Musician Websites
Member Only Audio Content
Audio Marketplace
Audio Books

App status

Live

Power-up your no-code tools today!

Power-up your no-code tools today!

Frequently Asked Questions

How is flowbase this good!
When will PixelGeek go to space?
How is Vlad getting away with being a spy?
Did anyone find out where waldo is?

All of our apps are free to try.

Check out our other apps for Webflow

See our Comments App in action

Provide details below to comment as guest or
Comment as guest or login to test our membership feature
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
88 comments
Kevin R.
This is some text inside of a div block.
March 22

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

DeleteReply
Provide details below to comment as guest or
Comment as guest or login to test our membership feature
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Cancel
Kevin R.
This is some text inside of a div block.
March 22

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Reply
Provide details below to comment as guest or
Comment as guest or login to test our membership feature
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Cancel
ADD YOUR TAGLINE

Build clean, scalable and efficient products.

Monthly Billing
Annual Billing
Basic plan

$10

Month

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla tellus

All limited links
Own analytics platform
Chat support
Optimize hashtags
Unlimited users
Basic plan
Popular

$48

Month

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla tellus

All limited links
Own analytics platform
Chat support
Optimize hashtags
Unlimited users
Enterprıse plan

$64

Month

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla tellus

All limited links
Own analytics platform
Chat support
Optimize hashtags
Unlimited users
CAPTION HERE

Pricing plan

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Personal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

$0 
Get Started

Title here

Add short description here

Title here

Add short description here

Title here

Add short description here

Title here

Add short description here

Startup

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

$40 
Get Started

Title here

Add short description here

Title here

Add short description here

Title here

Add short description here

Title here

Add short description here

Enterprise

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

$50
Get Started

Title here

Add short description here

Title here

Add short description here

Title here

Add short description here

Title here

Add short description here