Musik-App in JavaScript coden – Anfänger-Tutorial
Willkommen zu unserem Musik-App-Tutorial!
In diesem Tutorial werden wir gemeinsam eine Musik-Web-App erstellen, die auf HTML und JavaScript basiert.
Wenn Du noch kein oder wenig Wissen im Programmieren hast, keine Sorge. Wir werden alle Schritte detailliert erklären, so dass Du gut folgen kannst.
Schritt 1: HTML-Grundlagen
Zuerst müssen wir die HTML-Grundlagen kennen, um die Struktur unserer App zu erstellen.
Öffne Deinen Text-Editor und erstelle eine neue Datei. Speichere diese Datei unter dem Namen index.html. Dann füge folgendes Code-Snippet ein:
<!DOCTYPE html>
<html>
<head>
<title>Meine Soundboard-App</title>
</head>
<body>
<h1>Meine Soundboard-App</h1>
<div id="soundboard">
</div>
</body>
</html>
Kurze Erklärung dazu:
Das DOCTYPE-Tag definiert den Dokumenttyp, den wir verwenden. Das html-Tag gibt an, dass der folgende Code in HTML geschrieben ist.
Das head-Tag enthält die Informationen, die nicht auf der Seite angezeigt werden, wie zum Beispiel den Titel der App.
Das body-Tag enthält den sichtbaren Inhalt der App. Hier haben wir einen h1-Tag, der den Titel der App anzeigt, und einen div-Tag mit der id soundboard, der später unsere Sounds enthalten wird.
Schritt 2: JavaScript-Grundlagen
Jetzt werden wir das JavaScript-Grundgerüst unserer App erstellen. Füge folgendes Code-Snippet in den head-Bereich unserer index.html-Datei ein:
<script>
window.onload = function() {
console.log("Die App ist bereit!");
}
</script>
Dieses Skript wird ausgeführt, sobald die Seite vollständig geladen ist. Hier verwenden wir die window.onload-Funktion, um eine Nachricht in der JavaScript-Konsole anzuzeigen, wenn die App vollständig geladen ist.
Schritt 3: Erstellen von Buttons
Jetzt werden wir Buttons erstellen, um unsere Sounds abzuspielen. Füge folgendes Code-Snippet in den div-Tag mit der id soundboard ein:
<button onclick="playSound('sound1.mp3')">Sound 1</button>
<button onclick="playSound('sound2.mp3')">Sound 2</button>
<button onclick="playSound('sound3.mp3')">Sound 3</button>
<button onclick="playSound('sound4.mp3')">Sound 4</button>
Hier haben wir vier Buttons erstellt, die jeweils einen anderen Sound abspielen, wenn sie geklickt werden. Die Funktion playSound, die wir später definieren werden, nimmt den Namen des Sounds als Argument.
Schritt 4: JavaScript-Funktionen erstellen
Jetzt müssen wir die JavaScript-Funktionen erstellen, die unsere Sounds abspielen. Füge folgenden Cod am Ende Deiner index.html-Datei ein.
Erstelle eine neue Variable "audio", indem Du die Audio-Klasse verwendest, und weise dieser Variable den Namen des Sounds als Quelle zu. Dann rufen wir die Funktion "play" auf, um den Sound abzuspielen.
Dies ist der vollständige Code für die playSound-Funktion:
function playSound(soundfile) {
var audio = new Audio(soundfile);
audio.play();
}
</script>
Schritt 5: App-Design anpassen
Zum Schluss können wir unser App-Design anpassen, indem wir CSS verwenden. Füge folgendes Code-Snippet in den head-Bereich Deiner index.html-Datei ein:
<style>
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
button {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #444;
}
</style>
Hier haben wir einige grundlegende CSS-Stile hinzugefügt, um unsere App zu gestalten. Wir haben die Schriftart auf sans-serif gesetzt, den Titel zentriert und die Buttons formatiert.
Schritt 6: Deine App testen
Jetzt ist unsere App bereit zum Testen.
Öffne Deine index.html-Datei in einem Webbrowser deiner Wahl und klicke auf die Buttons, um die Sounds abzuspielen.
Wenn alles funktioniert, hast Du Dein erstes Soundboard erstellt!
Fazit
Herzlichen Glückwunsch, Du hast eine Musik-Web-App erstellt!
In diesem Tutorial haben wir die Grundlagen von HTML und JavaScript kennengelernt und eine einfache Soundboard-App erstellt.
Du kannst diese App weiter anpassen, indem Du neue Sounds hinzufügst oder das Design änderst.
Viel Spaß beim Programmieren!