Can I upload varying numbers of audio files, ranging from 2 to 10, to a CMS Collection on Webflow?
TL;DR
- Add up to 10 File fields to your CMS item and use conditional visibility to display only filled audio players.
- For scalability, use a secondary “Audio Tracks” Collection with a Multi-Reference field to link multiple audio files to a single item and display them using a Collection List.
You can upload audio files to a Webflow CMS Collection, but there are limitations you'll need to work around for varying quantities (e.g., 2 to 10 files per item).
1. Webflow’s Native CMS Supports Limited File Uploads
- Webflow CMS fields allow uploading of one audio file per File field.
- You can add up to 30 custom fields per Collection, so technically you could have 10 separate File fields named “Audio 1”, “Audio 2”, etc.
- However, Webflow Designer won't automatically hide empty fields, so if only 2 of 10 are filled, the rest would be blank unless handled via conditional visibility.
2. Use Multiple File Fields with Conditional Visibility
- Add multiple File fields (up to 10) to your Collection schema.
- Label them “Audio 1” through “Audio 10”.
- On your Collection page or template, add up to 10 audio player elements (using embeds or native audio blocks).
- Apply Conditional Visibility to only show the audio element when the corresponding File field is set.
3. Consider Using a Multi-Reference Workaround
- Create a second Collection, like Audio Tracks, with a File field for the audio.
- Reference it with a Multi-Reference field in your main Collection.
- This lets you associate any number of audio files (2 to 10 or more) to each main CMS item.
- On the template page, use a Collection List to dynamically load all referenced tracks.
- This approach is more scalable and keeps your main Collection cleaner.
4. File Size Limitations
- Webflow’s CMS file upload limit is 10MB per file.
- Make sure your audio files are compressed appropriately (e.g., MP3 format).
5. No Native Audio Player Styling
- Webflow doesn’t support advanced audio controls out of the box.
- To customize player appearance or add playlist functionality, use custom audio embeds with elements like HTML’s
<audio>tag and JavaScript—within Webflow’s Embed element.
Summary
Yes, you can upload 2 to 10 audio files per CMS item using multiple File fields with conditional visibility, or better, a Multi-Reference setup linked to a Collection of audio items. The second method is more scalable and cleaner for dynamic content.