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 #playmehrmals 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.

HTML5 Audio Objekte

Sie müssen sich nicht um <audio>Elemente kümmern . Mit HTML 5 können Sie direkt auf AudioObjekte zugreifen :

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

Das Mischen in der aktuellen Version der Spezifikation wird nicht unterstützt.

Um denselben Sound mehrmals abzuspielen, erstellen Sie mehrere Instanzen des AudioObjekts. Sie können snd.currentTime=0das Objekt auch nach Beendigung der Wiedergabe festlegen .

Da der JS-Konstruktor keine Fallback- <source>Elemente unterstützt, sollten Sie verwenden

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

um 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 .

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:

• Timing Slips sind bei Audio-Elementen üblich
• Sie benötigen ein Audio-Element für jede Instanz eines Sounds
• Ladeereignisse sind noch nicht absolut zuverlässig
• Keine gemeinsamen Lautstärkeregler, kein Fading, keine Filter / Effekte

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.

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.

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

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:

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

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:

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

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.

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

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

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.

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

Binden Sie dies an eine Tastaturtaste und genießen Sie:

player("step");

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.

Schauen Sie sich die Website jai (-> mirror ) (Javascript Audio Interface) an. Wenn sie sich ihre Quelle ansehen, scheinen sie play()wiederholt anzurufen , und sie erwähnen, dass ihre Bibliothek für die Verwendung in HTML5-basierten Spielen geeignet sein könnte.

Sie können mehrere Audioereignisse gleichzeitig auslösen, die zum Erstellen von Javascript-Spielen oder zum Sprechen einer Stimme über Hintergrundmusik verwendet werden können

Wäre es nicht möglich, dasselbe Sample mehrmals abzuspielen:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

( eist 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.

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.

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 ();

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:

• Spielen und mischen Sie mehrere Sounds,
• Spielen Sie dasselbe Sample mehrmals ab und überlappen Sie möglicherweise die Wiedergabe
• Unterbrechen Sie die Wiedergabe eines Samples jederzeit
• WAV-Dateien abspielen mit (abhängig von der Browserunterstützung)

Ich hoffe, das hilft.

Es ist nicht möglich, Multi-Shot-Spiele mit einem einzelnen <audio>Element durchzuführen. Sie müssen hierfür mehrere Elemente verwenden.

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.

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.

:) :)

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;

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

Sie müssen der HTML-Seite auch das folgende Tag hinzufügen:

<bgsound id="sound">

Schließlich können Sie die Funktion aufrufen und hier einfach den Pfad durchlaufen:

playSomeSounds("sounds/welcome.wav");

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.

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.