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.

About 6 minutes

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.

The data you need

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.

Sample 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
Notes

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.

The steps

The exact click path in PlotSet, from a blank template to a finished chart.

  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.

    PlotSet's template picker: chart categories listed down the left, the Bar Charts grid open, and the Bar Chart template card showing its Select button.
    Every guide starts here. Pick the category, then the template: it is the same grid whichever chart type you are after.
  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.

    The PlotSet editor's data view: a spreadsheet grid with Name, Value and Region columns filled with Canadian province figures, beside the Data panel offering CSV upload, Magic Import and Google Sheet sync.
    The data view, shown here on a bar chart project. Upload a CSV, lift the numbers out of an image with Magic Import, or sync a Google Sheet. The panel is identical for every chart type.
  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.

    The PlotSet data panel with the column bindings highlighted: Label/time mapped to column A, Values to column B and Filter/color to column C, with the Auto Binding button below.
    Bindings decide which column becomes the label, which supplies the values and which drives the colour. Auto Binding guesses them from your headers, so check it rather than assume it.
  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.

    The PlotSet editor on the Preview tab: a finished Audio Player on the canvas, with the settings panel outlined in red down the right-hand side.
    The Preview tab for a Audio Player. Every styling control lives in the outlined panel, each on its own tab: appearance, header, footer and the options specific to this chart type.
  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.

    The PlotSet editor toolbar with the Share button highlighted, sitting next to the Export button.
    Share is how a finished chart becomes a public link and an embed code.

Start from the Audio Player template with sample data already loaded, then swap in your own.

Open the template

Publish, embed or export it

The last stretch is the same for every chart type: Share turns the chart into a live public link and an embed code, Export writes it out as a static file.

Share: public link and embed code

Activating the embed code and public link publishes the chart. The link is safe to send to anyone, and the embed code drops into any page as an iframe that keeps the hover tooltips and the interactivity. Edit the chart later and hit Recreate to push those changes out to both.

The PlotSet editor toolbar with the Share button highlighted, sitting next to the Export button.
Share is how a finished chart becomes a public link and an embed code.
PlotSet's Share dialog: the toggle activating the embed code and public link, buttons for Link, Embed, Facebook, Reddit, Twitter, LinkedIn and Email, and the public chart link with a Copy button.
Switch on the embed code and public link, then copy the link or take the iframe. Recreate pushes later edits out to everyone already holding it.

Export: SVG, PNG or JPG

Export writes a static copy at whatever size you need. SVG stays sharp at any scale and can still be edited in a design tool; PNG and JPG are the safe choices for slides and documents. The scale multiplier is what gets you a crisp image on a retina screen.

The PlotSet editor toolbar with the Export button highlighted.
Export is the route to a static file for a slide or a report.
PlotSet's Export chart dialog: a 2x scale selector, width and height fields set to 1000 by 600, and the open format menu listing SVG, PNG and JPG.
SVG stays sharp at any size and stays editable in a design tool; PNG and JPG are the safe picks for a deck. Set the scale before you export so the image is crisp on a retina screen.

Styling tips for a 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.

Common mistakes when making a 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.

Learn more about the Audio Player

Not sure the Audio Player is the right choice? See what it is, when to use it and when not to.

About the Audio Player

Audio Player: common questions

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

Make your Audio Player now

Free to start with 300+ templates. No credit card required.