WebAudio API by W3C

Wyjec.js

Do tworzenia gier jednym z najlepszych rozwiązań jest użycie biblioteki, która rozwiązuje wiele problemów, z którymi stykamy się pisząc kod dla sieci, takich jak howler.js . wyjec.js abstrahuje wielki (ale niskopoziomowy) Web Audio API w łatwy w użyciu framework. Jeśli Web Audio API jest niedostępne, spróbuje wrócić do HTML5 Audio Element.

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

Kolejną wielką biblioteką jest wad.js , które jest szczególnie przydatny do produkcji dźwięku syntezatorów, takich jak muzyka i efekty. Na przykład:

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}
})

Dźwięk do gier

Kolejna biblioteka podobna do Wad.js to " Sound for Games ", ma większy nacisk na produkcję efektów, zapewniając jednocześnie podobny zestaw funkcji poprzez stosunkowo wyraźne (i być może bardziej zwięzłe odczucia) 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?]
  );
}

Podsumowanie

Każda z tych bibliotek jest warta obejrzenia, niezależnie od tego, czy chcesz odtworzyć pojedynczy dźwięk lub stwórz własny edytor muzyczny oparty na html, generator efektów lub grę wideo.

Możesz również użyć tego do wykrycia dźwięku HTML 5 w niektórych przypadkach:

Http://diveintohtml5.ep.io/everything.html

HTML 5 js Detect function

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

Oto jedna z metod pozwalających na jednoczesne odtwarzanie nawet tego samego dźwięku. Połącz z preloaderem i gotowe. Działa to przynajmniej z Firefoksem 17.0.1, nie testowałem go jeszcze z niczym innym.

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

Połącz to z klawiszem klawiatury i ciesz się:

player("step");

Brzmi jak to, czego chcesz, to Dźwięki wielokanałowe. Załóżmy, że masz 4 kanały (jak w naprawdę starych grach 16-bitowych), nie mam rundy do gry z funkcją audio HTML5 jeszcze, ale nie potrzebujesz tylko 4 elementów i cyklu, który jest używany do odtwarzania następnego efektu dźwiękowego? Próbowałeś tego? Co się dzieje? Jeśli to działa: aby odtworzyć więcej dźwięków jednocześnie, dodaj więcej elementów .

Robiłem to wcześniej bez elementu HTML5 , używając trochę Obiekt Flash z http://flash-mp3-player.net / - napisałem quiz muzyczny ( http://webdeavour.appspot.com / ) i używała go do odtwarzania klipów muzycznych, gdy użytkownik kliknął przycisk pytania. Początkowo miałem jeden Odtwarzacz na pytanie, i można było odtwarzać je nad sobą, więc zmieniłem go tak, że był tylko jeden odtwarzacz, który wskazywałem na różne Klipy muzyczne.

Spójrz na jai (-> lustro) (javascript audio interface) site. Patrząc na ich źródło, wydają się wywoływać play() wielokrotnie i wspominają, że ich biblioteka może być odpowiednia do użycia w grach opartych na HTML5.

Możesz odpalić wiele zdarzeń audio jednocześnie, które mogą być wykorzystane do tworzenia gier Javascript, lub mając głos mówiący nad niektórymi muzyka w tle

Aby odtworzyć tę samą próbkę wiele razy, czy nie byłoby możliwe zrobić coś takiego:

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

(e jest elementem audio)

Być może całkowicie źle zrozumiałem twój problem, czy chcesz, aby efekt dźwiękowy grał wiele razy w tym samym czasie? Więc to jest całkowicie błędne.

Mam pomysł. Załaduj cały dźwięk dla określonej klasy dźwięków do pojedynczego elementu audio, w którym dane src są wszystkimi samplami w sąsiednim pliku audio (prawdopodobnie potrzebujesz ciszy między nimi, aby można było złapać i wyciąć próbki z limitem czasu z mniejszym ryzykiem krwawienia do następnej próbki). Następnie Szukaj próbki i odtwarzaj ją w razie potrzeby.

