TuneQuest - Ein DIY Hitster

Hallo zusammen,

nachdem wir in unserer Spielerunde des Öfteren schon Hitster in allen möglichen Versionen gespielt haben, sind wir immer wieder darüber gestolpert, dass wir doch gerne eine Version hätten, die zu unserem Musikgeschmack besser passt. Wir wollten aber auch nicht noch Monate/Jahre auf das nächste Hitster warten und dann auch noch hoffen müssen, dass diesmal unser Musikgeschmack getroffen wird.

Daher habe ich mich mal ein wenig schlau gemacht, wie Hitster das Ganze eigentlich macht und ob man das nicht auch mit einfachen Mitteln selber bauen könnte.

Was dabei herausgekommen ist, präsentiere ich euch hier heute:

TuneQuest (Ich weiß, super origineller Name, aber weit genug von Hitster, dass Jumbo mir da nicht querkommen kann wegen Namensrechten oder so)

Also, was kann TuneQuest, was Hitster nicht kann, bzw. wieso sollte man nicht Hitster weiter nutzen?

Hitster wird durch TuneQuest nicht obsolet, sondern mein TuneQuest ist die mehr personalisierte Version davon.

Mit TuneQuest könnt ihr eure eigenen Spotify-Playlists in euer Hitster verwandeln und dies dann mit Liedern nach eurem Geschmack spielen.

Hier einmal alle relevanten Informationen:

Der Code für das Ganze liegt auf GitHub und kann von allen offen eingesehen und angepasst/verbessert werden:

GitHub - effem/tunequest: TuneQuest, a music guessing game that will put your music knowledge to the test!

TuneQuest, a music guessing game that will put your music knowledge to the test! - effem/tunequest

github.com

Auch das Tool, um Karten zu erstellen, befindet sich dort:

GitHub - effem/tunequest-card-creator: TuneQuest Card Template Creator

TuneQuest Card Template Creator. Contribute to effem/tunequest-card-creator development by creating an account on GitHub.

github.com

Im Hintergrund nutze ich die Spotify API, um einen eigenen Spotify-Player zu starten und diesen dann die entsprechenden Lieder spielen zu lassen.

Das erfordert jedoch, dass man einen Spotify Premium Account hat, da die Web Playback API nur wirklich gut damit funktioniert.

Wenn ihr also das erste Mal die Webseite nutzt oder eine Playlist erstellt, dann müsst ihr euch bei Spotify anmelden und danach der TuneQuest-Applikation Zugriff auf euren Account erlauben.

Danach geht es schon wie mit der klassischen Hitster-App weiter:

• Code scannen
• Song raten
• Repeat...

In der Songübersicht habe ich, weil ich es in der Original-App vermisst habe, auch noch jeweilige 15-Sekunden-vor- oder -zurück-Scrollen-Tasten eingebaut.

Bisher habe ich das Ganze nur auf meinem Handy (iPhone, Safari) getestet und auch nur ich habe die Seite genutzt. Daher kann ich nicht sagen, ab wie vielen Requests die Spotify-API die TuneQuest-App bremst, da diese noch im Entwicklungsmodus läuft (also nicht alle auf einmal testen).

Auf dem iPhone musste ich dem Browser erlauben, dass dieser auf die Kamera zugreifen darf (damit die QR-Codes gescannt werden können). Sonst hat es ohne weitere Probleme funktioniert, bzw. ein Neuladen der Webseite konnte alle Probleme beheben.

Ich wäre euch dankbar, wenn jemand mit einem Android das Ganze auch noch einmal testen könnte und mir Feedback gibt, ob das Ganze auch dort klappt.

Also probiert es mal aus und gebt mir Feedback, ob das Ganze klappt und was man noch verbessern könnte.

Viele Grüße,

FMK

PS: Ein Demo Playlist PDF habe ich auch mal hier angehängt

Zitat von Thygra

Zunächst mal vielen Dank! Das klingt tatsächlich so, als wäre deine Vorgehensweise deutlich weniger aufwändig als alle Methoden, die wir im Hitster-Thread bisher besprochen hatten. Finde ich super!

Aber: Ich verstehe leider trotzdem zu mindestens 50% nur Bahnhof. Oder anders ausgedrückt: Ich habe auch nach dem Anklicken all deiner Links immer noch nicht kapiert, wie ich das ganze nun in der Praxis anwende. Vielleicht könntest du das für "dumme Anwender" wie mich etwas mehr idiotensicher erklären!?

