Audio (Waveform) ✅
This audio player is designed to directly play MP3's and OGG's, either stored in the CMS or Webflow assets or hosted elsewhere.
Keep in mind that Webflow's CMS has a file size limit. Files can be up to 10MB in assets but may have a lower size limit in the CMS. Make sure to prepare your MP3 files properly to fit, or host them externally on Amazon S3, Cloudflare R2, Bunny .net, or another hosting platform.
This player is a straight-up file player, it doesn't support any streaming protocols yet, so large files won't work ideally. If you're doing something like long session recordings or hour long podcasts, look for a streaming solution. Most podcast hosting platforms already provide streaming-capable embeddable players that should suffice.
Goals
Support MP3
Maybe OGG later
Nicely stylized
Theme approximating Soundcloud
Play from any MP3 link
Controls
Play/pause, clicking the left play button
Seek by clicking on the waveform
Demos
Properties
MP3
Link
Use Webflow's File link type if you have the MP3 stored in assets or in a CMS File type field. Use the URL link type if you have the MP3 hosted externally.
Loop
Boolean
Can loop or play once
Preload
Boolean
Enables preloading
ID
ID
Used for programmatic purposes if you need an ID attached to this component, e.g. for hash navigation
ID Namespace
ID
Reserved for future use
Label
Text
A debugging convenience mechanism to help you identify which Player is identified in the console logs. Used especially with Waveform Data.
Debug Mode
Boolean
Enables or disables debugging mode. Enable if you need to see console logging. As of 0.1.9, the waveform data has been moved to the Design Mode feature below.
Design Mode
Boolean
Enables or disabled debugging mode. Enable if you need to copy the Waveform Data for waveform preloading.
JS API
Controlling the players
https://codepen.io/memetican/pen/OPyZOZq/56dca14d35c6f8f084b58b910a09714e
Updates & Fixes
0.1.9
Fixed variable conflicts in the shadow DOM, so that custom styling passes through consistently.
Centralized the MediaPlayerManager as a singleton
Added a Designer mode, for easy access to the waveform data at design time
Last updated