Einführung
Webspiele spielen oft Dutzende kurzer Sounds ab. Das Laden jedes einzelnen Sounds als separate Datei bedeutet Dutzende von Anfragen, und auf Mobilgeräten erlauben manche Browser nur das Laden eines Sounds gleichzeitig. Ein Audio-Sprite löst beide Probleme: Eine Datei enthält alle Sounds, und ein Manifest gibt an, wo sich jeder einzelne befindet.
Sprites werden üblicherweise mit Kommandozeilen-Tools erstellt, die FFmpeg benötigen. Der Audio Sprite Creator von ToolBuddy erstellt sie direkt im Browser. Diese Anleitung führt Sie von einzelnen Clips zu einem funktionierenden Howler.js-Sprite.
Was ein Sprite-Paket enthält
Das Paket besteht aus einer Audiodatei mit den Clips in einer Reihe, getrennt durch kurze Pausen, und einem JSON-Manifest. Im Howler-Manifest hat jeder Clip einen Offset, eine Dauer in Millisekunden und ein Loop-Flag; der Clip-Name entspricht dem Dateinamen.
Laden und sortieren Sie die Clips.
Wählen Sie Ihre Clips aus: MP3, WAV, M4A, AAC, OGG/Opus, FLAC oder WebM. Sie werden in der Clips-Karte in der Reihenfolge angezeigt, in der Sie sie hinzugefügt haben.
Sortieren Sie Clips nach Name oder Größe oder verschieben Sie sie nach oben und unten. Mit „Zurücksetzen“ in der Kopfzeile des Bedienfelds stellen Sie die ursprüngliche Reihenfolge wieder her. Die Reihenfolge beeinflusst nur die Position der Clips in der Datei; Ihr Code spielt sie anhand ihres Namens ab.
Schneiden und formen Sie jeden Clip.
Wählen Sie einen Clip zur Vorschau aus; seine Trim-Einstellungen werden als Griffe in der Wellenform angezeigt. Im Bedienfeld können Sie den genauen Start- und Endpunkt, die Verstärkung, das Ein- und Ausblenden, die Loop-Funktion für Musikbetten und die Stille-Begrenzung an den Rändern festlegen.
| Clip-Einstellung | Bereich | Warum |
|---|---|---|
| Start/Ende | Innerhalb des Clips | Stille oder Klicks entfernen |
| Gewinnen | -24 bis +24 dB | Laute und leise Töne ausbalancieren |
| Ein-/Ausblenden | 0 bis 5 s | Klicks an den Rändern vermeiden |
| Schleife | Ein/Aus | Hintergrundmusik und Ambiente |
| Stille entfernen | Ein/Aus | Leise Ein- und Ausblendung entfernen |
Sprite-Optionen festlegen
Howler-Manifest für Howler.js auswählen Stellen Sie die Abtastrate ein (44,1 kHz eignet sich für die meisten Spiele; 22,05 kHz für kleinere Dateien), Mono oder Stereo, den Abstand zwischen den Clips (standardmäßig 0,05 s, damit die Töne nicht ineinander übergehen), einen optionalen Crossfade und das Ausgabeformat: MP3 oder OGG für die Dateigröße, WAV für die Bearbeitung.
Erstellen, Vorschau anzeigen, herunterladen
Wählen Sie „Sprite erstellen“. Die Vorschau zeigt den gesamten Sprite mit jedem Clip als nummeriertem Band an. Klicken Sie auf ein Band, um den entsprechenden Clip auszuwählen, oder wechseln Sie zu „Clip“, um einen einzelnen Sound zu hören.
Laden Sie die Datei ZIP mit dem Audio und die Datei JSON zusammen herunter oder die Datei JSON separat, falls Sie nur das Manifest geändert haben.
Verwenden Sie es in Howler.js
Laden Sie den Sprite mit `new Howl({ src: ['audio-sprite.mp3'], sprite: manifest.sprite })` und spielen Sie einen Sound mit `sound.play('coin')` ab. Stellen Sie bei Bedarf neben der MP3-Datei auch eine OGG-Datei bereit, um ältere Browser zu unterstützen. Erstellen Sie den Sprite zweimal mit beiden Formaten.
- Achten Sie darauf, dass die Clip-Namen eindeutig sind: Sie werden zu den Schlüsseln in der Sprite-Map.
- Lassen Sie den Standardabstand unverändert; er verursacht kaum Kosten und verhindert Überlappungen.
- Verwenden Sie das Loop-Flag für Hintergrundschleifen, nicht für einmalige Effekte.
Ausgleichszahlungen, auf die Sie sich verlassen können
MP3-Encoder fügen am Anfang einer Datei eine kurze Verzögerung ein, die früher jeden Sprite-Offset verschoben hat. ToolBuddy schreibt den Gapless-Header, der Decoder anweist, diesen zu überspringen. Die Tests dekodieren den Sprite und prüfen, ob jeder Clip an der im Manifest angegebenen Position beginnt.
Geschrieben von
Ankit Kumar
Senior Software Engineer und Gründer bei ToolBuddy
Entwickeln Sie Browser-First-Dienstprogramme ohne Upload-Anforderungen mithilfe von WebAssembly-, Web Audio- und Canvas-Technologien.