Ähh ja klar. (Schritte 1 & 2 kannst du auch überspringen wenn du meine beispiel PDF nimmst)

1) Du erstellst dir in Spotify eine Playlist mit Songs die du "Spielen" möchtest.

Wichtig:

Dabei ist darauf zu achten, dass du dir Originale des Songs nimmst, da ich das Jahr des Songs aus dem Album entnehmen (spotify gibt leider keine anderen stellen wo ich das her bekommen kann). Sprich Thunderstruck von ACDC aus dem Best of ALbum von 2020 hat entsprechend auf der Karte dann auch 2020 als Jahr, daher den song vom orgiginalen Album/Single in die Playlist packen damit das Jahr auch stimmt

2) Du kopiert die Spotify Playlist URL und fügst sie in dem Karten Tool ein xxx

Wenn du magst kannst du noch einen Namen vergeben der taucht dann entsprechend klein unten auf der Karte auf. So kann man verschiedenen Playlisten im nachhinein auseinander halten.

3) Du druckst die PDF die auf der Seite dann erstellt wird in duplex aus (an der langen seite spiegeln) damit Track und QR code auf Vorder/Rückseite zusammen passen.

4) Ausgedrucktes Papier in rechtecke zerschneiden (ich hab kleine schnittmarker mit in die PDF gepackt damit es ein wenig einfacher sein sollte)

Die PDF ist eignetlich perfekt was vorder zu rückseite angeht, aber da drucker immer nen bisschen verziehen sind um alle karten genug platz damit das kein problem sein sollte.

5) Auf xxx gehen und auf "Play the game" klicken. Beim ersten mal musst du dich bei spotify anmelden und Tunequest zugriff zum abspielen der songs geben. Die nächsten male ist es dann nicht mehr erforderlich. Danach den QR Code scannen und spielen.

Edit: Geht nicht mehr weil Spotify spiele nicht mag...

Das sollten alle relevanten schritte ohne technisches blabla sein

Viele Grüße,

FMK

Zitat von Matze

Zitat von FMK

3) Du druckst die PDF die auf der Seite dann erstellt wird in duplex aus (an der langen seite spiegeln) damit Track und QR code auf Vorder/Rückseite zusammen passen.

Ich scheitere hier.

Ich erhalte kein PDF.

Ich kopiere die Playlist URL in das Feld, klicke auf "Load Playlist Data", stimme der Verbindung mit Spotify zu und es passiert....nichts

Hast du es nach dem ersten mal einfach nochmal probiert die url da einzufügen und den knopf nochmal zu drücken?

Ich hab das manchmal, dass beim ersten mal das nicht klappt weil der erst den spotify login kram machen muss und es danach beim zweiten mal klappt?!

Edit: Habs gerade nochmal getestet, beim zweiten mal dauert es auch kurz, je nach länge der playlist, hier hab ich auf der todo, dass ein loading spinner o.ä. angezeigt wird...

Zitat von Ron

Ohne jetzt der Party Pooper sein zu wollen, aber wie legal ist das? Spotify verbietet in den API-Nutzungsbedingungen explizit Spiele und Quizze.

In der tat, den punkt hatte ich noch nicht gesehen. Es könnte also gut sein, das spotify meiner version die hahn abdreht. Man kann das ganze aber auch einfach selber hosten (technisches Wissen vorraussgesetzt). Macht es nicht legaler, aber weniger wahrscheinlich das es auffällt...

Zitat von Ron

Zitat von FMK

In der tat, den punkt hatte ich noch nicht gesehen. Es könnte also gut sein, das spotify meiner version die hahn abdreht. Man kann das ganze aber auch einfach selber hosten (technisches Wissen vorraussgesetzt). Macht es nicht legaler, aber weniger wahrscheinlich das es auffällt...

Darauf solltest du dann prominent hinweisen, damit jeder, insbesondere wenn es selber hosten will, sich dem Risiko eines Verstoßes gegen die Nutzungsbedingungen und evtl. einer Account-Liquidierung bewusst ist .

Ja nehm ich mal auf! Danke für den hinweis!

Zitat von Thygra

Zitat von Ron

Ohne jetzt der Party Pooper sein zu wollen, aber wie legal ist das? Spotify verbietet in den API-Nutzungsbedingungen explizit Spiele und Quizze.

Oh, guter Hinweis, danke!

