Ich benutze HTML5, um Spiele zu programmieren. Das Hindernis, auf das ich jetzt gestoßen bin, ist das Abspielen von Soundeffekten.
Es gibt nur wenige spezifische Anforderungen:
- Spielen und mischen Sie mehrere Sounds,
- Spielen Sie dasselbe Sample mehrmals ab, wobei sich die Wiedergabe möglicherweise überschneidet.
- Unterbrechen Sie die Wiedergabe eines Samples zu jedem Zeitpunkt.
- Spielen Sie vorzugsweise WAV-Dateien ab, die Roh-PCM (von geringer Qualität) enthalten, aber ich kann diese natürlich konvertieren.
Mein erster Ansatz war, das HTML5- <audio>
Element zu verwenden und alle Soundeffekte auf meiner Seite zu definieren. Firefox spielt die WAV-Dateien nur pfirsichfarben ab, aber wenn Sie #play
mehrmals aufrufen , wird das Sample nicht wirklich mehrmals abgespielt . Nach meinem Verständnis der HTML5-Spezifikation verfolgt das <audio>
Element auch den Wiedergabestatus, sodass erklärt wird, warum.
Mein unmittelbarer Gedanke war, die Audioelemente zu klonen, also habe ich die folgende winzige JavaScript-Bibliothek erstellt, um dies für mich zu tun (abhängig von jQuery):
var Snd = {
init: function() {
$("audio").each(function() {
var src = this.getAttribute('src');
if (src.substring(0, 4) !== "snd/") { return; }
// Cut out the basename (strip directory and extension)
var name = src.substring(4, src.length - 4);
// Create the helper function, which clones the audio object and plays it
var Constructor = function() {};
Constructor.prototype = this;
Snd[name] = function() {
var clone = new Constructor();
clone.play();
// Return the cloned element, so the caller can interrupt the sound effect
return clone;
};
});
}
};
Jetzt kann ich Snd.boom();
über die Firebug-Konsole spielen und spielen snd/boom.wav
, aber ich kann immer noch nicht dasselbe Sample mehrmals spielen. Es scheint, dass das <audio>
Element eher eine Streaming-Funktion als etwas ist, mit dem Soundeffekte abgespielt werden können.
Gibt es eine clevere Möglichkeit, dies zu erreichen, die mir fehlt, vorzugsweise nur HTML5 und JavaScript?
Ich sollte auch erwähnen, dass meine Testumgebung Firefox 3.5 unter Ubuntu 9.10 ist. Die anderen Browser, die ich ausprobiert habe - Opera, Midori, Chromium, Epiphany - haben unterschiedliche Ergebnisse erzielt. Einige spielen nichts und andere werfen Ausnahmen.
quelle
Antworten:
HTML5
Audio
ObjekteSie müssen sich nicht um
<audio>
Elemente kümmern . Mit HTML 5 können Sie direkt aufAudio
Objekte zugreifen :Das Mischen in der aktuellen Version der Spezifikation wird nicht unterstützt.
Um denselben Sound mehrmals abzuspielen, erstellen Sie mehrere Instanzen des
Audio
Objekts. Sie könnensnd.currentTime=0
das Objekt auch nach Beendigung der Wiedergabe festlegen .Da der JS-Konstruktor keine Fallback-
<source>
Elemente unterstützt, sollten Sie verwendenum zu testen, ob der Browser Ogg Vorbis unterstützt.
Wenn Sie ein Spiel oder eine Musik-App schreiben (mehr als nur einen Player), sollten Sie eine erweiterte Web-Audio-API verwenden , die jetzt von den meisten Browsern unterstützt wird .
quelle
Audio
Objekte werden automatisch gepuffert. Sie sind analog zuImage
Objekten konzipiert, daher funktionieren Old-School- Bildvorladetechniken auch mit Audio.snd.play()
on window.load () ausführen.<audio>
Tag immer noch, weil es kontrollierbarer ist. Aber trotzdem danke für die Info!WebAudio API von W3C
Ab Juli 2012 wird die WebAudio-API jetzt in Chrome und zumindest teilweise in Firefox unterstützt und soll ab Version 6 zu IOS hinzugefügt werden.
Obwohl es robust genug ist, um programmgesteuert für grundlegende Aufgaben verwendet zu werden, sollte das Audio-Element niemals vollständige Audio-Unterstützung für Spiele usw. bieten. Es wurde so konzipiert, dass ein einzelnes Medium ähnlich wie ein Bild in eine Seite eingebettet werden kann Etikett. Es gibt viele Probleme beim Versuch, das Audio-Tag für Spiele zu verwenden:
Ich habe diesen Artikel Erste Schritte mit WebAudio verwendet , um mit der WebAudio-API zu beginnen. Die FieldRunners WebAudio-Fallstudie ist ebenfalls eine gute Lektüre.
quelle
howler.js
Eine der besten Lösungen für das Verfassen von Spielen ist die Verwendung einer Bibliothek, die die vielen Probleme löst, mit denen wir beim Schreiben von Code für das Web konfrontiert sind , z. B. howler.js . howler.js abstrahiert die großartige (aber einfache ) Web-Audio-API in ein benutzerfreundliches Framework. Es wird versucht, auf HTML5 Audio Element zurückzugreifen, wenn die Web Audio API nicht verfügbar ist.
wad.js.
Eine weitere großartige Bibliothek ist wad.js , die besonders nützlich ist, um Synth-Audio wie Musik und Effekte zu produzieren. Zum Beispiel:
Sound für Spiele
Eine andere Bibliothek, die Wad.js ähnelt, ist " Sound for Games ". Sie konzentriert sich mehr auf die Produktion von Effekten und bietet ähnliche Funktionen durch eine relativ unterschiedliche (und möglicherweise präzisere) API:
Zusammenfassung
Jede dieser Bibliotheken ist einen Blick wert, unabhängig davon, ob Sie eine einzelne Sounddatei wiedergeben oder einen eigenen HTML-basierten Musikeditor, Effektgenerator oder ein eigenes Videospiel erstellen müssen.
quelle
In einigen Fällen können Sie dies auch verwenden, um HTML 5-Audio zu erkennen:
http://diveintohtml5.ep.io/everything.html
HTML 5 JS Erkennungsfunktion
quelle
Hier ist eine Methode, mit der es möglich ist, sogar denselben Sound gleichzeitig abzuspielen. Kombinieren Sie mit Preloader, und Sie sind fertig. Dies funktioniert zumindest mit Firefox 17.0.1. Ich habe es noch nicht mit etwas anderem getestet.
Binden Sie dies an eine Tastaturtaste und genießen Sie:
quelle
Klingt so, als ob Sie Mehrkanaltöne wünschen. Nehmen wir an, Sie haben 4 Kanäle (wie bei wirklich alten 16-Bit-Spielen). Ich habe noch nicht mit der HTML5-Audiofunktion gespielt, aber Sie brauchen nicht nur 4 <audio> -Elemente und einen Zyklus, der verwendet wird um den nächsten Soundeffekt abzuspielen? Hast du das versucht? Was geschieht? Wenn es funktioniert: Um mehr Sounds gleichzeitig abzuspielen, fügen Sie einfach weitere <audio> -Elemente hinzu.
Ich habe dies zuvor ohne das HTML5-Element <audio> mit einem kleinen Flash-Objekt von http://flash-mp3-player.net/ getan. Ich habe ein Musikquiz geschrieben ( http://webdeavour.appspot.com/ ) und verwendete es, um Musikclips abzuspielen, wenn der Benutzer auf die Schaltfläche für die Frage klickte. Anfangs hatte ich einen Spieler pro Frage, und es war möglich, sie übereinander zu spielen, also habe ich sie so geändert, dass es nur einen Spieler gab, auf den ich auf verschiedene Musikclips zeigte.
quelle
Schauen Sie sich die Website
jai(->mirror) (Javascript Audio Interface) an. Wenn sie sich ihre Quelle ansehen, scheinen sieplay()
wiederholt anzurufen , und sie erwähnen, dass ihre Bibliothek für die Verwendung in HTML5-basierten Spielen geeignet sein könnte.quelle
Wäre es nicht möglich, dasselbe Sample mehrmals abzuspielen:
(
e
ist das Audioelement)Vielleicht habe ich Ihr Problem völlig falsch verstanden. Möchten Sie, dass der Soundeffekt mehrere Male gleichzeitig abgespielt wird? Dann ist das völlig falsch.
quelle
Hier ist eine Idee. Laden Sie Ihr gesamtes Audio für eine bestimmte Klangklasse in ein einzelnes Audioelement, in dem die src-Daten alle Ihre Samples in einer zusammenhängenden Audiodatei enthalten (wahrscheinlich möchten Sie etwas Ruhe dazwischen, damit Sie die Samples mit einer Zeitüberschreitung mit weniger Zeit abfangen und schneiden können Blutungsrisiko für die nächste Probe). Suchen Sie dann nach dem Sample und spielen Sie es bei Bedarf ab.
Wenn Sie mehr als eines davon zum Abspielen benötigen, können Sie ein zusätzliches Audioelement mit demselben src erstellen, damit es zwischengespeichert wird. Jetzt haben Sie effektiv mehrere "Spuren". Sie können Gruppen von Tracks mit Ihrem bevorzugten Ressourcenzuweisungsschema wie Round Robin usw. verwenden.
Sie können auch andere Optionen angeben, z. B. das Einreihen von Sounds in einen Titel, der abgespielt werden soll, wenn diese Ressource verfügbar ist, oder das Ausschneiden eines aktuell wiedergegebenen Samples.
quelle
http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html
http://people.mozilla.org/~roc/audio-latency-repeating.html
Funktioniert in Firefox und Chrome für mich einwandfrei.
Führen Sie var sound = document.getElementById ("shot") aus, um einen von Ihnen gestarteten Sound zu stoppen. CloneNode (true); sound.play (); und später sound.pause ();
quelle
Ich würde die Verwendung von SoundJS empfehlen , einer Bibliothek, an deren Entwicklung ich beteiligt bin. Sie können damit eine einzige Codebasis schreiben, die überall funktioniert, wobei SoundJS je nach Bedarf Web-Audio, HTML-Audio oder Flash-Audio auswählt.
Damit können Sie alles tun, was Sie wollen:
Ich hoffe, das hilft.
quelle
Es ist nicht möglich, Multi-Shot-Spiele mit einem einzelnen
<audio>
Element durchzuführen. Sie müssen hierfür mehrere Elemente verwenden.quelle
Ich bin darauf gestoßen, als ich einen Musicbox-Kartengenerator programmiert habe. Begann mit verschiedenen Bibliotheken, aber jedes Mal gab es irgendwie einen Fehler. Die Verzögerung bei der normalen Audioimplementierung war schlecht, keine mehrfachen Wiedergaben ... endete schließlich mit Lowlag Library + Soundmanager:
http://lowlag.alienbill.com/ und http://www.schillmania.com/projects/soundmanager2/
Sie können die Implementierung hier überprüfen: http://musicbox.grit.it/
Ich habe wav + ogg-Dateien für Multi-Browser-Spiele generiert. Dieser Musicbox-Player reagiert auf iPad, iPhone, Nexus, Mac, PC, ... funktioniert für mich.
quelle
Ich weiß, dass dies ein totaler Hack ist, dachte aber, ich sollte diese Open-Source-Audiobibliothek hinzufügen, die ich vor einiger Zeit auf Github gestellt habe ...
https://github.com/run-time/jThump
Nachdem Sie auf den Link unten geklickt haben, geben Sie die Tasten der Startzeile ein, um ein Blues-Riff zu spielen (geben Sie auch mehrere Tasten gleichzeitig ein usw.)
Beispiel mit der jThump-Bibliothek >> http://davealger.com/apps/jthump/
Grundsätzlich werden unsichtbare
<iframe>
Elemente erstellt, die eine Seite laden, die einen Sound auf Ready () wiedergibt.Dies ist sicherlich nicht ideal, aber Sie könnten diese Lösung allein aufgrund der Kreativität +1 (und der Tatsache, dass sie Open Source ist und in jedem Browser funktioniert, in dem ich sie ausprobiert habe) +1. Ich hoffe, dies gibt jemand anderem die Möglichkeit, zumindest einige Ideen zu suchen.
:) :)
quelle
Die ausgewählte Antwort funktioniert in allen außer IE. Ich habe ein Tutorial darüber geschrieben, wie es browserübergreifend funktioniert = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html
Hier ist die Funktion, die ich geschrieben habe;
Sie müssen der HTML-Seite auch das folgende Tag hinzufügen:
Schließlich können Sie die Funktion aufrufen und hier einfach den Pfad durchlaufen:
quelle
Sie können jederzeit versuchen
AudioContext
, die Unterstützung zu beschränken, sie ist jedoch Teil des Arbeitsentwurfs der Web-Audio-API . Es könnte sich lohnen, wenn Sie planen, in Zukunft etwas zu veröffentlichen. Und wenn Sie nur für Chrome und Firefox programmieren, sind Sie golden.quelle
quelle
Die Web Audio API ist das richtige Werkzeug für diesen Job. Das Laden und Abspielen von Sounddateien erfordert wenig Arbeit. Glücklicherweise gibt es viele Bibliotheken, die die Arbeit vereinfachen. Da ich mich für Klänge interessiere, habe ich auch eine Bibliothek namens Musquito erstellt Sie auch überprüfen können.
Derzeit unterstützt es nur verblassende Soundeffekte und ich arbeite an anderen Dingen wie der 3D-Räumlichkeit.
quelle