Sound effects in JavaScript HTML5

Question

I m using HTML5 to program games  the obstacle I ve run into now is how to play sound effects   The specific requirements are few in number    Play and mix multiple sounds  Play the same sample multiple times  possibly overlapping playbacks  Interrupt playback of a sample at any point  Preferably play WAV files containing  low quality  raw PCM  but I can convert these  of course    My first approach was to use the HTML5  lt audio gt  element and define all sound effects in my page  Firefox plays the WAV files just peachy  but calling  play multiple times doesn t really play the sample multiple times  From my understanding of the HTML5 spec  the  lt audio gt  element also tracks playback state  so that explains why   My immediate thought was to clone the audio elements  so I created the following tiny JavaScript library to do that for me  depends on 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                            So now I can do Snd boom    from the Firebug console and play snd boom wav  but I still can t play the same sample multiple times  It seems that the  lt audio gt  element is really more of a streaming feature rather than something to play sound effects with   Is there a clever way to make this happen that I m missing  preferably using only HTML5 and JavaScript   I should also mention that  my test environment is Firefox 3 5 on Ubuntu 9 10  The other browsers I ve tried - Opera  Midori  Chromium  Epiphany - produced varying results  Some don t play anything  and some throw exceptions

User · Answer

I know this is a total hack but thought I should add this sample open source audio library I put on github awhile ago...

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

After clicking the link below, type on the home row keys to play a blues riff (also type multiple keys at the same time etc.)

Sample using jThump library >> http://davealger.com/apps/jthump/

It basically works by making invisible <iframe> elements that load a page that plays a sound onReady().

This is certainly not ideal but you could +1 this solution based on creativity alone (and the fact that it is open source and works in any browser that I've tried it on) I hope this gives someone else searching some ideas at least.

:)

User · Answer

I would recommend using SoundJS  a library I ve help develop   It allows you to write a single code base that works everywhere  with SoundJS picking web audio  html audio  or flash audio as appropriate   It will allow you to do all of the thing you want    Play and mix multiple sounds  Play the same sample multiple times  possibly overlapping playbacks Interrupt playback of a sample at any point play WAV files containing  depending on browser support    Hope that helps

User · Answer

You may also want to use this to detect HTML 5 audio in some cases   http   diveintohtml5 ep io everything html  HTML 5 JS Detect function  function supportsAudio         var a   document createElement  audio         return    a canPlayType  amp  amp  a canPlayType  audio mpeg    replace  no

User · Answer

Here s an idea  Load all of your audio for a certain class of sounds into a single individual audio element where the src data is all of your samples in a contiguous audio file  probably want some silence between so you can catch and cut the samples with a timeout with less risk of bleeding to the next sample   Then  seek to the sample and play it when needed    If you need more than one of these to play you can create an additional audio element with the same src so that it is cached  Now  you effectively have multiple  tracks   You can utilize groups of tracks with your favorite resource allocation scheme like Round Robin etc    You could also specify other options like queuing sounds into a track to play when that resource becomes available or cutting a currently playing sample

User · Answer

HTML5 Audio objects  You don t need to bother with  lt audio gt  elements  HTML 5 lets you access Audio objects directly   var snd   new Audio  file wav       buffers automatically when created snd play      There s no support for mixing in current version of the spec    To play same sound multiple times  create multiple instances of the Audio object  You could also set snd currentTime 0 on the object after it finishes playing     Since the JS constructor doesn t support fallback  lt source gt  elements  you should use    new Audio    canPlayType  audio ogg  codecs vorbis     to test whether the browser supports Ogg Vorbis     If you re writing a game or a music app  more than just a player   you ll want to use more advanced Web Audio API  which is now supported by most browsers

User · Answer

You can always try AudioContext it has limited support but it s a part of the web audio api working draft   It might be worth it if you are planing to release something in the future   And if you are only programing for chrome and Firefox you re golden

User · Answer

