Clicky

WAVEFLOW

by Flowwwtin'

FREE Audio player
for Webflow

A fully customizable free audio player built entirely with native Webflow elements and powered by attributes. Try it out! 👉

Use it with your own hosting, or use Libflow

Title
Artist
Album
Genre
0:00
0:00
New York Vibe
Truemuzic
Album
Rock
0:43
https://upliftwebdesign.com/wp-content/uploads/2022/05/New-York-Vibe.mp3
Truemuzic
New York Vibe
Chicago Vibe
Truesongs
Appetite for Destruction
0:43
https://upliftwebdesign.com/wp-content/uploads/2022/05/New-York-Vibe.mp3
Truemuzic
New York Vibe
New Orleans Vibe
Nirvana
Smells Like Teen Spirit
0:43
https://upliftwebdesign.com/wp-content/uploads/2022/05/New-York-Vibe.mp3
Truemuzic
New York Vibe

No iframes, ever!

Flowwwtin' apps use 100% native Webflow elements — no embeds, no hacks. Everything fits right into your layout, so you stay in control of the look and feel.

Match your brand perfectly

No annoying branding or hidden limitations

Powered by Attributes

Every feature in Waveflow runs on attributes — define what plays and how it behaves on any element — all visually, inside Webflow.

Control everything from the Designer

Add logic without writing code

Currently available attributes:

Name
Description
data-ft-wav="player"
data-ft-wav-container="playlist"
data-ft-wav="track"
data-ft-wav-control="play"
data-ft-wav-control="pause"
data-ft-wav-control="next"
data-ft-wav-control="prev"
data-ft-wav-control="mute"
data-ft-wav-control="unmute"
data-ft-wav-control="volume"
data-ft-wav-control="progress"
data-ft-wav-progress="bar"
data-ft-wav-progress="handle"
data-ft-wav-volume="bar"
data-ft-wav-volume="handle"
data-ft-wav-display="track-title"
data-ft-wav-display="track-artist"
data-ft-wav-display="track-album"
data-ft-wav-display="meta-key"
data-ft-wav-display="current-time"
data-ft-wav-display="duration"
data-ft-wav-display="display-image"
data-ft-wav-meta="key"
data-ft-wav-source="track-title"
data-ft-wav-source="track-artist"
data-ft-wav-source="track-album"
data-ft-wav-source="track-image"

Fueled by Events

Waveflow emits custom events for every key interaction — you listen, Waveflow talks.

document.addEventListener('event-name', function(event) {
    // your custom logic here
  });

Currently available events:

Name
Description
waveflow-play
waveflow-pause
waveflow-progress
waveflow-end
waveflow-next
waveflow-prev

Triggered by Methods

Waveflow responds to custom events you dispatch — you talk, Waveflow listens.

const player = window.WaveFlow.getPlayer('my-player-container');
  if (player) {
      player.play();
  }

Currently available events:

Name
Description
play()
pause()
toggle()
setVolume(volume)
getVolume()
seek()
getCurrentTime()
getDuration()
next()
previous()
setTrackByIndex(index, autoplay)
isPlaying()
getCurrentTrackIndex()
getPlaylistLength()

Instant access, sooo simple & free forever.

Drop it into your Webflow project in seconds — just copy, paste, and you're live!

Get it free
24/7 support:
hello@flowwwtin.com