Oud widgets to embed

Maqam lessons and ensemble notes can show the positions on the fretless neck instead of describing them.

Every widget is a small page under oudwarrior.com/embed/… that you frame on your own site. It follows the colour theme you pick, resizes to fit, sets no cookies or trackers inside your page, and carries a link back to Oud Warrior.

Single chord diagram

One chord chart, named in the path by its root and type. Add /0, /1, … after the type for a specific voicing instead of the default shape.

<iframe
  src="https://oudwarrior.com/embed/chord/oud/c/major"
  title="C major chord — Oud Warrior"
  width="340" height="300" loading="lazy"
  style="border:0;max-width:100%"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin">
</iframe>

Path: /embed/chord/oud/{note}/{type}[/{voicing}]. Find the chord you want in the chord library.

A set of chords

Several charts side by side: a song’s chords, a key’s family, the shapes in a lesson. List them in chords=, dash-separated, sharps as s (Cs), and pick layout=row, grid or column.

<iframe
  src="https://oudwarrior.com/embed/chords/oud?chords=C-F-G&layout=row"
  title="C, F and G chords — Oud Warrior"
  width="100%" height="300" loading="lazy"
  style="border:0"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin">
</iframe>

Path: /embed/chords/oud?chords=C-F-G&layout=grid|row|column. Pick the chords from the chord library.

Fretboard explorer

The whole interactive neck: readers tap a note or a fret and every matching spot lights up. Preselect notes with notes=; the rest of the Explorer’s state rides in the same query string.

<iframe
  src="https://oudwarrior.com/embed/fretboard/oud?notes=c,e,g"
  title="Fretboard explorer with C, E and G — Oud Warrior"
  width="100%" height="520" loading="lazy"
  style="border:0"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin">
</iframe>

Path: /embed/fretboard/oud?notes=c,e,g. Set it up on the fretboard explorer.

Tuner

The microphone tuner. Keep allow="microphone" on the frame so the permission prompt can appear inside it; without it the string picker and the readout still work.

<iframe
  src="https://oudwarrior.com/embed/tuner"
  title="Tuner — Oud Warrior"
  width="100%" height="440" loading="lazy"
  style="border:0;max-width:40rem"
  allow="microphone"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin">
</iframe>

Path: /embed/tuner. The full tool is on the tuner page.

Metronome

Tempo, tap tempo, time signature, accent and every click sound. Nothing plays until the reader presses Start.

<iframe
  src="https://oudwarrior.com/embed/metronome"
  title="Metronome — Oud Warrior"
  width="100%" height="360" loading="lazy"
  style="border:0;max-width:40rem"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin">
</iframe>

Path: /embed/metronome. The full tool is on the metronome page.

As a plain image, no iframe

Every chord this site draws is also a self-contained SVG image: it works anywhere an <img> does, in a Markdown README, a forum post, an email, or a platform that strips iframes and scripts. It stays sharp at any size and carries a text description for screen readers.

<img
  src="https://oudwarrior.com/images/diagrams/oud/c/major.svg"
  alt="C Major chord diagram"
  width="226" height="212" loading="lazy">

In Markdown: ![C Major chord diagram](https://oudwarrior.com/images/diagrams/oud/c/major.svg)

Path: /images/diagrams/oud/{note}/{type}.svg; sharps are written s (cs for C#) and the type matches the chord library.

Make it fit its content (optional)

Each widget knows its own height and reports it to your page. A fixed height works on its own; to have the frame grow and shrink with the widget, add origin and id to the URL and put this listener on your page once:

<iframe
  src="https://oudwarrior.com/embed/chord/oud/c/major?origin=https://YOURSITE.com&id=w1"
  data-sw-embed="w1" title="C major chord — Oud Warrior"
  width="340" height="300" loading="lazy" style="border:0;max-width:100%"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"></iframe>
<script>
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://oudwarrior.com') return;
    var d = e.data;
    if (!d || d.type !== 'stringwarrior:embed:size') return;
    var f = document.querySelector('[data-sw-embed="' + d.id + '"]');
    if (f) f.style.height = d.height + 'px';
  });
</script>

Set origin to your own site's address, and give each widget on a page its own id.

Or paste a placeholder

If your editor strips iframes, paste a placeholder and one script tag instead: oudwarrior.com/embed.js turns every .oudwarrior-embed on the page into the widget its data-embed names, with the same live sizing.

<div class="oudwarrior-embed" data-embed="chord/oud/c/major" data-title="C major chord"></div>
<script src="https://oudwarrior.com/embed.js" async></script>

Options

Add these to any widget URL as query parameters (?theme=forge):

Parameter	What it does
`theme`	The colour palette: any of this site’s themes.
`layout`	Chord set only: `row`, `grid` or `column`.
`mode`	Chord diagrams: `fingers`, `shape` or `notes`.
`origin`, `id`	For the resize listener above: your site and a unique id per widget.

Good to know

Is it free? Do I need an account?: It is free, with no signup and no key. Keep the credit line under each widget: it is how readers find Oud Warrior.
Does it track my visitors or set cookies?: No. The widget pages carry no analytics and set no cookies inside your page, so your own privacy and consent tooling is untouched.
Where does it work?: Anywhere that accepts an <iframe>: an HTML or embed block in most site builders, or a plain page. Where iframes are stripped, use the placeholder above.