I ran into this while programming a musicbox card generator  Started with different libraries but everytime there was a glitch somehow  The lag on normal audio implementation was bad  no  multiple plays    eventually ended up using lowlag library   soundmanager   http   lowlag alienbill com  and  http   www schillmania com projects soundmanager2   You can check out the implementation here  http   musicbox grit it   I generated wav   ogg files for multi browser plays  This musicbox player works responsive on ipad  iphone  Nexus  mac  pc     works for me

User · Answer

Here s one method for making it possible to play even same sound simultaneously  Combine with preloader  and you re all set  This works with Firefox 17 0 1 at least  haven t tested it with anything else yet      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        Bind this to a keyboard key  and enjoy   player  step

User · Answer

To play the same sample multiple times  wouldn t it be possible to do something like this   e pause       Perhaps optional e currentTime   0  e play       e is the audio element   Perhaps I completely misunderstood your problem  do you want the sound effect to play multiple times at the same time  Then this is completely wrong

User · Answer

Sounds like what you want is multi-channel sounds   Let s suppose you have 4 channels  like on really old 16-bit games   I haven t got round to playing with the HTML5 audio feature yet  but don t you just need 4  lt audio gt  elements  and cycle which is used to play the next sound effect   Have you tried that   What happens   If it works   To play more sounds simultaneously  just add more  lt audio gt  elements   I have done this before without the HTML5  lt audio gt  element  using a little Flash object from http   flash-mp3-player net  - I wrote a music quiz  http   webdeavour appspot com   and used it to play clips of music when the user clicked the button for the question   Initially I had one player per question  and it was possible to play them over the top of each other  so I changed it so there was only one player  which I pointed at different music clips

User · Answer

x000D   x000D  var AudioContextFunc   window AudioContext    window webkitAudioContext  x000D  var audioContext   new AudioContextFunc    x000D  var player new WebAudioFontPlayer    x000D  var instrumVox instrumApplause  x000D  var drumClap drumLowTom drumHighTom drumSnare drumKick drumCrash  x000D  loadDrum 21 function s  drumClap s     x000D  loadDrum 30 function s  drumLowTom s     x000D  loadDrum 50 function s  drumHighTom s     x000D  loadDrum 15 function s  drumSnare s     x000D  loadDrum 5 function s  drumKick s     x000D  loadDrum 70 function s  drumCrash s     x000D  loadInstrument 594 function s  instrumVox s     x000D  loadInstrument 1367 function s  instrumApplause s     x000D  function loadDrum n callback   x000D    var info player loader drumInfo n   x000D    player loader startLoad audioContext  info url  info variable   x000D    player loader waitLoad function     callback window info variable      x000D    x000D  function loadInstrument n callback   x000D    var info player loader instrumentInfo n   x000D    player loader startLoad audioContext  info url  info variable   x000D    player loader waitLoad function     callback window info variable      x000D    x000D  function uhoh    x000D    var when audioContext currentTime  x000D    var b 0 1  x000D    player queueWaveTable audioContext  audioContext destination  instrumVox  when b 0  60  b 1   x000D    player queueWaveTable audioContext  audioContext destination  instrumVox  when b 3  56  b 4   x000D    x000D  function applause    x000D    player queueWaveTable audioContext  audioContext destination  instrumApplause  audioContext currentTime  54  3   x000D    x000D  function badumtss    x000D    var when audioContext currentTime  x000D    var b 0 11  x000D    player queueWaveTable audioContext  audioContext destination  drumSnare  when b 0  drumSnare zones 0  keyRangeLow  3 5   x000D    player queueWaveTable audioContext  audioContext destination  drumLowTom  when b 0  drumLowTom zones 0  keyRangeLow  3 5   x000D    player queueWaveTable audioContext  audioContext destination  drumSnare  when b 1  drumSnare zones 0  keyRangeLow  3 5   x000D    player queueWaveTable audioContext  audioContext destination  drumHighTom  when b 1  drumHighTom zones 0  keyRangeLow  3 5   x000D    player queueWaveTable audioContext  audioContext destination  drumSnare  when b 3  drumSnare zones 0  keyRangeLow  3 5   x000D    player queueWaveTable audioContext  audioContext destination  drumKick  when b 3  drumKick zones 0  keyRangeLow  3 5   x000D    player queueWaveTable audioContext  audioContext destination  drumCrash  when b 3  drumCrash zones 0  keyRangeLow  3 5   x000D    x000D   lt script src  https   surikov github io webaudiofont npm dist WebAudioFontPlayer js  gt  lt  script gt  x000D   lt button onclick  badumtss     gt badumtss lt  button gt  x000D   lt button onclick  uhoh     gt uhoh lt  button gt  x000D   lt button onclick  applause     gt applause lt  button gt  x000D   lt br  gt  lt a href  https   github com surikov webaudiofont  gt More sounds lt  a gt  x000D   x000D   x000D

