Scratch – ein Radio programmieren

Dies ist eine Aufgabe aus dem Bereich der fortgeschrittenen Scratch-Programmierung. Du lernst, ein Radio in Scratch zu programmieren. Dafür nutzt du Listenvariablen, um verschiedene Lieder in dein Radio einzubauen.

Ausprobieren

Bevor du mit dem Programmieren deines eigenen Radios beginnst, teste doch erst einmal das von mir in Scratch entwickelte Radio aus. Mit dem roten Knopf am Radio kannst du das Radio ein- bzw. ausschalten. Mit den runden Knöpfen links und rechts am Radio kannst du zwischen den verschiedenen Liedern wechseln. Wenn du die Musik hören möchtest, dann musst du den Sound an deinem PC anschalten. 😉

Kurzanleitung

Zur vollständigen Anleitung wechseln

Die Kurzanleitung bietet dir einen schnellen Einstieg in die Programmierung deines Radios. Sie ist besonders für dich geeignet, wenn du dich gut mit der Scratch-Programmierung auskennst und nur wenig Unterstützung benötigst. Wenn du eine detailliertere Anleitung lesen möchtest, in der ich dir die einzelnen Programmierschritte genauer erkläre, nutze die vollständige Anleitung weiter unten in diesem Blogbeitrag.

Öffne nun den Programmcode meines Beispiel-Radios. Du kannst dafür den folgenden Link verwenden: https://scratch.mit.edu/projects/637234654/editor/.

Schau dir den Beispielcode genau an. Das Fangspiel besteht aus einem Bühnenbild, auf dem das Radio zu sehen ist. Sowie aus vier von mir gezeichneten Figuren: dem An-/Aus-Schalter, dem linken und dem rechten Regler sowie einem versteckten Radiofeld.

Als Hintergrund Bild für das Radio habe ich mir im Internet ein frei nutzbares Bild gesucht. Ich habe mich für ein Bild von digital designer auf Pixabay entschieden. Der An-/Aus-Schalter ist so programmiert, dass er die Musik im Radio an- bzw. ausschaltet. Mit dem linken bzw. rechten Regler kann zwischen den gespielten Liedern gewechselt werden. Und das versteckte Radiofeld wird genutzt, um die verfügbaren Lieder als Klänge zu hinterlegen und den Titel des aktuell gespielten Liedes anzuzeigen.

Nun bist du dran. Suche dir ein passendes Hintergrundbild im Internet oder zeichne ein eigenes Radio über die Scratch-Oberfläche. Zeichne ebenfalls Figuren für alle benötigten Schalter und Regler. Suche dir außerdem verschiedene Lieder aus dem Internet oder deiner privaten Sammlung. Du benötigst die Lieder im MP3-Format. Achte bei der Recherche im Internet darauf, dass du die Nutzungsrechte beachtest und du die Lieder auch wirklich verwenden darfst. Auf Pixabay findest du zum Beispiel frei verfügbare Musik: https://pixabay.com/de/music/.

Übernimm anschließend die Programmierblöcke aus meinem Beispielprogramm und passe diese auf dein eigenes Radio an. Im Beispielprogramm findest du an jeder Programmsequenz auch Kommentare, die dir die Funktionsweise der jeweiligen Programmblöcke genauer beschreiben. Beachte diese Kommentare.

Teste nun dein Radio aus und überprüfe, ob es so funktioniert, wie du erwartest. Kannst du mit den Reglern zwischen verschiedenen Liedern wechseln? Was passiert, wenn du beim letzten Lied angekommen bist? Geht die Musik sofort aus, wenn du dein Radio ausschaltest? Wenn alles funktioniert, wie du es dir vorstellst, zeige dein Radio doch deinen Freund:innen oder deiner Familie und lass‘ es durch jemand anderen testen.

Herausforderungen

Hast du noch nicht genug und möchtest dein Radio noch weiter verbessern? Dann versuche dich doch einmal an einer der folgendem Herausforderungen:

• Erweitere dein Spiel so, dass dein Radio einen Bildschirm erhält und du verschiedene Bilder passend zu jedem gespielten Lied anzeigst.
• Nimm einen eigenen Sound auf und ergänze so Moderationsbeiträge in deinem Radio – du könntest zum Beispiel deine eigenen Nachrichten einsprechen oder den Wetterbericht ansagen.
• Programmiere dein Radio so, dass nach dem Abspielen eines Liedes automatisch zum nächsten Lied gewechselt wird.

