Audio (Wavesurfer) ✅

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

Thanks where-who. My player's designed to directly play MP3's and OGG's, either stored in the CMS or Webflow assets or hosted elsewhere.

For Mixcloud I think I'd look at one of two directions;

1. Check its embedding options first, hopefully you can create the styling and integration you want with all of your media and player code hosted on Mixcloud directly.

2. Alternatively if you want more styling control in Webflow, perhaps you can get a direct RSS feed or use APi webhooks + automation to maintain a CMS-based "mirror" of your playlist with MP3s. If the MP3's are in your CMS, my player would work.

Keep in mind that Webflow's CMS has a file size limit, I haven't retested lately. Files can be up to 10MB in assets but may have a lower size limit in the CMS. You'll need to check with a large file first so you can figure out factors like bitrate, channels etc. for your CMS version.

Also my v1 MP3 player is a straight-up file player, it doesn't support any streaming protocols yet, so large files would work great anyway. If you're doing something like long session recording or hour long podcasts, definitely look for a streaming solution.

To Do

• Styling controls

  • Colors

• Visible pause button

• Grouping mechanic

Demo

Designer - https://webflow-core-component-test.design.webflow.com/?pageId=6885eb145bb87aa37c14740a&locale=en&workflow=canvas