PlotSet LogoPlotSet

How to Create an Audio Player Playlist

A step by step walkthrough for turning a spreadsheet of titles and audio links into a published, embeddable playlist in PlotSet, with play buttons, progress bars and category filters.

Etwa 6 Minuten

A list of tracks with play buttons, progress bars and category filters, built from a spreadsheet and ready to embed: that is what you will have. Each row becomes one playable track, and adding a track later means adding a row.

If you already have direct links to your audio files, it takes about six minutes. The one prerequisite is hosting, since PlotSet streams from the links you give it rather than storing the files.

Die Daten, die Sie brauchen

One row per track with up to four columns: title, an optional description, a direct audio file URL, and an optional category used for filtering and colour.

Beispiel-CSV
titlesubtitleurlfilter
Morning DriveA bright synth-pop instrumentalhttps://example.com/audio/morning-drive.mp3Electronic
Blue Room SessionsA laid-back jazz triohttps://example.com/audio/blue-room.mp3Jazz
Open HighwayGuitar-driven rock with a steady backbeathttps://example.com/audio/open-highway.mp3Rock
Hinweise

The URL must point directly at an audio file such as an MP3, OGG or WAV, not at a page that contains a player.

A row with a title but no link still appears, dimmed and not playable. A row with neither title nor link is dropped.

Keep category spellings identical, or the filter will list the same group twice.

The hosting server must allow direct linking and, ideally, range requests so seeking and the buffered bar work.

Die Schritte

Der genaue Klickpfad in PlotSet, von einer leeren Vorlage bis zum fertigen Diagramm.

  1. 01

    Open the Audio template

    From the PlotSet dashboard, start a new project and choose Audio from the Other category. It loads with a sample playlist so you can see how each row becomes a track.

    Die Vorlagenauswahl von PlotSet: links die Liste der Diagrammkategorien, daneben das geöffnete Raster "Bar Charts" und die Vorlagenkarte "Bar Chart" mit ihrer Schaltfläche "Select".
    Jede Anleitung beginnt hier. Wählen Sie erst die Kategorie, dann die Vorlage. Das Raster ist für jeden Diagrammtyp dasselbe.
  2. 02

    Prepare your track list

    Give each track a title and a direct file link, plus a description and category if you want them. Open each link in a browser tab first to confirm it plays.

  3. 03

    Upload the file, or connect it live

    Import a CSV or .xlsx file from the data panel, paste rows from a spreadsheet, or connect a Google Sheet so new tracks appear without re-embedding. The first row is read as the headers.

    Die Datenansicht im PlotSet-Editor: ein Tabellenraster mit den Spalten "Name", "Value" und "Region", gefüllt mit Zahlen zu kanadischen Provinzen, daneben der Bereich "Data" mit "Upload CSV File", "Magic Import" und der Synchronisierung über "Google Sheet".
    Die Datenansicht, hier in einem Balkendiagramm-Projekt. Laden Sie über "Upload CSV File" eine CSV-Datei hoch, holen Sie die Zahlen mit "Magic Import" aus einem Bild oder verbinden Sie ein Google Sheet. Der Bereich sieht bei jedem Diagrammtyp gleich aus.
  4. 04

    Check the column bindings

    Confirm which column is the title, the description, the audio URL and the category. This is usually right automatically when the headers are clear.

    Der Datenbereich von PlotSet mit hervorgehobenen Spaltenzuordnungen: "Label/time" auf Spalte A, "Values" auf Spalte B und "Filter/color" auf Spalte C, darunter die Schaltfläche "Auto Binding".
    Die Zuordnungen legen fest, welche Spalte zur Beschriftung wird, welche die Werte liefert und welche die Farbe steuert. "Auto Binding" errät sie anhand Ihrer Spaltenüberschriften. Prüfen Sie das Ergebnis, statt sich darauf zu verlassen.
  5. 05

    Style the player

    Open the Player tab to set the button colour, size and roundness, put it left or right of the text, and show or hide the progress bar. You can also choose one, two or three columns.

    Der PlotSet-Editor im Tab "Preview": ein fertiges Diagramm vom Typ "Audio Player" auf der Arbeitsfläche und der rot umrandete Einstellungsbereich am rechten Rand.
    Der Tab "Preview" für ein Diagramm vom Typ "Audio Player". Alle Gestaltungsoptionen stecken im umrandeten Bereich: Aussehen, Kopfzeile, Fußzeile und die Optionen, die es speziell für diesen Diagrammtyp gibt, jeweils in einem eigenen Tab.
  6. 06

    Add category filters

    In the Filter controls tab choose pill buttons, a dropdown or a stepped slider. In the Color tab you can tint the rows by category too.

  7. 07

    Set the size and pagination

    Adjust the artboard height so the rows you want fit. Longer lists are paginated with a pager underneath rather than scrolled.

  8. 08

    Publish it or embed it

    Publish for a live playlist and copy the embed code for your page. A PNG or PDF export captures only the page of tracks currently showing.

    Die Werkzeugleiste des PlotSet-Editors mit der hervorgehobenen Schaltfläche "Share" direkt neben der Schaltfläche "Export".
    Über "Share" werden aus dem fertigen Diagramm ein öffentlicher Link und ein Einbettungscode.

