Webflow’s blog recently featured some very cool code components, including the Sygnal Audio Player. And I’ve some cool new stuff for you.
How developers are building in Webflow with code components | Webflow Blog
Demonstration
Xfiner created an awesome demo site, featuring his Webflow rap album, and the Sygnal Audio Player. It showcases some of the cooler features- the waveform display, preloaded waveforms, CSS variable styling of the code component, and pause-others-on-play which is handled by a built-in media controller.
https://xfiner-sygnal-demo.webflow.io/
Sygnal Studio Launched
As part of this, I’ve replaced Sygnal Marketplace with Sygnal Studio, and added a number of new code components like Flipbook, Data Tables, and Rich Text Repeater.
All free, have fun.
Audio Waveform Preloading
One of the common use cases I’m seeing is shown in Xfiner’s demo- the need to show a lot of audio players on the page at once, and show the waveform before the audio itself has downloaded.
I’m handling that with a special waveform data format, which you can copy-paste from the component in design mode, into a component property or CMS field that you databind.
That makes it easy for the component to draw the waveform before it has the audio to calculate it from.
Cool stuff! More on code components soon.