Skip to content

Playlist & shuffle

Collection navigation with loop and shuffle modes.

audio

Preview

Props & interactive options

Prop Type Default Description Try it
show_playlist url param 1 Show playlist.
Browsers block autoplay with sound. Enabling auto_play automatically enables muted so playback can start; viewers can then unmute manually.

Try it in the player

Shuffle mode

Use the shuffle button in the player toolbar to randomise the playlist order. A Fisher–Yates permutation ensures every track plays once before the order is re-shuffled.

Loop playback

Use the loop button in the player toolbar to cycle between three modes: loop the entire playlist, loop the current track only, or disable looping.

Documentation

Navigate a collection of audio tracks with previous/next controls. Loop mode repeats the current track or entire playlist. Shuffle mode randomizes playback order. The playlist section is collapsible and shows thumbnails, titles, and durations.

Code

HTML

Frequently asked questions

Yes. Shuffle uses a Fisher–Yates permutation built when the mode is enabled, so every track in the playlist plays once before the order is re-shuffled. This avoids the "iTunes effect" where the same tracks pop up back-to-back.

Yes. The loop button has two states: loop playlist (default, restarts the collection at the end) and loop one (replays the current track indefinitely). A third click disables looping.

A thumbnail, title, duration, and an active-state indicator for the currently playing track. The panel is collapsible so listeners can keep a compact player while still navigating the collection on demand.