Jeśli potrzebujesz więcej niż jednego z nich do odtwarzania, możesz utworzyć dodatkowy element audio z tym samym src, aby jest w pamięci podręcznej. Teraz faktycznie masz wiele "ścieżek". Możesz używać grup utworów z ulubionym schematem alokacji zasobów, takim jak Round Robin itp.

Możesz również określić inne opcje, takie jak kolejkowanie dźwięków do ścieżki do odtworzenia, gdy zasób stanie się dostępny lub wycinanie aktualnie odtwarzanej próbki.

Http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

Http://people.mozilla.org / ~roc/audio-latency-repeating.html

Działa OK w Firefoksie i Chrome dla mnie.

Aby zatrzymać dźwięk, który zacząłeś, zrób var sound = document.getElementById ("strzał").cloneNode (true); dźwięk.play(); i Później dźwięk.pause ();

Zalecałbym użycie SoundJS, biblioteki, którą pomogłem rozwinąć. Pozwala na napisanie pojedynczej bazy kodu, która działa wszędzie, z SoundJS wybierając audio web, audio html lub flash odpowiednio.

To pozwoli Ci zrobić wszystko, co chcesz:

• odtwarzaj i miksuj wiele dźwięków,
• odtwarzanie tej samej próbki wiele razy, możliwe nakładanie się odtworzeń
• Przerwanie odtwarzania próbki w dowolnym punkcie
• odtwarzanie plików WAV zawierających (w zależności od obsługi przeglądarki)

Mam nadzieję, że to pomoże.

Nie jest możliwe wykonywanie gry wieloostrzowej z pojedynczym elementem <audio>. Musisz użyć do tego wielu elementów.

Natknąłem się na to podczas programowania generatora kart muzycznych. Zaczęło się od różnych bibliotek, ale za każdym razem była jakaś usterka. Opóźnienie przy normalnej implementacji audio było złe, brak wielokrotnych odtworzeń... ostatecznie skończyło się na użyciu biblioteki lowlag + soundmanager:

Http://lowlag.alienbill.com / oraz http://www.schillmania.com/projects/soundmanager2/

Możesz sprawdzić realizację tutaj: http://musicbox.grit.it/

Wygenerowałem pliki wav + ogg do odtwarzania w wielu przeglądarkach. Ten odtwarzacz musicbox działa responsywnie na ipad, iphone, Nexus, mac, pc,... mi pasuje.

Wiem, że to totalny hack, ale pomyślałem, że powinienem dodać tę przykładową bibliotekę audio open source, którą umieściłem na GitHubie jakiś czas temu...

Https://github.com/run-time/jThump

Po kliknięciu poniższego linku wpisz klawisze home row, aby odtworzyć bluesowy riff (wpisz również kilka klawiszy jednocześnie itp.)

Przykładowe Użycie biblioteki jThump > > http://davealger.com/apps/jthump/

W zasadzie działa poprzez tworzenie niewidocznych <iframe> elementów ładujących stronę, która odtwarza dźwięk na ekranie ().

To z pewnością nie jest idealne , ale można +1 To rozwiązanie oparte na samej kreatywności (i fakt, że jest to open source i działa w każdej przeglądarce, że próbowałem go na) mam nadzieję, że to daje komuś innemu poszukiwania jakieś pomysły przynajmniej.

:)

Wybrana odpowiedź będzie działać we wszystkim oprócz IE. Napisałem tutorial Jak to działa cross browser = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

Oto funkcja, którą napisałem;

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

Musisz również dodać następujący tag do strony html:

<bgsound id="sound">

Wreszcie możesz wywołać funkcję i po prostu przejść przez ścieżkę tutaj:

playSomeSounds("sounds/welcome.wav");

Zawsze możesz spróbować AudioContext ma ograniczone wsparcie, ale jest częścią projektu roboczego web audio api. Może warto, jeśli planujesz wydać coś w przyszłości. A jeśli programujesz tylko dla chrome i Firefox jesteś złoty.