Host a Strudel music player on your website.

Quick start

Load the script once, then put the element where the music goes.

<script src="https://hyperjam.ai/player.js"></script>

<hyperjam-player name="My first beat" color="#4FE0BE">
  <script type="text/strudel">
    stack(s("bd*4").bank("RolandTR909"), s("hh*8").gain(0.3))
  </script>
</hyperjam-player>

Audio starts on the first tap; browsers don’t let a page autoplay.

Attributes

track

A HyperJam track slug. Loads its name, author, colour, cover and code.

code

Strudel code, inline or in a child <script type="text/strudel">.

name, author

The title and byline.

color, cover

Track colour, and a cover image the vinyl takes its colour from.

theme

dark (default), light, or auto to follow the viewer’s system.

size

full (default) or compact: one row, with the code beside it when there’s room.

Theming

Match your site: set these CSS variables on the element, or on any parent. Anything you leave out keeps its default.

hyperjam-player {
  --hj-accent: #7C5CFF;     /* Play key and meter */
  --hj-accent-text: #fff;
  --hj-bg: #0E1726;
  --hj-text: #E6EDF7;
  --hj-radius: 8px;
  --hj-font: "Inter", system-ui, sans-serif;
}

--hj-bg, --hj-text, --hj-muted

Card, text and byline.

--hj-accent, --hj-accent-text

The Play key and meter, and the text on the key.

--hj-code-bg, --hj-focus

Behind the code, and keyboard focus rings.

--hj-drums, --hj-bass, --hj-chords, --hj-melody

Tokens as they light up, by part.

--hj-radius

The card’s corners.

--hj-font, --hj-title-font, --hj-code-font

Fonts. With your own, add fonts="none".

Embedding with an iframe? Add ?theme=auto or ?accent=7C5CFF to its address.

JavaScript

const player = document.querySelector("hyperjam-player");
await player.play();        // from a click or tap
await player.setCode(next); // crossfades in on beat 1
player.addEventListener("hap", (e) => light(e.detail.lane));