Tutorial 5: Ein Soundboard programmieren


Mit einem Soundboard hast du ein kleines Werkzeug welches du auf Feiern, Veranstaltungen, Schule oder in der Arbeit immer wieder verwenden kannst. Nicht nur der Spass-Faktor ist je nach Soundauswahl groß. Einen echten Nutzen bringt es zum Beispiel bei Aufführungen oder Presentationen, denn du hast deine Lieblingssoundeffekte quasi immer dabei. Das beste dabei: Das Soundboard ist auf jedem Gerät mit einem modernen Browser aufrufbar.
Teil 1:

Das interessante an diesem Soundboard ist, dass man es tatsächlich mit den einfachsten Mitteln zu einer App konvertieren kann.

Warum ein Soundboard?

Erklärung zum Warum 10 Sätze: Leitfragen: Welches Problem wird behandelt? Was lernt man? Warum ist das Beispiel ideal? We kann man das Beispiel später selbst verwenden? Was brauchst du?
Mit dem Soundboard lernst du die Grundlagen für den Umgang mit Mediendateien und -formaten. Dazu ist eine Herausforderung eine Programmierschnittstelle von Javascript zu verwenden. Klar, wenn du das Tutorial durcharbeitest, lernst du die Schnittstelle zum Teil kennen, aber diese kann ja noch mehr (z.B. auch Videos abspielen). Das Zusammenspiel von Javascript und HTML wird hier nochmal deutlich und auch hier zeige ich dir wie man Buttons programmiert, auf die man in Javascript dann reagieren kann. Dieses Beispiel ist so schön vielfältig, dass es wirklich für jeden Zweck angepasst werden kann. Von Tastaturunterstützung, Looping, Aktivitätsanzeige und Lautstärkeregler bist hin zu Videoeinblendungen ist alles möglich.

Was wirst du hier heute lernen?

  • Einsatz von HTML, CSS und Javascript
  • Umgang mit jQuery & Bootstrap
  • Media API von HTML5/Javascript

Was du brauchst

Wir starten, wie im letzten Tutorial auch mit dem Grundaufbau aus Tutorial 1. Was gibt es zutun?

TODO-Liste

Features, Design und Spezialitäten

Auf diesen Konzeptpapier siehst du das einfache Design und die gedachte Funktionalität:
Soundboard Programm Design und Ablauf
Die Funktion ist einfach erklärt. Man klickt auf einen der Buttons, und wenn die Audiodatei gerade nicht abgespielt wird, soll die Wiedergabe gestartet werden. Wird die Audiodatei allerdings grade abgespielt, dann wird die Wiedergabe beendet.

Hier ein Screenshot der fertigen App:

Soundboard

Screenshot des Soundboards

Ran an die Tastatur!

Jetzt programmieren wir schrittweise durch alle Programmteile. Möchtest du nicht programmieren, kannst du unten den fertigen Code herunterladen und nach deinen eigenen Wünschen anpassen.

1. Basisstruktur mit HTML, CSS und Javascript

Wir starten mit der Dateistruktur aus dem ersten Tutorial. 3 simple Dateien mit HTML, CSS und Javascript, wobei Bootstrap und jQuery bereit eingerichtet sind.

2. Container

      <div id="content" class="container">
      </div>

3. Navigationsbar

      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Soundboard</a>
          </div>
        </div>
      </nav>

4. Layout für Button

      <div id="content" class="container">
        <div class="row">
        
        </div>
      </div>

5. Button

      <div id="content" class="container">
        <div class="row">
          <button id="btn_horn" class="btn btn-primary btn-lg btn-block" type="submit">Horn</button>
        </div>
      </div>

6. Audiodatei

      <div id="content" class="container">
        <div class="row">
          <button id="btn_horn" class="btn btn-primary btn-lg btn-block" type="submit">Horn</button>
          <audio id="horn" src="data/horn.mp3"></audio>
        </div>
      </div>

7. Buttonklick

$('#btn_horn').click(function() {
  playAudio('horn');
});

8. Audio abspielen

function playAudio(audioId) {
  $(audioId).get(0).play();
}

9. Audio stoppen/starten

function playAudio(audioId) {
  var audioElement = $(audioId).get(0);
  if (audioElement.paused == true) {
    audioElement.play();     
  } else {
    audioElement.load();
  }
}

10. weitere Sounds

$('#btn_horn').click(function() {
  playAudio('#horn');
});

$('#btn_klatschen').click(function() {
  playAudio('#klatschen');
});

$('#btn_tusch').click(function() {
  playAudio('#tusch');
});

11. Neue Buttons

        <div class="row">
          <button id="btn_klatschen" class="btn btn-primary btn-lg btn-block" type="submit">Klatschen</button>
        </div>
          <audio id="klatschen" src="data/klatschen.mp3"></audio>
        
        <div class="row">
          <button id="btn_tusch" class="btn btn-primary btn-lg btn-block" type="submit">Tusch</button>
          <audio id="tusch" src="data/tusch.mp3"></audio>
        </div>

12. Abstand zwischen Buttons

button {
  margin-top:10px;
  margin-bottom:10px;
}

Fazit

Wenn du das hinbekommen hast, kannst du ja mal versuchen eigene Knöpfe mit eigenen Sounds zu programmieren. Wenn du noch ein Stück weiter gehen willst, dann kannst du ja mal eine Tastaturunterstützung dazu programmieren oder das Aussehen der Buttons verändern, wenn gerade die jeweilige Audiodatei abgespielt wird.
Dieses Soundboard habe ich tatsächlich bis heute schon bei 3 Theateraufführungen, mehreren Karnevalsveranstaltungen und sogar bei einem inszenierten Überraschungs Quiz für einen guten Freund eingesetzt. Jedes Jahr gibt es neue Soundeffekte, die jemand benötigt. Wenn du eine Variante des Soundboards im Internet veröffentlicht hast, dann schreib doch mal einen Kommentar! Ich würde mich freuen das Soundboard auch bei anderen Menschen im Einsatz zu sehen!
Falls du nicht klargekommen bist schau doch am besten in den Code rein, dann kannst du direkt vergleichen.

Hier kannst du den Quellcode zu diesen Tutorial herunterladen.

Im nächsten Tutorial wird es wieder etwas einfacher, allerdings gibt es auch ein anderes Thema. Da werden wir das erste Mal mit Zeit arbeiten. Du darfst dich also schon freuen!
Hast du Feedback oder Fragen schreib mich einfach an oder kommentiere unten. Sollte dir das Tutorial gefallen haben, freue ich mich, wenn du meine Seite abonnierst und ein Like bzw. Daumen hoch da lässt.

Keine Zeit zum nachprogrammieren?

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.