Vollständige Anleitung

Schritt 1: Figuren und Bühnenbild auswählen oder zeichnen

Öffne zunächst die Scratch Entwicklungsumgebung und erstelle eine neues Programmierprojekt. Du kannst dafür den nachfolgenden Link nutzen:

Für dein Radio benötigst du folgende Dinge, die du entweder selber in Scratch zeichnen oder dir im Internet herunterladen kannst:

• Ein Hintergrundbild auf dem ein Radio zu sehen ist: Ich habe beispielsweise mein Hintergrundbild auf der Seite https://pixabay.com/de/ gefunden.
• Eine Figur zum Starten des Radios: Diese besitzt zwei Kostüme. Eines für den Zustand „Radio aus“ und eines für den Zustand „Radio an“. Ich habe die Figur der Schaltfläche selbst gezeichnet, es ist ein rechteckiger Knopf mit einem Kostüm in der Farbe grün und einem Kostüm in der Farbe rot
• Eine Figur, die zum Zurückschalten innerhalb der Musikliste genutzt wird: Diese Schaltfläche habe ich ebenfalls selbst gezeichnet. Es ist einfach ein runder Knopf. Die Figur hat ein zweites Kostüm in einer anderen Farbe. Dieses wird später genutzt, um beim Klicken des Knopfes eine kurze Animation einzufügen.
• Eine Figur, die zum Vorwärtsschalten innerhalb der Musikliste genutzt wird: Für diese Schaltfläche habe ich einfach die Figur zum Zurückschalten inklusive beider Kostüme kopiert.
• Eine „versteckte“ Figur: Die Figur sollte die gleiche Farbe haben, wie der Teil des Radios über dem die Figur platziert wird. So ist die Figur nicht zu sehen ist und „versteckt“ sich. Die Figur wird später genutzt, um das aktuelle Lied als Text in einer Sprechblase auszugeben.

Schritt 2: Lieder heraussuchen und einbinden

Lieder heraussuchen

Nachdem du dein Hintergrund-Radiobild und deine Figuren fertiggestellt hast, musst du dir als nächstes die Lieder heraussuchen, die dein Radio abspielen soll. Du benötigst dafür Dateien im MP3-Format. Vielleicht hast du ein paar Lieder in deiner privaten digitalen Sammlung? Oder du durchsuchst einfach das Internet nach passenden Liedern. Achte dabei aber immer auf das Urheberrecht und prüfe, ob du die Lieder frei nutzen darfst. Freiverfügbare Lieder findest du zum Beispiel bei Pixabay unter folgendem Link: https://pixabay.com/de/music/. Dort habe ich auch die Lieder für mein Radio gefunden.

Wenn du es dir ganz einfach machen möchtest, dann nutzt du die Lieder aus meinem Beispielprogramm und lädst dir die Dateien hier direkt herunter:

Lieder in Scratch hochladen

Wenn du deine Lieder ausgewählt hast und dir diese als MP3-Dateien zur Verfügung stehen, musst du diese nun in dein Scratch-Programm einfügen. Du ergänzt die Lieder als Klänge deiner „versteckten Figur“. Stelle zunächst sicher, dass du die korrekt Figur in der Figurenübersicht ausgewählt hast.

Wechsle nun in den Reiter „Klänge“ und lade deine Lieder nacheinander über die Funktion „Klang hochladen“ in dein Scratch-Projekt.

Schritt 3: Variablen anlegen

Einfache Variablen

Bevor wir nun gleich mit dem Programmieren deines Radios beginnen, legen wir noch alle benötigten Variablen an, mit denen das Programm arbeitet.

Du benötigst die beiden Variablen „Aktueller Song“ und „Radio-an“. In der Variable „Aktueller Song“ werden wir später speichern, welche Liednummer dein Radio gerade abspielt. Mit der Variable „Radio-an“ können wir uns merken, ob das Radio gerade an- oder ausgeschalten ist. Lege die Variablen über die Funktion „Neue Variable“ im Blockbereich Variablen an. Achte dabei darauf, dass du die Variablenoption „Für alle Figuren“ ausgewählt hast. Falls du nicht mehr genau weißt, wie das Anlegen der Variablen funktioniert, schau es dir doch noch einmal in meinem Blogbeitrag „Töne und Klänge“ an.

