​
Media Sequences

Chain show, hide, animate, sound, and wait steps into a single ordered sequence. Each step executes after the previous one completes.

​
SBCanvas.media.playSequence

await SBCanvas.media.playSequence([
  { action: 'show', target: '#alert', animation: 'slide_up' },
  { action: 'play_sound', url: '/sounds/ding.mp3', volume: 0.8 },
  { action: 'wait', duration_ms: 5000 },
  { action: 'hide', target: '#alert', animation: 'fade' }
]);
Returns Promise<void> — resolves when the entire sequence finishes.

​
Step Types

ActionRequired FieldsDescription
showtarget, animationMake element visible with enter animation
hidetarget, animationHide element with exit animation
animatetarget, animationPlay animation on a visible element
play_soundurlPlay audio file
waitduration_msPause before the next step

​
Step Fields

FieldTypeUsed ByDescription
targetstringshow, hide, animateCSS selector
animationstringshow, hide, animateCSS animation name
duration_msnumberwait, show, hide, animateDuration in milliseconds
urlstringplay_soundAudio file URL
volumenumberplay_soundVolume 0-1 (default 1)

​
Example: Full Alert Flow

SBCanvas.activities.on('tip', async (activity) => {
  document.getElementById('tip-name').textContent = activity.username;
  document.getElementById('tip-amount').textContent = `$${activity.amount}`;
  if (activity.message) {
    document.getElementById('tip-msg').textContent = activity.message;
  }

  await SBCanvas.media.playSequence([
    { action: 'play_sound', url: '/sounds/coins.mp3', volume: 0.7 },
    { action: 'show', target: '#tip-alert', animation: 'bounceIn', duration_ms: 600 },
    { action: 'wait', duration_ms: 5000 },
    { action: 'hide', target: '#tip-alert', animation: 'bounceOut', duration_ms: 600 }
  ]);
});

​
Example: Multi-Part Entrance

await SBCanvas.media.playSequence([
  { action: 'show', target: '#alert-bg', animation: 'fadeIn', duration_ms: 300 },
  { action: 'wait', duration_ms: 200 },
  { action: 'show', target: '#alert-text', animation: 'slideInLeft', duration_ms: 400 },
  { action: 'play_sound', url: '/sounds/whoosh.mp3', volume: 0.6 },
  { action: 'wait', duration_ms: 300 },
  { action: 'animate', target: '#alert-icon', animation: 'pulse', duration_ms: 500 },
  { action: 'wait', duration_ms: 4000 },
  { action: 'hide', target: '#alert-text', animation: 'slideOutRight', duration_ms: 400 },
  { action: 'hide', target: '#alert-bg', animation: 'fadeOut', duration_ms: 300 }
]);

​
Preload for Instant Playback

For the best experience, preload media used in sequences: 
SBCanvas.ready(async () => {
  await SBCanvas.media.preload('/sounds/coins.mp3');
  await SBCanvas.media.preload('/sounds/whoosh.mp3');
});