Jukebox – Projects for fun

01Jukebox

IdénThe idea

Jukeboxen är en konsert sedd inifrån publiken. På scenen spelar ett band, ljusen sveper och skärmen visar vad som spelas. När någon håller upp mobilen tittar du ner på en flyer du håller i handen, med en QR-kod. Den som skannar kan önska nästa låt.

The jukebox is a concert seen from inside the crowd. A band plays on stage, the lights sweep and the screen shows what is playing. When someone holds up their phone, you look down at a flyer in your hand with a QR code. Whoever scans it can request the next song.

02Jukebox

Så funkar detHow it works

Kameran. En webbkamera letar efter mobiler, helt i webbläsaren. Syns en mobil tittar du ner på flyern, och sänks den tittar du upp igen.
Huvudet. Samma kamera följer ditt huvud, så att vyn rör sig lite när du gör det.
Önskningar. Koden leder till en sida i mobilen där man söker och önskar låtar. De hamnar i kön på min Spotify.
Scenen. Skärmen visar omslaget, låten och kön, och en egen skärm bredvid visar texten rad för rad.

The camera. A webcam looks for phones, entirely in the browser. When a phone shows, you look down at the flyer, and when it goes down you look up again.
Your head. The same camera follows your head, so the view moves a little when you do.
Requests. The code leads to a page on the phone where you search for and request songs. They go into the queue on my Spotify.
The stage. The screen shows the cover, the song and the queue, and a second screen next to it shows the lyrics line by line.

03Jukebox

Ljud och ljusSound and light

Mikrofonen lyssnar på basen i rummet och hittar takten. Strålkastarna, publiken och skärmarna följer musiken, och går den fort och hårt slår ljusshowen över i rave-läge med strobe och färgbyten. Utan mikrofon kör scenen en egen takt.

The microphone listens to the bass in the room and finds the beat. The spotlights, the crowd and the screens follow the music, and when it gets fast and hard the light show switches to rave mode with strobes and colour changes. Without a microphone the stage keeps its own beat.

04Jukebox

I mobilenOn the phone

Efter skanningen ser man vad som spelas och vad som står på tur, och kan söka bland alla låtar på Spotify. När jag slår på det kan gästerna också följa med i låttexten i en karaokevy. I en adminsida bestämmer jag reglerna: hur många låtar var och en får önska, om önskningar ska godkännas först och om explicita låtar är tillåtna.

Flyern med QR-koden, sedd när man tittar ner

After scanning you see what is playing and what is up next, and can search all of Spotify. When I switch it on, guests can also follow the lyrics in a karaoke view. On an admin page I set the rules: how many songs each guest may request, whether requests need approval first and whether explicit songs are allowed.

The flyer with the QR code, seen when you look down

05Jukebox

Under huvenUnder the hood

Three.js med publiken från Quaternius (CC0). Animationerna är bakade i texturer, så att hela publiken ritas på en gång.
Mobilen och huvudet känns igen med COCO-SSD i TensorFlow.js. Kamerabilden lämnar aldrig datorn.
Takten kommer från mikrofonen via Web Audio.
En Node-server pratar med Spotify och skickar läget till skärmen via WebSocket.
Ett strömsparläge håller datorn sval när den står på hela kvällen.

Three.js with the crowd from Quaternius (CC0). The animations are baked into textures, so the whole crowd is drawn in one go.
The phone and your head are recognised with COCO-SSD in TensorFlow.js. The camera image never leaves the computer.
The beat comes from the microphone through Web Audio.
A Node server talks to Spotify and sends the state to the screen over WebSocket.
A power-saving mode keeps the computer cool when it runs all evening.