So baust du Soundeffekte und Musik in ein Browserspiel ein

Nutz die kostenlosen eingebauten Sounds oder lade eigene MP3-, WAV-, OGG- oder M4A-Dateien hoch, dann sag der KI, wann jeder spielt; Go Bananas gleicht die Lautheit an und kümmert sich um Handys.

Sound macht die Hälfte davon aus, wie sich ein Spiel anfühlt. Eine Münze, die klingelt, ein Sprung, der zischt, und ein Treffer, der dumpf aufschlägt, sagen den Spielern, was passiert ist, ohne dass sie etwas lesen müssen. Musik setzt die Stimmung und lässt ein kurzes Spiel fertig wirken. Diese Anleitung behandelt die kostenlosen Sounds, die du sofort nutzen kannst, das Hochladen eigener Sounds, wie du die KI bittest, sie zu verwenden, den Audio-Helfer für Entwickler und wie alles auf Handys gut klingt.

Warum Sound in Spielen wichtig ist

• Feedback. Jede wichtige Aktion sollte einen Sound machen: einsammeln, getroffen werden, punkten, ein Leben verlieren. Spieler bemerken einen fehlenden Sound eher als einen mittelmäßigen.
• Gefühl. Derselbe Sprung fühlt sich je nach Sound schwerer oder leichter an. Kurze, knackige Effekte lassen die Steuerung reaktionsschnell wirken.
• Information. Sound kann vor Dingen außerhalb des Bildschirms warnen: ein Gegner hinter dir, ein Timer, der gleich abläuft.
• Stimmung. Musik und Hintergrundgeräusche sagen den Spielern, ob das Spiel spannend, albern oder ruhig ist.

Eingebaute Sounds, die du kostenlos nutzen kannst

Go Bananas hat ein kleines Paket Soundeffekte, die jeder in seinen Spielen verwenden kann, veröffentlicht unter CC0 (keine Erlaubnis und keine Namensnennung nötig). Jeder liegt unter https://gobananas.co/sfx/<name>.mp3:

Die KI kennt dieses Paket nur, wenn du es ihr sagst, also gib ihr die Adresse in deiner Anfrage:

Wenn der Spieler einen Schlüssel aufhebt, spiel https://gobananas.co/sfx/pickup.mp3 ab.

Verwende immer die vollständige Adresse, die mit https:// beginnt. Spiele laufen in einer Sandbox, in der kurze Adressen wie /sfx/pickup.mp3 nicht laden.

Eigene Sounds hochladen

Du kannst Soundeffekte, Sprachaufnahmen und Musik als MP3, WAV, OGG oder M4A hochladen. Nutz dafür das Fenster Upload Asset (Asset hochladen), im Tab Assets oder im Editor. Wenn du eine Audiodatei auf den Erstellen-Bereich ziehst, öffnet sich dieses Fenster für dich. Du brauchst ein bestätigtes Konto, und du setzt ein Häkchen, um zu bestätigen, dass du das Recht hast, das Audio zu verwenden: dein eigenes Werk, lizenziert oder gemeinfrei.

Was die Website mit deinem Audio macht

Jeder Upload wird gleich verarbeitet, egal in welchem Format:

• Die Lautheit wird angeglichen, auf -16 LUFS, ein Standardpegel für Spiele und Streaming, sodass eine leise und eine laute Aufnahme am Ende gleich laut sind.
• Stille am Anfang wird entfernt, damit der Sound genau in dem Moment spielt, in dem er ausgelöst wird. Stille am Ende bleibt.
• Es wird in MP3 umgewandelt, mit 44,1 kHz. Clips von 5 Sekunden oder kürzer gelten als Soundeffekte und werden in Mono mit 96 kbps gespeichert; längere Clips gelten als Musik und werden in Stereo mit 128 kbps gespeichert.
• Tags und Cover werden entfernt.
• Die Originaldatei wird nicht behalten, nur die MP3.

Du siehst eine Warnung, wenn die Aufnahme übersteuert (an ihren lautesten Stellen verzerrt) oder wenn ihre Lautheit ursprünglich ungewöhnlich niedrig oder hoch war. Übersteuerung lässt sich nachträglich nicht beheben, deshalb lohnt es sich, eine sauberere Version zu exportieren.

Zuschneiden und Lautstärke

Jeder Sound in deinen Assets hat einen Play-Button, eine Wellenform und seine Länge. Du kannst einen Sound in der App zuschneiden, um nur einen Teil davon zu behalten; die Datei wird nicht geschnitten, und das Spiel spielt nur den Teil, den du behalten hast.

Im Tab Assets des Editors fügt + Attach to game (ans Spiel anhängen) einen Sound zu dem Spiel hinzu, das du gerade bearbeitest. Angehängte Sounds bekommen einen Lautstärkeregler von 0 bis 100, der bei 100 startet, damit du die Musik leiser oder einen Schritt sanfter machen kannst, ohne Code zu ändern. Änderungen werden automatisch gespeichert.

Die KI bitten, deine Sounds zu verwenden

Tippe @ in das Feld zum Erstellen oder Ändern und wähl einen Sound aus. Sein Name wird in Anführungszeichen eingefügt, und du beschreibst, wann er spielt:

