Vagibeats API

AI-powered procedural music generation for the web. Create terrible, wonderful 8-bit background music with consistent seed-based generation. Perfect for adding ambiance to any Vagibond application.

What you can build

• Retro websites - Add 90s-style background music to your Vagipages
• Game prototypes - Procedural soundtracks that never repeat
• Sound effects - Jingles for success, error, and notification events
• Ambiance - Background music for any occasion (sad, epic, spooky, cheesy)

Quickstart

Get up and running with Vagibeats in under a minute.

1. Include the script

<script src="https://vagibeats.vagibond.com/vagibeats-core.js"></script>

2. Start playing music

// Play music with a seed and style
Vagibeats.play({
  seed: 'my-page',      // Consistent music per seed
  style: 'cheesy'       // cheesy | spooky | epic | sad | lofi | circus
});

// Stop playing
Vagibeats.stop();

// Toggle on/off
Vagibeats.toggle({ seed: 'my-page', style: 'epic' });

Music Styles

Vagibeats offers 6 distinct musical styles, each with its own scale and chord progression:

play(options)

Start playing procedurally generated music.

Parameters

Returns

boolean - true if music started successfully, false if already playing or audio not supported.

stop()

Stop playing music and clean up audio resources.

toggle(options)

Toggle music on or off. If stopped, starts with the provided options. If playing, stops.

Returns

boolean - The new playing state (true if now playing, false if stopped).

playJingle(type)

Play a short sound effect jingle.

Available Jingles

// Play success jingle when form is submitted
form.addEventListener('submit', () => {
  Vagibeats.playJingle('success');
});

// Play error jingle on validation failure
if (!isValid) {
  Vagibeats.playJingle('error');
}

playNote(freq, options)

Play a single note at a specific frequency.

Parameters

Examples

Vagipage with Background Music

<button id="music-btn">🎵</button>
<script src="https://vagibeats.vagibond.com/vagibeats-core.js"></script>
<script>
  // Autoplay on first interaction (required by browsers)
  document.addEventListener('click', () => {
    Vagibeats.play({ seed: 'tarbaj-magician', style: 'spooky' });
  }, { once: true });

  // Toggle button
  document.getElementById('music-btn').onclick = () => Vagibeats.toggle();
</script>

Create a Music Button Automatically

// Creates a styled button with autoplay behavior
const btn = Vagibeats.createMusicButton({
  seed: 'my-page',
  style: 'epic',
  autoplay: true
});
document.body.appendChild(btn);

Changelog