Frage dazu: Wofür steht hier "API"? Für die Schnittstelle?

Falls ja, heißt das im Umkehrschluss, wenn ich mir ein eigenes Hitster von Hand bastele, also ohne Schnittstelle, dann ist das in Ordnung?

(Ich wüsste auch nicht, wie Spotify bei einem solchen Selbstbau überhaupt herausfinden könnte, dass die Links für ein Spiel/Quiz verwendet werden ...)

API ist eine schnittstelle mit der meinm Programm deinem Spotify Player sagt: Spiel bitte lied x ab. Ohne einen weg Spotify das zu sagen kann ich keine lieder in deinem Account abspielen und das ganze würde nicht funktionieren.

Die paar mal die ich das schon genutzt habe um mir die Karten zu erstellen oder mit entsprechenden Karten zu spielen sollten Spotify eigentlich egal sein, da das in deren täglichen Geschäft wahrscheinlich im Rauschen untergeht. Sobald das alles natürlich um Faktor 1000 oder mehr genutzt wirde könnten die darauf aufmerksam werden und entsprechend nachgucken und dann ggf den zugang blockieren (oder was ich eher erstmal nicht glaube den spotify account dicht machen).

Zitat von Thygra

Zitat von FMK

API ist eine schnittstelle mit der meinm Programm deinem Spotify Player sagt: Spiel bitte lied x ab. Ohne einen weg Spotify das zu sagen kann ich keine lieder in deinem Account abspielen und das ganze würde nicht funktionieren.

Aber wenn ich das ohne Programm mache, einfach nur von Hand, so wie hier in den Beiträgen Nr. 53-60 grob beschrieben ...

Beitrag

RE: Hitster - Marcus Carleson - Jumbo Verlag

[…]

Codes mit Spotify-Verlinkung kann man sich selbst basteln, das ist kein Hexenwerk. Song in Spotify teilen und URL kopieren. Diese dann entweder mit einem der zahlreichen QR Generatoren umwandeln und ausdrucken oder alternativ in einen Spotify-Code umwandeln, das geht hier:
https://www.spotifycodes.com/
Macht natürlich etwas Arbeit, keine Frage.
(Wäre ich schon in Rente, hätte ich mir auch schon meine eigene Spotify-Version gebaut.)

Thygra

19. Dezember 2023

... dann nutze ich ja keine Schnittstelle, sondern die eigenen Spotify-Codes, und das kann ja dann kein Problem sein!?

Genau, dabei nutzt du ja die offizielle app und ein von ihnen bereitgestelltes feature. Das ist da die von ihnen gewünschte art lieder zu teilen/spielen.

Das könnte ich ja eigentlich auch nutzen, aber dann kann man so schlecht umgehen das die Person, die das Handy bedient, den song potentiell sieht...

Zitat von Matze

Jetzt habe ich es irgendwie im Firefox hinbekommen. In Chrome funktioniert das nach wie vor nicht.

Edit: war wohl nur Glück, jetzt geht es wieder nicht mehr.

Ich hab bisher nur im firefox getestet, ich guck mir das gleich nochmal im Chrome an!

Zitat von Thygra

Zitat von FMK

API ist eine schnittstelle mit der meinm Programm deinem Spotify Player sagt: Spiel bitte lied x ab. Ohne einen weg Spotify das zu sagen kann ich keine lieder in deinem Account abspielen und das ganze würde nicht funktionieren.

Aber wenn ich das ohne Programm mache, einfach nur von Hand, so wie hier in den Beiträgen Nr. 53-60 grob beschrieben ...

Beitrag

RE: Hitster - Marcus Carleson - Jumbo Verlag

[…]

Codes mit Spotify-Verlinkung kann man sich selbst basteln, das ist kein Hexenwerk. Song in Spotify teilen und URL kopieren. Diese dann entweder mit einem der zahlreichen QR Generatoren umwandeln und ausdrucken oder alternativ in einen Spotify-Code umwandeln, das geht hier:
https://www.spotifycodes.com/
Macht natürlich etwas Arbeit, keine Frage.
(Wäre ich schon in Rente, hätte ich mir auch schon meine eigene Spotify-Version gebaut.)

Thygra

19. Dezember 2023

... dann nutze ich ja keine Schnittstelle, sondern die eigenen Spotify-Codes, und das kann ja dann kein Problem sein!?