Starten Sie mit der Audio Player-Vorlage samt bereits geladenen Beispieldaten und ersetzen Sie diese durch Ihre eigenen.

Vorlage öffnen

Veröffentlichen, einbetten oder exportieren

Der letzte Abschnitt ist bei jedem Diagrammtyp gleich: "Share" macht aus dem Diagramm einen öffentlichen Live-Link und einen Einbettungscode, "Export" schreibt es als statische Datei heraus.

"Share": öffentlicher Link und Einbettungscode

Aktivieren Sie den Einbettungscode und den öffentlichen Link, um das Diagramm zu veröffentlichen. Den Link können Sie bedenkenlos an alle weitergeben, und der Einbettungscode fügt sich als iframe in jede Seite ein. Die Tooltips beim Überfahren mit der Maus und die volle Interaktivität bleiben erhalten. Wenn Sie das Diagramm später bearbeiten, überträgt "Recreate" die Änderungen auf Link und Einbettung.

Die Werkzeugleiste des PlotSet-Editors mit der hervorgehobenen Schaltfläche "Share" direkt neben der Schaltfläche "Export".
Über "Share" werden aus dem fertigen Diagramm ein öffentlicher Link und ein Einbettungscode.
Der Dialog "Share" von PlotSet: der Schalter, der den Einbettungscode und den öffentlichen Link aktiviert, die Schaltflächen "Link", "Embed", "Facebook", "Reddit", "Twitter", "LinkedIn" und "Email" sowie der öffentliche Diagrammlink mit der Schaltfläche "Copy".
Aktivieren Sie den Einbettungscode und den öffentlichen Link, kopieren Sie dann den Link oder den iframe-Code. Mit "Recreate" erreichen spätere Änderungen alle, die den Link bereits haben.

"Export": SVG, PNG oder JPG

"Export" schreibt eine statische Kopie in der Größe heraus, die Sie brauchen. SVG bleibt in jeder Skalierung scharf und lässt sich weiterhin in einem Design-Tool bearbeiten; PNG und JPG sind die sichere Wahl für Folien und Dokumente. Der Skalierungsfaktor sorgt dafür, dass das Bild auf einem Retina-Display gestochen scharf wirkt.

Die Werkzeugleiste des PlotSet-Editors mit der hervorgehobenen Schaltfläche "Export".
Über "Export" bekommen Sie eine statische Datei für eine Folie oder einen Bericht.
Der Dialog "Export chart" von PlotSet: die Skalierungsauswahl auf 2x, die Felder für Breite und Höhe mit 1000 mal 600 und das geöffnete Formatmenü mit "SVG", "PNG" und "JPG".
SVG bleibt in jeder Größe scharf und im Design-Tool bearbeitbar; PNG und JPG sind die sichere Wahl für eine Präsentation. Stellen Sie die Skalierung vor dem Export ein, damit das Bild auf einem Retina-Display gestochen scharf ist.

Styling-Tipps für Audio Player

Write short titles

Titles and descriptions truncate to a set number of lines. Keep titles short and let the description carry the detail; the full text appears on hover.

Colour by category

Tinting play buttons by category makes groups recognisable at a glance and makes the legend useful.

Match button size to the page

A larger button is easier to tap on mobile. Check the preview at the phone artboard size.

Order tracks deliberately

Rows play in sheet order, so put the clip you most want heard first.

Häufige Fehler bei Audio Player

A track is dimmed and will not play

The row has a title but no usable link. Check the URL column for blanks, and that it ends in a real audio file.

Clicking play does nothing

The link probably points to a web page, or the host blocks direct linking. Open the URL on its own in a browser tab to test it.

The seek bar will not jump ahead

The server may not support range requests. Host the files somewhere that does, or accept that seeking is limited.

Mehr über Audio Player erfahren

Nicht sicher, ob Audio Player die richtige Wahl ist? Erfahren Sie, was es ist, wann Sie es verwenden sollten und wann nicht.

Über Audio Player

Audio Player: häufige Fragen

A title and a direct audio file link for each track. A description and a category are optional.

Jetzt Audio Player erstellen

Kostenlos starten mit über 300 Vorlagen. Keine Kreditkarte erforderlich.