Fluid Music Player — ARForge Components

Quick Start

Add Fluid Music Player to your page. Give it a visible width and let its height fit its content so the expanded view has room.
Open Tracks and replace the three demo tracks with your own Title, Artist, Artwork, and Audio File or Audio URL. The panel supports up to 20 tracks.
Choose Initial Track. This control starts at 0: 0 selects the first track, 1 selects the second.
Choose Initial Mode, Expand, and Direction. Mini, Click Region, and Auto are the insertion defaults. To reproduce the bottom-position demo, choose Up and bottom-anchor the player in its parent.
Pick a Preset and choose which of Queue, Favorite, Shuffle, Repeat, and Volume you want to show.
Open Framer Preview and press Play. Check seeking, queue selection, expansion, and playback with your own audio.

Tracks and Audio

Property	Default	Description
Title	Track title for a new item	Name displayed for the track.
Artist	Artist name for a new item	Artist or creator credit.
Artwork	Optional	Image displayed in the player and queue.
Audio File	Optional	Upload your audio. The panel describes MP3, M4A, WAV, AAC, and OGG; playback depends on browser support for the actual file.
Audio URL	Empty	A direct, publicly reachable audio source. Use a host that permits playback from your site.
Favorite	Off for a new item	Initial favorite state of this track.

Audio File takes precedence over Audio URL. Clear the uploaded file if you want to switch a track to its URL. A streaming service's song page is not a direct audio file.

Missing artwork uses a gradient fallback. Missing audio displays the configured missing-audio message. A failed source can display Text → Audio Error. Replace demo audio with files you have permission to use and test the final host and format.

Playback Settings

Property	Options or range	Default	Description
Initial Track	0–19	0	Starting track, using zero-based numbering.
Autoplay	On / Off	Off	Attempt playback on load. The browser may require a visitor to press Play.
Initial Volume	0–1	0.8	Starting audio volume.
Preload	None, Metadata, Auto	Metadata	Loading preference sent to the audio element.
Wrap Tracks	On / Off	On	Allow manual next/previous navigation across the ends of the list.
Time Display	Remaining, Total	Remaining	Time shown beside the playback position.
Swipe	On / Off	On	Allow track changes by dragging the artwork where it is shown.
Queue	On / Off	On	Make the track queue available.
Close on Select	On / Off	On	Close the queue after a track is selected.
Favorite / Shuffle / Repeat / Volume	On / Off	On	Show the corresponding controls where the layout has room.

Shuffle starts off. Repeat starts off and cycles through Off, All, and One. Wrap Tracks is not Repeat All: wrapping controls manual navigation, while Repeat controls end-of-track behavior. Playback advances through the list; Repeat All returns to the first track at the end. Repeat One restarts the current track. Shuffle uses its own selection history.

Previous restarts the current track when playback is more than three seconds in. Near the beginning it moves to the previous track when available.

Expansion and Queue

Property	Options	Default	Description
Initial Mode	Mini, Expanded	Mini	Starting layout in Preview and on the site.
Expand	Click Region, Button, Disabled	Click Region	How visitors expand the player.
Direction	Auto, Up, Down	Auto	Expansion direction; Auto compares space above and below.
Queue Style → Expanded Queue	Popover, Inline	Popover	Queue presentation in the expanded player.
Queue Style → Max Height	120–640 px	330 px	Maximum queue height before scrolling.
Queue Style → Panel Radius	0–40 px	18 px	Queue panel rounding.
Queue Style → Row Radius	0–32 px	12 px	Track-row rounding.
Queue Style → Row Padding	4–20 px	8 px	Track-row padding.

For upward expansion, bottom-anchor the component in its parent. Leave room for the larger player and avoid clipping the queue in a parent with hidden overflow. The component does not pin itself to the viewport.

Demo Position Controls

The current demo starts in Mini with the Glass preset and three tracks. Its Top and Bottom buttons let you compare placement: Top expands downward; Bottom expands upward. Changing position closes the queue and returns the player to Mini before the next expansion.

Those buttons are enabled for the demo and override its Direction setting. A newly inserted player does not show them. For your own page, use Direction and the parent layout to choose placement; Auto is the insertion default. The demo's saved Direction is Up, but its initial Top selection makes it expand downward.

Accessory accepts one connected slot item in the expanded utility area. The player also exposes On Play, On Pause, On Track Change, On Expand, On Collapse, On Favorite, On Ended, and On Error event controls for Framer interactions.

Appearance

Choose Glass, Graphite, Light, or Custom under Preset. Custom exposes Custom Colors for Background, Foreground, Secondary, Error, Border, Slider Track, Hover, Queue, and Active Row.

Group	Important controls and defaults
Appearance	Accent #9C72FF; Player Radius 24 px; Artwork Radius 18 px; Blur 18 px; Surface Opacity 0.88; Padding 24 px; Gap 24 px; Border on; Shadow 0.55.
Artwork	Visible on; Mini Size 64 px; Expanded Size 280 px; Image Fit Cover; Shadow 0.26.
Controls	Button Size 44 px; Mini Play 48 px; Expanded Play 60 px; Icon Scale 0.48; Control Gap 12 px; Play Icon white; Play Glow 0.26.
Sliders	Track Height 4 px; Knob Size 14 px; Time Labels on.
Typography	Separate Title, Artist, and Utility font controls; initial sizes 28, 16, and 12 px.
Text	Queue Title, Empty Queue, No Tracks Title, No Tracks Subtitle, Untitled Track, Unknown Artist, Audio Error, and Missing Audio.