Ich hab mal rumexperimentiert (siehe Anhang) und ich kann statt den qr codes auch einfach die Spotify codes in die PDF packen, ich bau das heute abend oder so mal ein und dann sollte das auch gehen, dann musst du das nicht von hand machen!

Zitat von Matze

Jetzt habe ich es irgendwie im Firefox hinbekommen. In Chrome funktioniert das nach wie vor nicht.

Edit: war wohl nur Glück, jetzt geht es wieder nicht mehr.

Ich optimiere das ganze nachher nochmal mit ein paar mehr fehlermeldungen o.ä. und dann sag ich nochmal bescheid wenn du es nochmal testen kannst. Wenn es dann noch immer nicht geht können wir gerne mal ne screensharing session oder so machen damit ich mir das mal angucken kann!

Zitat von Ron

Es bei einem QR-Code zu belassen hätte den Vorteil, dass man andere Musikdienste anschließen könnte.

Ich bau nen toggle ein damit man selber wechseln kann.

Zitat von Thygra

Zitat von FMK

Das könnte ich ja eigentlich auch nutzen, aber dann kann man so schlecht umgehen das die Person, die das Handy bedient, den song potentiell sieht...

Diesen Einwand verstehe ich nicht. Beim Scannen des Spotify Codes spielt der Song automatisch ab, du musst also nur das Display verdecken oder gar nicht erst hingucken.

Zitat von Ron

Es bei einem QR-Code zu belassen hätte den Vorteil, dass man andere Musikdienste anschließen könnte.

Das verstehe ich nicht. Ein selbstgebastelter QR Codes ist doch nur die umgewandelte Spotify-URL, insofern führt doch auch der QR Code zu keinem anderen Dienst!?

Genau man muss weg gucken, so wie ich das gebaut habe ist das aber direkt unterbunden. Es wie gesagt mit den codes geht es auch gut, aber halt nicht optimal.

Mit den qr codes kann man halt über api die andere dienste anbinden und das auch mit denen nutzen. Aber wie gesagt ich bau einfach ne auswahlbox das man das seber aussuchen kann!

Ich hatte es mir über das wochenende nochmal angeschaut und leider könnt ihr es nicht ohne weiteres über meine gehostetet version nutzen, da sich diese noch in development modus befindet und ich "angeblich" jeden nutzer dafür freischalten muss (bis zu max 25 personen). Also müsst ihr das leider selber hosten oder ich müsste euch freischalten damit ihr das nutzen könnt. Warum das bei Matze ab und zu doch funktioniert kann ich mir nicht wirklich erklären, weil offiziell sollte es ja nicht gehen....

Zitat von Matze

Meine HTML-Kenntnisse sind leider ziemlich eingerostet.....

Ich habe einen Server mit Proxmox, da läuft derzeit Homeassistant und AdGuard drauf. Aber ich habe das alles nur mit Hilfe der Youtube-Universität installiert.

Kannst Du mich an die Hand nehmen?

Programmieren musst du zum glück nicht, du musst nur dinge mit docker machen. Wenn du willst können wir gerne mal nen screensharing oder so machen, dann kriegen wir das zusammen zum laufen! Schreib mir einfach mal ne nachricht wann du zeit hast, dann kriegen wir das hin!

Zitat von Matze

Ich schaue dann erstmal, wie ich Docker auf Proxmox installiere....

Auf proxmox kannst dir ja einfach nen kleinen linux container/vm installieren und dann entsprechend dadrauf alles machen!

Zitat von Matze

Zitat von FMK

Auf proxmox kannst dir ja einfach nen kleinen linux container/vm installieren und dann entsprechend dadrauf alles machen!

Wie gesagt, ich habe das alles nur nach Klick-Anleitungen installiert. Ich bin in Wirklichkeit ziemlich unwissend.

Dann können wir diesen teil gerne auch zusammen durchgehen wenn du willst

Zitat von Gugelhupf

Hallo zusammen,

sowas wie das pdf von FMK habe ich gesucht. Perfekt, danke. Darf man für den eigenen Bedarf nutzen, ja?

Wenn Interesse besteht, kann ich aus meinen Karten auch eine pdf erstellen und hochladen. Sind inzwischen 10 Sätze a 12 Karten.

Hi, klar ist ja am ende des tages auch nur ne playlist. Wenn jemand seine eigene playlist auch als PDF haben will kann ich das euch auch gerne machen (dauert nicht mal ne minute).