Listenvariable

Zusätzlich zu den beiden Variablen, die du nun schon angelegt hast, benötigen wir noch eine Listenvariable. Du wirst die Listenvariable als Playlist nutzen und in ihr alle verfügbaren Lieder speichern.

Um die benötigte Listenvariable anzulegen, musst du die Funktion „Neue Liste“ verwenden. Diese findest du in der Übersicht deiner Variablen unterhalb der einfachen Variablen.

Wenn du die entsprechende Schaltfläche anklickst, öffnet sich ein neues Fenster. In diesem kannst du nun den Namen für deine Listenvariable angeben. Achte auch hier darauf, dass die Option „Für alle Figuren“ ausgewählt ist.

Schritt 4: An- / Aus-Schalter programmieren

Mit dem Anlegen der benötigten Variablen sind nun alle vorbereitenden Schritte für die Programmierung deines Radios abgeschlossen. Nun kannst du mit dem eigentlichen Programmieren beginnen. Als erstes werden wir uns um den An-/Aus-Schalter kümmern. Wähle die entsprechende Figur in der Figurenübersicht aus.

Figur vorbereiten

Im ersten Schritt wird dein Schalter nun für den Start des Programmes vorbereitet. Dazu wird das „Ausgeschaltet“-Kostüm ausgewählt (wechsle zu Kostüm (aus)) und die Figur wird an der gewünschten Stelle deines Radio-Hintergrundes positioniert (gehe zu x: (-4) y: (-62)). Für dein Programm musst du gegebenenfalls den Kostümnamen sowie die Werte für x und y anpassen.

An- / Aus-Funktion programmieren

Nun programmieren wir die eigentliche Funktionalität zum An- bzw. Ausschalten des Radios.

Dafür nutzen wir das Ereignis „Wenn diese Figur angeklickt wird“. Als erstes speichern wir uns den Zustand des Radios in der Variable „Radio-an“. Es gibt genau zwei Zustände, die dein Radio einnehmen kann. Den Zustand „angeschalten“ und den Zustand „ausgeschalten“. Für den Zustand „angeschalten“ speichern wir uns den Wert 1 in der Variablen „Radio-an“. Für den Zustand „ausgeschalten“ speichern wir den Wert -1. Um beim Speichern zwischen den beiden Werten zu wechseln bedienen wir uns eines kleinen mathematischen Tricks, in dem wir immer den aktuellen Wert der Variablen mit -1 multiplizieren.

Aktueller Zustand	Berechnung	Neuer Zustand
1 (an)	1 * -1	-1 (aus)
-1 (aus)	-1 * -1	1 (an)

Nun können wir im nächsten Schritt den gespeicherten Wert der Variable Radio-an nutzen und unser Radio entsprechend reagieren lassen.

Ist das Radio angeschalten – besitzt also die Variable Radio-an den Wert 1, dann passen wir das Kostüm unseres Schalters entsprechend an (wechsle zu Kostüm (an)). Außerdem lassen wir das Radio zur Begrüßung noch ein paar Worte in einer Sprechblase sagen (sage (...) für (3) Sekunden), die kurz erklären, wie das Radio funktioniert.

Im Fall, dass das Radio nicht angeschalten ist, passen wir ebenfalls das Kostüm unseres Schalters entsprechend an (wechsle zu Kostüm (aus)). Außerdem stoppen wir alle Klänge, die das Radio möglicherweise gerade abspielt (stoppe alle Klänge) und verabschieden uns mit einer kurzen Benachrichtigung per Sprechblase (sage (...) für (2) Sekunden).

Schritt 5: „Versteckte“ Figur und Playlist programmieren

Ist dir bei der Programmierung von Schritt 4 aufgefallen, dass wir über den An-/Aus-Schalter tatsächlich gar keine Musik abspielen? Für das Abspielen der Musik werden wir nämlich die „versteckte“ Figur nutzen. Wir bringen der Figur zunächst bei, welche Lieder wir zur Verfügung haben, spielen dann immer das aktuell ausgewählte Lied ab und blenden den Liedtitel ein. Wähle dafür zunächst die richtige Figur in der Figurenübersicht aus.