Use Artwork → Image Fit → Contain if you need the whole cover image visible. Cover fills the artwork area and can crop. Glass blur depends on what is behind the player; an opaque or uniform background can make the effect subtle.

Motion

Morph controls the mini-to-expanded transition and defaults to a spring. Track Change controls the track transition and defaults to a 0.22-second tween. A reduced-motion preference replaces these with near-instant transitions. Changing these settings affects the presentation, not audio speed.

Canvas and Preview

Canvas State (Mini), Canvas Track (0), and Canvas Progress (35%) configure the static editor display. They do not start playback or set a visitor's playback position. Use Initial Mode and Initial Track for the interactive starting state.

Audio playback is disabled in static rendering. Open Preview to test media, browser playback permission, and the real track duration.

Responsive Behavior

The player measures its container. The expanded view uses a wider arrangement from 720 px and a stacked arrangement below it, with tighter spacing at smaller widths.

The mini player hides Previous below 360 px and its volume toggle below 520 px. Other secondary controls may also move or disappear as space narrows. Open the expanded player to access the fuller control set. Keep the artwork visible if swipe-based track selection is part of your intended interaction.

Recommended Usage

Use it for a small music catalog, podcast samples, sound design previews, or a creator portfolio. Use clear track titles and credits. For an always-open listening section, choose Expanded and consider an Inline queue.

Best Practices

Test each audio source in Preview, including loading and seeking.
Keep the Play control easy to see; do not depend on autoplay.
Use modest artwork sizes and concise titles in narrow columns.
Leave expansion space and check queue clipping in the parent layout.
Check custom colors, focus outlines, and error messages against your page background.

Accessibility

Playback controls use labeled buttons, and seeking and volume use range inputs. Focus-visible outlines are provided. The Click Region expansion target supports keyboard activation. The queue can be closed with Escape, with focus returned to its toggle.

The Accessibility group lets you edit player, button, slider, queue, favorite, and artwork labels. Reduced-motion preferences shorten the layout and track transitions. Browser Media Session controls are connected where supported; available actions depend on the browser.

Favorites are temporary player state. They are not stored in an account or saved across reloads. Starting another instance of this player on the same page pauses the first instance; unrelated audio players are not controlled.

Troubleshooting

Audio does not start automatically

Press Play in Preview. Browsers can reject automatic playback, even when Autoplay is enabled. Also check Initial Volume and mute state.

My Audio URL is ignored

Clear Audio File on that track. Uploaded files take priority when both fields are filled.

The demo expands down even though Direction is Up

The demo's Top/Bottom selector takes precedence. Select Bottom to inspect upward expansion. In a normally inserted player without those demo buttons, Direction controls the expansion.

The player says Audio unavailable

Check that the source is a playable audio file, can be reached without signing in, and is permitted by its host. Try uploading the file directly to distinguish a host problem from a format problem.

The wrong track appears in Canvas

Canvas Track controls the static preview. Initial Track controls the interactive player. Both start at 0.

Upward expansion moves the player unexpectedly

Bottom-anchor the component in its parent and let its height grow. Direction does not automatically change the parent layout or make the player fixed to the screen.

My favorites reset after reloading

Favorites are temporary state for the current player instance. Use each track's Favorite setting to define its starting state; there is no persistent favorites library.

The last track does not repeat

Enable Repeat All in the player. Wrap Tracks controls manual navigation across the list ends, not the repeat mode.

FAQ

Can I upload my own audio?

Yes. Use Audio File on each track, or a direct Audio URL. Actual playback depends on the browser and source format.

Does it connect to Spotify or Apple Music?

It plays uploaded files and direct audio URLs. It has no streaming-service account or catalog integration.

Can I keep the player expanded?

Choose Initial Mode → Expanded and Expand → Disabled if you want to disable mode switching.

Can I hide the queue or cover image?

Yes. Turn off Queue or Artwork → Visible. Hiding artwork also removes the artwork area used for swiping.

Are favorites saved for returning visitors?

No. They reset with the player instance. Each track's Favorite field sets the initial state.

Can multiple players play at once?

Instances of Fluid Music Player on the same page coordinate playback: starting one pauses another. This does not manage unrelated audio components.

Does it need an extra package installation in Framer?

The component uses React, Framer, and Framer Motion imports. Its controls do not require buyers to install another package manually in Framer.

Limitations

Tracks are configured through the Framer panel, with up to 20 items. There is no account system, persistent favorites, streaming-service integration, or playback-speed control. Audio format support, autoplay permission, and operating-system media controls depend on the browser. Expansion and queue visibility also depend on the surrounding page layout.

Changelog

v1.0

Initial documented version of Fluid Music Player.

Uploaded audio and direct audio URLs with artwork and track information.
Mini and expanded layouts, queue, seeking, volume, shuffle, repeat, and temporary favorites.
Configurable labels, appearance and motion, with static Canvas preview controls.