Non CMS audio player

Community resources General
1

Hi everyone,

Is it possible add a simple audio player to Webflow, without using a CMS collection?

I only need 3-5 tracks, nothing too complicated.

I don´t mind adding the track names manually, as long as there is a stop/start or pause button on each track.

Thank you for all your help.

Best regards everyone.

2

Hi Terry, the easiest way would be to host your tracks on Soundcloud and then just have an embed on Webflow. This is bad practice, however the most easiest whilst avoiding the CMS collection

1 Like
3

Thanks for this! :+1:

Just out of interest, why is it ´bad practice´?

I´m wondering if I could I do something similar, but host my tracks on DropBox?

I´ll see if I can search around for this solution.

Many thanks again.

4

Hi Terry, it is bad practice as you have to use an external service to reach your goal in good practice you should always try to do everything natively within Webflow as you’ll have fewer outbound requests to an external service in theory keeping your site fast. However, as long as there isn’t too many embed you should be okay. You can also use these clones to achieve your goal natively but would require you to have a bit of knowledge on adding the tracks and styling etc. To answer the Dropbox question you’ll be better off using these clones and adding your tracks to Webflow as even with Dropbox you’ll have to use an external service and most likely would require more code configuration if you were to just do it on Webflow itself however here is an example if you wanted to achieve this via dropbox.

If I have solved your issue please mark it as solved and a heart would be much appreciated! However, If you need further help in achieving this do reach out!

Audio Player Clone Examples Natively on Webflow

1 Like
5

Hey there @TerryHibbert ,

I stumbled upon this thread and noticed you were looking for a way to add an audio player to your site. Not sure if you’re still searching, but I thought I’d share something we’ve been working on. It’s called Awedio, and it might be just what you (or anyone else scrolling through this thread) need. With Awedio, you can easily upload and embed audio tracks, or even create a playlist that you can customize to your liking. And on our free plan, you can style the single audio player and upload/host up to 60 minutes of audio without worrying about the number of files.

If you end up trying it out, I’d be super keen to hear your feedback! :blush:

6

Hey there!

Yes, totally possible to add a simple audio player to Webflow without using a CMS collection. Since you only need a few tracks and don’t mind setting them up manually, there are a couple of easy ways to go:

  • Webflow Embed Element: You can use the native embed block and paste in simple HTML5 <audio> tags. Each tag can include a single track with its own play/pause button. Example:
<audio controls>
  <source src="your-track-url.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

You’ll need to host the audio files somewhere (like Dropbox, Google Drive with direct links, or your own hosting).

  • Third-party widgets: If you’d prefer a more styled and manageable player, something like the Elfsight Audio Player for Webflow can help. It lets you embed a customizable player directly into your Webflow page, without needing a CMS. You can manually add your track titles and control styling and layout, and it works with multiple formats.

  • Other tools: There are also lightweight embeddable players from SoundCloud or AudioMack if you don’t mind hosting the tracks there. They each come with pause/play and display options.

Hope this gives you a few ideas to try! Let me know if you want sample code or help setting it up.

Cheers,
Elfsight Team