Figur vorbereiten

Wir bereiten auch diese Figur zunächst für den Start des Programmes vor, indem wir die Figur auf der Startposition platzieren (gehe zu x: (-13) y: (6)). Du musst hier die Werte für x und y so ändern, dass diese für dein eigenes Radio passen. Außerdem treffen wir an dieser Stelle noch zwei allgemeine Vorbereitungen. Wir setzen den Start-Wert für das Radio auf „ausgeschaltet“ (setze [Radio-an] auf (-1)) und wir setzen das aktuelle Lied auf den Wert 1 (setze [Aktueller Song] auf (1)), sodass bei Programmstart immer als erstes das Lied 1 abgespielt wird.

Playlist füllen

Als nächstes kümmern wir uns darum, in der Playlist zu hinterlegen, welche Lieder zur Verfügung stehen. Du hast ja bereits im Schritt 3 die Listenvariable für die Playlist angelegt und in Schritt 2 die Lieder als Klänge der versteckten Figur hinterlegt. In diesem Schritt fügen wir jetzt in der Playlist die Titel der Lieder ein, die du als Klänge hochgeladen hast.

Als erstes verstecken wir dafür unsere Listenvariable, damit diese später im Programm nicht zu sehen ist (verstecke Liste [Playlist]). Anschließend löschen wir den Inhalt der Playlist (lösche alles aus [Playlist]). Wenn wir das nicht tun würden, würde alles doppelt in unserer Playlist stehen, wenn wir die grüne Flagge mehrmals anklicken. Danach fügst du alle deine Liedtitel mit ihrem Namen zur Playlist hinzu (füge (...) zu [Playlist] hinzu). Achte dabei darauf, dass die Titel in der gleichen Reihenfolge eingefügt werden müssen, in der du die Klänge dieser Figur hinterlegt hast.

Musik abspielen

Nun sind wir endlich soweit, dass wir die Musik abspielen können. Du befindest dich nach wie vor im Programmcode deiner versteckten Figur. Ergänze nun eine fortlaufende Überprüfung (wiederhole fortlaufend), ob dein Radio im Zustand „angeschalten“ ist (falls <(Radio-an) = (1)>, dann). Wenn das der Fall ist, dann spielst du einfach das aktuelle Lied ab (spiele Klang (Aktueller Song) ganz).

Aktuelles Lied als Text ausgeben

Die letzte Aufgabe der versteckten Figur ist, die es den aktuellen Liedtitel auszugeben. Auch dafür musst du wieder fortlaufend überprüfen, ob das Radio angeschalten ist. Falls ja, dann gibst du mit dem sage (...)-Block den Titel des aktuellen Liedes aus. Du kannst dafür den Block Element (...) von [Playlist] nutzen. Mit diesem Block holst du dir den Liedtitel von der gewünschten Stelle deiner Playlist. Du kannst darin Zahlenwert wie 1, 2, 3 usw. verwenden. Mit dem Befehl Element (1) von [Playlist] würdest du im Beispielprogramm den Titel „Cheating“ ausgeben. Du kannst das ganze dynamisch gestalten, indem du die Variable „Aktueller Song“ im Block einbaust: Element (Aktueller Song) von [Playlist]. Den Wert von „Aktueller Song“ haben wir zu Beginn auf 1 gesetzt, sodass auch in diesem Fall der Titel „Cheating“ ausgegeben wird. Im nächsten Schritt erkläre ich dir, wie wir über die Vorwärts-Schaltfläche zum nächsten Lied wechseln, indem wir den Wert von „Aktueller Song“ anpassen.

Schritt 6: Programmierung der Funktion „Zum nächsten Lied wechseln“

Nachdem du im Schritt 4 die Funktionalität zum An- und Ausschalten deines Radios programmiert hast und in Schritt 5 deine Playlist befüllt hast, kümmern wir uns jetzt um eine Möglichkeit, um zum nächsten Lied zu wechseln. Dafür programmieren wir nun den „Vorwärts-Schalter“. In meinem Beispielprogramm heißt dieser „Knopf rechts“. Achte wieder darauf, dass du die richtige Figur in der Figurenübersicht auswählst.