Spiel "coin", wenn der Spieler einen Stern einsammelt, und "boing", wenn er springt. Spiel "forest-theme" in Schleife als leise Hintergrundmusik.

Wenn du ein Spiel erstellst, erfährt die KI von allen deinen hochgeladenen Sounds. Wenn du ein Spiel mit angehängten Dateien bearbeitest, erfährt sie von den angehängten Sounds, also häng die an, die sie verwenden soll.

Für Entwickler: der Audio-Helfer

Jedes Spiel auf Go Bananas bekommt window.__audio, einen kleinen Helfer, der in der Sandbox funktioniert, den Ton auf iPhones freischaltet und dem Stummschalter der Website folgt. Verwende ihn statt new Audio() oder eines eigenen AudioContext.

// Die Adresse eines hochgeladenen Sounds kommt aus GAME_ASSETS (Name = Dateiname ohne Endung).
const coinUrl = window.GAME_ASSETS.audio['coin'].url;
const musicUrl = window.GAME_ASSETS.audio['forest-theme'].url;
const jumpUrl = 'https://gobananas.co/sfx/pickup.mp3';   // ein eingebauter Sound

// Lade Sounds vorab, damit sie ohne Verzögerung spielen.
Promise.all([__audio.load(coinUrl), __audio.load(jumpUrl)]);

// Starte das Audio beim ersten Tippen oder Klicken des Spielers (nötig auf iPhones).
startButton.addEventListener('click', () => {
  __audio.init();
  __audio.playMusic(musicUrl, { volume: 0.4, loop: true, fadeInMs: 1000 });
  startGame();
});

function onCoinCollected() {
  // Jedes Mal eine leicht andere Tonhöhe, damit wiederholte Sounds nicht roboterhaft klingen.
  __audio.play(coinUrl, { volume: 0.8, rate: 0.95 + Math.random() * 0.1 });
}

Die wichtigsten Methoden:

• init(): Ruf sie bei einem Tippen oder Klick auf. Sie schaltet den Ton auf iPhones frei.
• load(url): lädt und dekodiert einen Sound und gibt ein Promise zurück. Lade vor dem Abspielen; ein Sound, der noch nicht geladen ist, spielt erst, nachdem er dekodiert wurde.
• play(url, { volume, pan, rate }): spielt einen Soundeffekt. pan setzt ihn nach links oder rechts, rate ändert Geschwindigkeit und Tonhöhe.
• play3D(url, x, y, z, camera, { volume, maxDist, rate }): spielt einen Sound von einem Punkt in einer 3D-Szene, leiser mit zunehmender Entfernung.
• playMusic(url, { volume, loop, fadeInMs }): spielt Musik. Standardmäßig in Schleife, mit Lautstärke 0,5 und einer halben Sekunde Einblenden.
• stopAll(), setMasterVolume(v) und setMuted(true oder false).

Gib immer eine vollständige Adresse an. Der Name oder die ID eines Sounds allein funktioniert nicht. Die Lautstärke, mit der ein Sound spielt, ist deine Master-Lautstärke mal der Regler im Tab Assets mal der Lautstärke, die du im Code angibst.

Sound auf Handys

• Nichts spielt, bis der Spieler tippt. Handys, vor allem iPhones, blockieren Audio, bis der Spieler den Bildschirm berührt. Ein „Tippen zum Starten“-Bildschirm, der __audio.init() aufruft, löst das.
• Der Stummschalter der Website funktioniert bei jedem Spiel. Spieler können jedes Spiel über den Sound-Button der Website stummschalten, und der Helfer folgt ihm, also bau kein Spiel, das nur mit Ton verständlich ist.
• Halte Dateien klein. Kurze Effekte und eine kompakte Musikschleife laden über mobile Daten schneller.

Tipps zum Abmischen

• Halte die Musik leiser als die Effekte. Musik bei einer Lautstärke von etwa 0,3 bis 0,5 lässt Platz für die Sounds, die Informationen tragen.
• Stapel keine Kopien desselben Sounds. Wenn zwanzig Münzen auf einmal eingesammelt werden, spiel den Sound einmal oder ein paar Mal, nicht zwanzigmal.
• Sorg für Abwechslung. Eine kleine zufällige Änderung von rate lässt wiederholte Schritte und Treffer natürlich klingen.
• Gib jedem wichtigen Ereignis seinen eigenen Sound. Spieler lernen Sounds schnell; verwendest du denselben Sound für verschiedene Dinge, geht diese Information verloren.
• Achte auf die Länge. Soundeffekte funktionieren am besten unter einer Sekunde. Lange Ausklänge schneiden in den nächsten Sound.
• Sauber loopen. Musik, die in Schleife laufen soll, sollte an derselben Stelle im Takt beginnen und enden.

Weiterlesen

• Ein Videospiel machen
• Grundlagen des Game Designs
• So beschreibst du ein Spiel, damit die KI es baut
• So machst du ein Multiplayer-Browserspiel
• So machst du ein 3D-Browserspiel
• So laufen Spiele auf Handys
• Dein Spiel veröffentlichen und teilen
• Go Bananas aus ChatGPT oder Claude heraus nutzen
• Dateiformate: MP3, WAV, OGG, M4A, alle Formate