html5 sound,html - Sound effects in JavaScript / HTML5 - Stack Overflow

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

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}

})

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.