cc2024_BlaBlaSpotify

Code Camp - Web Radio with Spotify

Problem

You want to hear the BlaBla from some radio station (e.g. Radio SRF 1, News, etc.), but you can't stand the music there. You want both, good music AND blabla

Solution

Mix the your favourite music stream together with the Blabla from a chosen radio station. And be happy slightly smiling face

Approach to Solution

1. Consume Blabla-Stream (SRF 1)
2. Consume Music-Stream (Spotify) (API key)
3. Create one final stream, where User can switch between Blabla and Music
4. Automatic switching to Blabla-Stream, when blabla is broadcasted
5. Smooth Transitions (Wait with Blabla until song has ended, or Smooth Fade-out/in)
6. PowerPoint Slides
7. ----- up to here happened in the CodeCamp in Emmetten -----
8. Deployment to Incubator
9. Nice UI for Spotify (Playlists, Artists, Skip Button, Login etc.)
10. Display current song/Playlist/Blabla-Epiosode
11. Radio station selectable from 50'000 stations (-> not possible due to lack of meta data)
12. Go-Mobile: PWA
13. Android/iOS app
14. Mix Music from station 1 with Blabla from station 2
15. Mix Music from station 1 with Spotify during the Blabla episodes
16. Be millionaire and love-your-live!

Try it out

Deploy it on incubator

Backend

1. mvn clean install
2. docker build -t blabla-backend .
3. docker run -p 8080:8080 blabla-backend
4. docker logs -f blabla-backend
5. docker tag blabla-backend raffaelheinzer248/blabla-spotify-backend
6. docker push raffaelheinzer248/blabla-spotify-backend
7. docker rm -f blabla-backend
8. oc create secret generic blabla-secrets --namespace=blabla-spotify --dry-run=client -o yaml --from-literal="SRF_CONSUMER_KEY=FIXME" --from-literal="SRF_CONSUMER_SECRET=FIXME" --from-literal="SPOTIFY_CLIENT_ID=FIXME" --from-literal="SPOTIFY_CLIENT_SECRET=FIXME"> blabla-secrets.yaml
9. download https://raw.githubusercontent.com/baloise-incubator/okd4-cluster-infra-apps/refs/heads/master/sealed-secrets/kubeseal.crt > incubator-ca.crt
10. kubeseal --cert incubator-ca.crt --namespace=blabla-spotify -oyaml < blabla-secrets.yaml > sealed-secret.yaml

Frontend

1. npm run build
2. docker build -t blabla-frontend .
3. docker run -p 4200:8080 blabla-frontend
4. docker tag blabla-frontend raffaelheinzer248/blabla-spotify-frontend
5. docker push raffaelheinzer248/blabla-spotify-frontend
6. docker rm -f blabla-frontend

Links

Source

• https://github.com/baloise-incubator/cc2024_BlaBlaSpotify

Spotify

• Web API & Player API: https://developer.spotify.com/
• Our App: https://developer.spotify.com/dashboard/d524fc41ac744eb6878f3a1d29c71f70/settings
• Maybe a good openapi.yaml for the Web API: https://github.com/sonallux/spotify-web-api/blob/main/fixed-spotify-open-api.yml

SRGSSR

• SRF API Program/Lineup: https://developer.srgssr.ch/api-catalog/srgssr-epg-v3
• SRF API Channels, Streams, etc.: https://developer.srgssr.ch/api-catalog/srgssr-audio-0

Incubator

• Incubator: https://console.baloise.dev/add/all-namespaces
• Incubator Deployments: https://github.com/baloise-incubator/code-camp-apps
• ArgoCD: https://argocd.baloise.dev/
• Sealed Secrets: https://confluence.baloisenet.com/pages/viewpage.action?pageId=1867186764
• Sealed Secrets CA: https://github.com/baloise-incubator/okd4-cluster-infra-apps/blob/master/sealed-secrets/kubeseal.crt

Misc

• Material UI: https://m3.material.io/
• Material UI for Angular: https://material.angular.io/
• Radio Browser API with thousands of radio streams: https://www.radio-browser.info/
• Inofficial TuneIn API docs: https://tunein-api.corehacked.com/
• Media Elements for various services (not tried): https://github.com/muxinc/media-elements