User · Answer

http   robert ocallahan org 2011 11 latency-of-html5-sounds html  http   people mozilla org  roc audio-latency-repeating html  Works OK in Firefox and Chrome for me   To stop a sound that you started  do     var sound   document getElementById  shot   cloneNode true       sound play    and later     sound pause

User · Answer

The selected answer will work in everything except IE  I wrote a tutorial on how to make it work cross browser   http   www andy-howard com how-to-play-sounds-cross-browser-including-ie index html  Here is the function I wrote   function playSomeSounds soundPath       var trident     navigator userAgent match  Trident  7 0     var net     navigator userAgent match   NET4 0E     var IE11   trident  amp  amp  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             You also need to add the following tag to the html page    lt bgsound id  sound  gt    Finally you can call the function and simply pass through the path here   playSomeSounds  sounds welcome wav

User · Answer

Have a look at the jai  -  mirror   javascript audio interface  site  From looking at their source  they appear to be calling play   repeatedly  and they mention that their library might be appropriate for use in HTML5-based games      You can fire multiple audio events   simultaneously  which could be used   for creating Javascript games  or   having a voice speaking over some   background music

User · Answer

Web Audio API is right tool for this job  There is little bit of work involved in loading sounds files and playing it  Luckily there are plenty of libraries out there that simplify the job  Being interested in sounds I also created a library called musquito you can check out that as well   Currently it supports only fading sound effect and I m working on other things like 3D spatialization

User · Answer

It s not possible to do multi-shot playing with a single  lt audio gt  element  You need to use multiple elements for this

User · Answer

WebAudio API by W3C  As of July 2012  the WebAudio API is now supported in Chrome  and at least partly supported in Firefox  and is slated to be added to IOS as of version 6   Although it is robust enough to be used programatically for basic tasks  the Audio element was never meant to provide full audio support for games  etc   It was designed to allow a single piece of media to be embedded in a page  similar to an img tag   There are a lot of issues with trying to use the Audio tag for games    Timing slips are common with Audio elements You need an Audio element for each instance of a sound Load events aren t totally reliable  yet No common volume controls  no fading  no filters effects   I used this Getting Started With WebAudio article to get started with the WebAudio API   The FieldRunners WebAudio Case Study is also a good read

User · Answer

howler js  For game authoring  one of the best solutions is to use a library which solves the many problems we face when writing code for the web  such as howler js  howler js abstracts the great  but low-level  Web Audio API into an easy to use framework  It will attempt to fall back to HTML5 Audio Element if Web Audio API is unavailable   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  Another great library is wad js  which is especially useful for producing synth audio  such as music and effects  For example   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 for Games  Another library similar to Wad js is  Sound for Games   it has more focus on effects production  while providing a similar set of functionality through a relatively distinct  and perhaps more concise feeling  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            Summary  Each of these libraries are worth a look  whether you need to play back a single sound file  or perhaps create your own html-based music editor  effects generator  or video game

[javascript] Sound effects in JavaScript / HTML5

Examples related to javascript

Examples related to html

Examples related to html5-audio