Lagde eget karaoke-system for Syng - tester det på fredagspils

React, Next.js, Google Cloud og søk som skal fungere "i fylla" – sånn lagde Try Dig det nye karaokesystemet til Syng.

Det nye karaokesystemet kjører i skyen, og leveres til Chrome-PC-er i Syngs lokaler. 📸: Syng / Elisabeth Elboth
Det nye karaokesystemet kjører i skyen, og leveres til Chrome-PC-er i Syngs lokaler. 📸: Syng / Elisabeth Elboth Vis mer

Da ingen karaokesystemer var bra nok, bestemte karaokekjeden Syng seg for å få bygget sitt eget helt fra bunnen av.

– Det er gøy å jobbe på noe som mange hos oss bruker selv, sier Martin Jensen, teknologisjef i Try Dig, selskapet som fikk i oppdrag å lage den nye karaokeløsningen.

Martin Jensen, CTO, og Kristoffer Sivertsen, utvikler og teamleder. 📸: Kurt Lekanger
Martin Jensen, CTO, og Kristoffer Sivertsen, utvikler og teamleder. 📸: Kurt Lekanger Vis mer

Ifølge Jensen er det største problemet med dagens karaokesystemer at de fleste spiller av en lavkvalitets film fra YouTube eller lignende kilder, eller er basert på gamle og utdaterte standarder som CD+G.

– Det er også vanskelig å få tak i karaokesanger. Ofte må man kjøpe dem fra egne studioer som jobber med å produsere dem.

Rundt høsten 2021 ble det nye karaokesystemet tatt i bruk på Syngs to karaokebarer i Oslo, og samme år vant Try Dig også en Gulltaggen-pris for løsningen.

Ville ha mer sirkus

Eirik Espolin Johnson har tittelen "annenhver-daglig leder i Syng" sammen med kollega Jørgen Gulliksen. Espolin Johnson sier de lenge visste at de hadde lyst til å få laget sitt eget karaokesystem i stedet for å kjøpe noe ferdig.

– Det er jo kjernen i hele virksomheten vår, sier Espolin Johnson.

Syng-sjefen forteller at de ikke er spesielt tekniske selv, men at samarbeidet med teknologene i Try Dig har fungert veldig bra.

– Det har vært bra at også Try-folkene har vært glad i å synge karaoke!

– Ja, vi begynner å bli fast inventar på firmafestene, legger utvikler og teamleder i Try Dig, Kristoffer Sivertsen, til.

Frontenden er web-apper skrevet i TypeScript og React, og kjører på Chrome-PC-er. 📸: Elisabeth Elboth, Try Dig
Frontenden er web-apper skrevet i TypeScript og React, og kjører på Chrome-PC-er. 📸: Elisabeth Elboth, Try Dig Vis mer
«Det har vært bra at også Try-folkene har vært glad i å synge karaoke!»

Underveis har Try Dig hatt mange workshops sammen med Syng, der de har kommet med forslag til hvordan brukergrensesnittet skal være.

– Hele tiden har tilbakemeldingene vært at de vil ha mer sirkus! Det skal være gøyere og morsommere.

Designet i den endelige løsningen er derfor temmelig fargerikt og lekent, med massevis av animasjoner og effekter. Løsningen styrer også lyset i rommet for "det lille ekstra".

Må fungere for fulle folk

Martin Jensen forteller at det er en rekke utfordringer med å lage et karaokesystem. En av dem er at mange gjerne er alkoholpåvirket når de skal bruke systemet. Det stiller noen ekstra krav til UX-design, og brukertesting har vært viktig.

– Vi har hatt et eget Syng-rom når vi har hatt fredagspils hos oss, og fått folk til å teste og bruke det, sier Jensen.

Brukergrensesnittet er laget så det skal være så enkelt å bruke som mulig, og søkefeltet som kommer opp når du skal søke etter sanger skal fungere selv om folk er beruset.

– Vi bruker Algolia til søk. Det har vært kjempebra, og det skjønner hva du mener selv om du er full og skriver "Spritney Bears" i stedet for "Britney Spears".

Søket er basert på Algolia for at det skal fungere selv om man ikke klarer å skrive alt riktig. 📸: Elisabeth Elboth, Try Dig
Søket er basert på Algolia for at det skal fungere selv om man ikke klarer å skrive alt riktig. 📸: Elisabeth Elboth, Try Dig Vis mer

Skiller vokal og musikk

Karaokeløsningen som ble brukt hos Syng tidligere var installert på en datamaskin i rommet, som så var koblet til en lokal server på utestedet. Løsningen var ikke på nett og admin-brukergrensesnittet var vanskelig å bruke.

Den nye løsningen baserer seg på web-apper som kjører i skyen og vises på en PC med ChromeOS i hvert rom. Hele frontenden til karaokesystemet er laget i TypeScript og React.

På backenden brukes i stor grad Google Cloud, med Firestore som database.

Tech-stacken som brukes. På frontend er det React og TypeScript. 📸: Try Dig
Tech-stacken som brukes. På frontend er det React og TypeScript. 📸: Try Dig Vis mer

Jensen forteller at det er en ganske omfattende prosess å få lagt inn alt av låter i løsningen. I tillegg til at det selvfølgelig alltid er en del rettighetsproblematikk i musikkbransjen, ønsket Try Dig også å forenkle prosessen med å skille vokal og musikk.

Til dette brukes såkalt demuxing, som betyr at du kan ta vekk vokalen og bare sitte igjen med musikken. Og så må tekstene til låtene legges på i brukergrensesnittet, og synkroniseres opp mot musikken.

– Vi er i ferd med å introdusere en helautomatisert prosess for å gjøre dette, og vi eksperimenterer nå med å bruke AI til å hente ut tekst fra sanger automatisk, sier Jensen.

Admin-grensesnittet. 📸: Try Dig
Admin-grensesnittet. 📸: Try Dig Vis mer

Eget admingrensesnitt

Karaokesystemet er mer enn bare det festglade gjester ser.

– Det er et eget adminpanel for å legge til nye sanger, sette opp nye rom, sette opp pauseplakater og mye annet, sier Jensen.

Her har betjeningen god oversikt over hva som foregår i de ulike rommene. 📸: Try Dig
Her har betjeningen god oversikt over hva som foregår i de ulike rommene. 📸: Try Dig Vis mer

Det jobbes også med å integrere en bookingløsning, slik at gjester kan booke rommet hjemmefra og sammen med venner begynne å legge til sanger.

Nå er målet at også andre enn Syng skal kunne ta i bruk løsningen.

– Vi har inngått et partnerskap med Syng og startet et teknologiselskap der de er majoritetseier og vi er teknologipartner. Målet er nå å kunne selge karaokeløsningen til andre, avslutter Jensen.