Music Player
A media player with playlist, seek/volume sliders, playback timer with effect cleanup, and track management.
#Preview
Music Player
6 tracks · 21:191"use client"23import { createSignal, createEffect, onCleanup } from '@barefootjs/client'4import { Slider } from '@/components/ui/slider'5import { Button } from '@/components/ui/button'67function MusicPlayer() {8 const [isPlaying, setIsPlaying] = createSignal(false)9 const [currentTime, setCurrentTime] = createSignal(0)10 const duration = 180 // 3 minutes1112 // Timer with cleanup — the key compiler stress test13 createEffect(() => {14 if (!isPlaying()) return1516 const interval = setInterval(() => {17 setCurrentTime(prev => prev >= duration ? 0 : prev + 0.1)18 }, 100)1920 onCleanup(() => clearInterval(interval))21 })2223 return (24 <div>25 <Slider26 value={(currentTime() / duration) * 100}27 onValueChange={(v) => setCurrentTime((v / 100) * duration)}28 />29 <Button onClick={() => setIsPlaying(p => !p)}>30 {isPlaying() ? '⏸' : '▶'}31 </Button>32 </div>33 )34}#Features
setInterval + onCleanup
Playback timer runs at 100ms intervals while playing. When paused or the track changes, the effect re-runs and onCleanup clears the previous interval. Tests the compiler's handling of effect cleanup lifecycle.
Slider Bidirectional Binding
Both seek and volume use controlled Slider components. The seek slider is driven by the timer (value updates every 100ms) and also responds to user drag. Tests high-frequency reactive prop updates on child components.
4-Stage createMemo Chain
currentTrack → progress percentage → formattedCurrentTime → formattedRemaining. All derived from currentTrackId and currentTime signals, updated 10 times per second during playback.
Playlist with Active Track
Playlist rendered via .map() with conditional styling for the active track. Click to play triggers track switch with timer reset. Tests loop + conditional coexistence.