How can I embed a third party music player or any other method to play audio files on my eCommerce website created in Webflow?
- Upload audio to platforms like SoundCloud, Audiomack, or use direct MP3 links, then paste their embed iframe or HTML5 audio code into Webflow's Embed element.
- For eCommerce, link dynamic audio URLs in CMS collections using an Embed component with bound audio sources.
To play audio files on your Webflow eCommerce website, you can embed a third-party music player or use audio-hosting platforms with iframe support since Webflow doesn’t have a built-in audio element.
1. Use Third-Party Audio Player with Embed Code
- Choose a platform that supports audio embedding, such as SoundCloud, Audiomack, Bandcamp, or Spotify.
- Upload your audio file(s) to the platform and get the embed (iframe) code they provide.
- In Webflow, drag an Embed element into your desired location on the page.
- Paste the iframe embed code from the platform directly into the embed element.
- Publish the site to see the audio player rendered on the live page.
2. Use Google Drive or Direct MP3 Links with Custom Audio Player
- Upload your audio file (e.g., MP3) to Google Drive, Dropbox (with direct link setup), or an audio CDN.
- Use a custom HTML5 audio player, like:
<audio controls src="your-direct-mp3-link.mp3"></audio>- Drag an Embed element into Webflow and paste the audio code with the correct direct source link.
- Note: Ensure the link is publicly accessible and ends in
.mp3.
3. Use No-Code Tools With Audio Player Widgets
- Use tools like Elfsight or Common Ninja, which offer customizable audio player widgets.
- Configure your player using the tool’s interface, upload your MP3s there optionally, and copy the embed iframe.
- Back in Webflow, use the Embed element to paste the code.
4. Consider CMS Integration for Playback
If you're selling audio products (e.g., demo tracks), use a Collection Page for your product and add an Embed element with dynamic playlist/audio links per product.
- Add an audio URL field to your product CMS collection.
- In the Embed component, bind the
srcattribute of the audio element to the collection field.
Example:<audio controls src="{{wf {"path":"audio-url","type":"PlainText"} }}"></audio>
Summary
To play audio on your Webflow eCommerce site, embed a third-party music player (like SoundCloud or Elfsight), or use a custom HTML5 <audio> element with externally hosted audio files. Use Embed elements within Webflow to insert and control the audio wherever needed.