Docs Runes Plan Blog Changelog

This rune is part of @refrakt-md/media. Install with npm install @refrakt-md/media and add "@refrakt-md/media" to the packages array in your refrakt.config.json.

Track

A standalone track or recording with metadata. A heading becomes the track name. Use attributes for artist, duration, and other metadata. Tracks can be used independently or inside a playlist rune.

Basic usage

A single track with artist and duration.

{% track artist="Radiohead" duration="4:01" type="song" %}
# Everything in Its Right Place
{% /track %}

<li data-rune="track" typeof="MusicRecording">
  <span data-name="track-name" data-field="name" property="name">Everything in Its Right Place</span>
  <meta content="song" data-field="type">
  <span data-name="track-artist">Radiohead</span>
  <span data-name="track-duration">4:01</span>
</li>

Everything in Its Right PlaceRadiohead4:01

<li typeof="MusicRecording" class="rf-track" data-rune="track" data-density="full">
  <span data-name="track-name" data-field="name" property="name" class="rf-track__track-name">Everything in Its Right Place</span>
  <meta content="song" data-field="type" />
  <span data-name="track-artist" class="rf-track__track-artist">Radiohead</span>
  <span data-name="track-duration" class="rf-track__track-duration">4:01</span>
</li>

Podcast episode

Use type="episode" for podcast episodes with a date.

{% track type="episode" artist="Tech Weekly" duration="42:30" date="March 2025" %}
# The Future of Web Standards
{% /track %}

<li data-rune="track" typeof="MusicRecording">
  <span data-name="track-name" data-field="name" property="name">The Future of Web Standards</span>
  <meta content="episode" data-field="type">
  <span data-name="track-artist">Tech Weekly</span>
  <span data-name="track-duration">42:30</span>
  <span data-name="track-meta">March 2025</span>
  <meta content="March 2025" data-field="date-published" property="datePublished">
</li>

The Future of Web StandardsTech Weekly42:30March 2025

<li typeof="MusicRecording" class="rf-track" data-rune="track" data-density="full">
  <span data-name="track-name" data-field="name" property="name" class="rf-track__track-name">The Future of Web Standards</span>
  <meta content="episode" data-field="type" />
  <span data-name="track-artist" class="rf-track__track-artist">Tech Weekly</span>
  <span data-name="track-duration" class="rf-track__track-duration">42:30</span>
  <span data-name="track-meta" class="rf-track__track-meta">March 2025</span>
  <meta content="March 2025" data-field="date-published" property="datePublished" />
</li>

With body content

Tracks can include additional body content like descriptions or show notes.

{% track artist="Miles Davis" duration="9:22" type="song" %}
# So What

The opening track from *Kind of Blue*, featuring the iconic two-chord modal structure that changed jazz forever.
{% /track %}

<li data-rune="track" typeof="MusicRecording">
  <span data-name="track-name" data-field="name" property="name">So What</span>
  <meta content="song" data-field="type">
  <span data-name="track-artist">Miles Davis</span>
  <span data-name="track-duration">9:22</span>
  <div data-name="track-description">
    <p>
      The opening track from
      <em marker="*">Kind of Blue</em>
      , featuring the iconic two-chord modal structure that changed jazz forever.
    </p>
  </div>
</li>

So WhatMiles Davis9:22

The opening track from Kind of Blue, featuring the iconic two-chord modal structure that changed jazz forever.

<li typeof="MusicRecording" class="rf-track" data-rune="track" data-density="full">
  <span data-name="track-name" data-field="name" property="name" class="rf-track__track-name">So What</span>
  <meta content="song" data-field="type" />
  <span data-name="track-artist" class="rf-track__track-artist">Miles Davis</span>
  <span data-name="track-duration" class="rf-track__track-duration">9:22</span>
  <div data-name="track-description" class="rf-track__track-description">
    <p>
      The opening track from 
      <em marker="*">Kind of Blue</em>
      , featuring the iconic two-chord modal structure that changed jazz forever.
    </p>
  </div>
</li>

Attributes

Attribute	Type	Default	Description
`src`	`string`	—	Audio file URL
`artist`	`string`	—	Artist or creator name
`duration`	`string`	—	Track duration in `m:ss` or ISO 8601 (`PT4M1S`)
`number`	`number`	—	Track number in a sequence
`date`	`string`	—	Release or publish date
`url`	`string`	—	Link to the track's page
`type`	`string`	`song`	Track type: `song`, `episode`, `chapter`, `talk`, or `video`