Gapless.js Demo (XState)

Experience seamless audio playback with state machine architecture

{{ trackTitle }}

{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
Initializing player...
Loading tracks...

Playlist
{{ trackStates.filter(s => s?.loading).length }} loading {{ trackStates.filter(s => s?.loaded).length }}/{{ tracks.length }} ready

Loading playlist...
{{ idx + 1 }}
{{ track.metadata?.title || `Track ${idx + 1}` }}
{{ track.metadata?.artist || 'Unknown Artist' }} Loading WebAudio... WebAudio Ready HTML5
3:45
{{ trackStates[idx]?.playbackType || 'HTML5' }}

State Machine Status

Queue State: {{ queueState }}
Current Track: {{ currentTrackIndex + 1 }} / {{ tracks.length }}
WebAudio Context: {{ webAudioEnabled ? 'Available' : 'Disabled' }}
Volume: {{ Math.round(playerVolume * 100) }}%
Loading Tracks: {{ trackStates.filter(s => s?.loading).length }}
WebAudio Ready: {{ trackStates.filter(s => s?.loaded).length }} / {{ tracks.length }}

Debug State 

{{ debugState }}