Figur vorbereiten

Als erstes wird die Schaltfläche so programmiert, dass diese sich bei Programmstart an der korrekten Position (gehe zu x: (95) y: (-48)) befindet und das Start-Kostüm angezeigt wird (wechsle zu Kostüm (normal)). Beachte, dass du den Kostümnamen und die Werte für x und y so ändern musst, dass diese für dein eigenes Radio passen.

Zum nächsten Lied wechseln

Der Wechsel zum nächsten Lied wird beim Anklicken der Figur gestartet. Er teilt sich in mehrere Schritte auf. Zunächst wird mit dem Block falls <(Radio-an) = (1)>, dann geprüft, dass der nachfolgende Code nur dann ausgeführt wird, wenn das Radio tatsächlich durch den An-Schalter eingeschalten wurde.

Im Anschluss erfolgt eine kleine Animation der Schaltfläche. Um diese umzusetzen, werden folgende Schritte nacheinander ausgeführt:

• Ausschalten des Radios, um in Ruhe zwischen den Liedern wechseln zu können (setze [Radio-an] auf (-1) und stoppe alle Klänge)
• Einblenden des zweiten Kostüms, das die Schaltfläche farbig leuchtend darstellt (wechsle zu Kostüm (angeklickt) und warte (0.2) Sekunden)
• Ändern des aktuellen Liedes, indem der Wert des aktuellen Liedes um 1 erhöht wird (ändere [Aktueller Song] um (1))
• Prüfung, ob der Wert für das aktuelle Lied zu hoch ist, sodass es das Lied in der Playlist nicht mehr gibt. In diesem Fall schalten wir automatisch wieder auf das erste Lied der Playlist. (Kompletter Block: falls <(Aktueller Song) > (Länge von [Playlist]), dann –> setze [Aktueller Song] auf (1))
• Zurückwechseln auf das Standard-Kostüm der Schaltfläche (wechsle zu Kostüm (normal))
• Radio wieder anschalten (setze [Radio-an] auf (1))

Schritt 7: Programmieren der Funktion „Zum vorherigen Lied wechseln“

Nun fehlt nur noch das Programmieren der Funktion, um zum vorherigen Lied zu wechseln. Stelle zunächst sicher, dass du die korrekte Figur dafür ausgewählt hast. In meinem Beispielprogramm heißt die Figur „Knopf links“.

Figur vorbereiten

Der Programmcode ist fast identisch zum Programmcode des „Knopf rechts“, den du bereits im Schritt 6 programmiert hast. Als erstes kümmerst du dich darum, dass die Figur zum Programmstart das richtige Kostüm ausgewählt hat und an der korrekten Position platziert wird.

Zum vorherigen Lied wechseln

Im nächsten Schritt programmierst du den Wechsel des Liedes.

Der Ablauf dabei ist fast identisch zum Programmcode für den Wechsel zum nächsten Lied. Der Code unterscheidet sich lediglich in zwei kleinen Punkten:

• Ändern des aktuellen Liedes, indem der Wert des aktuellen Liedes um 1 verringert wird (ändere [Aktueller Song] um (-1))
• Prüfung, ob der Wert für das aktuelle Lied zu niedrig – also kleiner als 1 – ist, sodass es das Lied in der Playlist nicht mehr gibt. In diesem Fall schalten wir automatisch wieder auf das letzte Lied der Playlist. Die Position des letzten Liedes erhalten wir über den Block Länge von [Playlist]. Dieser Block gibt die Anzahl der enthalten Elemente in unserer Listenvariablen aus. Die Position des letzten Listeneintrages entspricht dabei immer genau der Anzahl der Elemente. (Kompletter Block: falls <(Aktueller Song) < (1), dann –> setze [Aktueller Song] auf (Länge von [Playlist]))

Geschafft!

Herzlichen Glückwunsch, du hast es geschafft und dein eigenes Radio programmiert. Nun kannst du es austesten und probieren, ob alles klappt wie gewünscht. Falls du Fragen hast, nutze gern die Kommentarfunktion dieses Artikels. Wenn du dein Radio noch umfangreicher programmieren möchtest, dann versuch dich doch mal an einer der Herausforderungen, die du am Ende der Kurzanleitung in diesem Artikel findest.