player

@tabkit/player

Playback engine with cursor sync and built-in metronome. Drives visual playback of rendered tablature.

Player + Audio Playground

Select a song preset, press Play, and hear the notes being synthesized in real-time via Web Audio. The cursor syncs with the rendered SVG.

Loop

1:1/ 4 measures

Seek:

Tempo100 bpm

SoundWaveformVolume70%Theme

Integration Code

Combining TabPlayer with TabAudio for full playback with sound:

import { TabPlayer } from "@tabkit/player";
import { TabAudio } from "@tabkit/audio";
import { TabRenderer } from "@tabkit/core";

const audio = new TabAudio({ waveform: "triangle", volume: 0.7 });

const player = new TabPlayer(measures, {
  tempo: 100,
  loop: true,
  onNote: (notes, measure, beat) => {
    audio.playNotes(notes, 100); // ← plays sound!
  },
});

// Attach SVG for cursor sync
const svg = document.querySelector("svg");
player.attachSvg(svg);
player.play();

Metronome

Standalone drift-corrected metronome. Runs independently from the player.

import { Metronome } from "@tabkit/player";

const metronome = new Metronome({
  tempo: 120,
  onTick: () => console.log("tick"),
});

metronome.start();
metronome.tempo = 140; // change tempo live
metronome.stop();

Tempo120 bpm

0 ticks

API Quick Reference

TabPlayer

Name	Type	Description
play()	void	Start / resume playback
pause()	void	Pause playback
stop()	void	Stop and reset
seek(m, b)	void	Seek to position
setTempo(bpm)	void	Change tempo live
attachSvg(svg)	void	Cursor sync
destroy()	void	Clean up

Metronome

Name	Type	Description
start()	void	Start ticking
stop()	void	Stop ticking
tempo	number	Get/set BPM (20-400)
intervalMs	number	Interval in ms
isRunning	boolean	Running state