A playlist built from one document

Runs in any browser

Nothing to install.

Four tracks played one after another — next, previous, shuffle and repeat included — from one GEML document (geml-media/v1) and a stylesheet with one rule. The music is synthetic (ffmpeg's expression synthesizer), so the repository ships no audio it does not own.

The result

Open it on its own page

How it is made

playlist.geml is a timeline with one audio track and four cuts, and the order of the cuts is the play order. library.geml holds each file with its hash; an asset's first body line is the title the list shows. Nothing writes a length: an audio file has its own, and a playlist only plays its cuts in order.

What makes the timeline a playlist is the stylesheet's one rule, component=playlist. Shuffle and repeat are how you listen, not what the document says, so they are the panel's buttons — or the rule's defaults, as in component=playlist shuffle=on repeat=all.

node integrations/chrome-geml-viewer/tools/media-page.mjs . playlist.geml playlist.style.geml play.html

That is geml's media-page.mjs, run in this folder: the viewer's own playlist code, written out as one static page.

playlist.geml

=== meta
title = "Late-night playlist"
profile = "geml-media/v1"
===

==== media {#late-night tracks="music:audio"}

=== media-clip {#t1 track=music src=library.geml#night-train}
===

=== media-clip {#t2 track=music src=library.geml#rain}
===

=== media-clip {#t3 track=music src=library.geml#dawn-chorus}
===

=== media-clip {#t4 track=music src=library.geml#harbor-lights}
===

====

playlist.style.geml

=== meta
title = "Playlist view"
profile = "geml-style/v1"
===

=== style-screen {#radio axis=column slots="media"}
===

=== style-rule {#as-playlist match="media" component=playlist}
===

library.geml

=== meta
title = "Late-night library"
profile = "geml-media/v1"
===

Four pieces made for this demo by ffmpeg's expression synthesizer: no samples,
no recordings, nothing anyone else owns. Each asset's first body line is the
title the playlist shows.

=== media-asset {#night-train src=music/01-night-train.mp3 sha256="fe0e2571648a5bf8d6ff6a02960863bc55d3f612ed25484559ad06e28076b789" origin=generated}
Night Train
===

=== media-asset {#rain src=music/02-rain.mp3 sha256="435918cd508b30b2671ff454f7a4cf9514ac00848d6efa92bb6b0102590df777" origin=generated}
Rain on the Window
===

=== media-asset {#dawn-chorus src=music/03-dawn-chorus.mp3 sha256="6c249f04a66e426d0e7cf379b0ad9f937ef46d23302ee76ca358b40bd9232a9b" origin=generated}
Dawn Chorus
===

=== media-asset {#harbor-lights src=music/04-harbor-lights.mp3 sha256="25fadbc1636f5d404d3848eb4b4ea6cb551f5f2cb19cf913c351f36638b7e2d2" origin=generated}
Harbor Lights
===

The folder, with the music: public/examples/geml-media-playlist/.