Features
Web Audio library
Web Audio seeks to process and synthesize audio in web applications. jWebAudio keeps the technical details of Web Audio under the hood and makes it easier to control your audio.
Designed for web games
You can find almost everything you need to control audio in web games with jWebAudio, which provides functions like fade in and fade out, loop, multishot for short sound effects like gun shotting and etc.
jQuery and standard versions
jWebAudio provides both jQuery and standard versions, functionality of which are the same and the difference lies only in the method of calling functions. You may choose either depending on project requirements and person preference.
Light-weight
jWebAudio focuses on audio control of web games and provides functions that most frequently used in game developing, which makes it a light-weight (9.0kb for minified standard version) but well-featured audio library.
Precise audio control
Along with basic audio control like play, pause and stop, and settings like volume, mute and loop, jWebAudio highlights itself with precise audio control. You may seek to a specific point and start playing from the exact position.
2D and 3D sound effects
With jWebAudio, you can add sound effects (e.g.: telephonize) in a simple way. And if you want to make your own sound effects, you can achieve this by setting Biquad Filter parameters.
With 3D sound effect, you can set parameters like position and velocity of the sound source, making it feel like being in a 3D environment.
Download
jQuery Version
Standard Version
Examples
Add sound source
This tells our library the location of the audio to be played without actually load it into memory.
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg'
});
}
Standard Version
Run
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg'
});
}
Add multi sound sources
Add array of sound sources in standard version and add sound sources with the same class in jQuery version.
jQuery Version
Run
function onload() {
// jQuery version stores one sound in each
// element, so url cannot be an array of
// string
$('.sound').each(function() {
$(this).jWebAudio('addSoundSource', {
'url': '../../examples/resource/' +
$(this).attr('id') + '.wav'
});
});
}
Standard Version
Run
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': ['../../examples/resource/in.wav',
'../../examples/resource/out.wav']
});
}
Load sound source
If you wish to control when to load the audio into memory, load function should be called.
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg'
});
$('#audio').jWebAudio('load', function() {
alert('Loaded!');
});
}
Standard Version
Run
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg'
});
source.load(function() {
alert('Loaded!');
});
}
Load array
jQuery Version
Run
function onload() {
$('.sound').each(function() {
var url = '../../examples/resource/' + $(this).attr('id') + '.wav';
$(this).jWebAudio('addSoundSource', {
url: url
});
$(this).jWebAudio('load', function() {
var para = document.createElement('p');
var output = document.createTextNode('Loaded ' + url + '!');
para.appendChild(output);
document.getElementById('output').appendChild(para);
});
});
}
Standard Version
Run
var sources = null;
function onload() {
var urls = ['../../examples/resource/in.wav',
'../../examples/resource/out.wav'];
var engine = new jWebAudio.SoundEngine();
sources = engine.addSoundSource({
'url': urls
});
for (var i in sources) {
sources[i].load(function(url) {
return function() {
var para = document.createElement('p');
var output = document.createTextNode('Loaded ' + url + '!');
para.appendChild(output);
document.getElementById('output').appendChild(para);
};
}(urls[i]));
}
}
PreLoad
PreLoad the sound when add sound source.
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
alert('Loaded!');
}
});
}
Standard Version
Run
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
alert('Loaded!');
}
});
}
PreLoad array
PreLoad two sound sources when add sound source.
jQuery Version
Run
function onload() {
$('.sound').each(function() {
var url = '../../examples/resource/' + $(this).attr('id') + '.wav';
$(this).jWebAudio('addSoundSource', {
url: url,
preLoad: true,
callback: function() {
var para = document.createElement('p');
var output = document.createTextNode('Loaded ' + url + '!');
para.appendChild(output);
document.getElementById('output').appendChild(para);
}
});
});
}
Standard Version
Run
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': ['../../examples/resource/in.wav',
'../../examples/resource/out.wav'],
'preLoad': true,
'callback': function() {
alert('Loaded both!');
}
});
}
Play
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg'
});
}
function play() {
$('#audio').jWebAudio('load', function() {
$('#audio').jWebAudio('play');
});
$('#btn')[0].disabled = true;
}
Standard Version
Run
var source = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg'
});
}
function play() {
source.load(function() {
source.sound.play();
});
document.getElementById('btn').disabled = true;
}
Play automatically
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
}
});
}
Standard Version
Run
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
}
});
}
Play array
jQuery Version
Run
function onload() {
$('.sound').each(function() {
var url = '../../examples/resource/' + $(this).attr('id') + '.wav';
$(this).jWebAudio('addSoundSource', {
url: url,
preLoad: true
});
});
}
function onPlayA() {
$('#in').jWebAudio('play');
$('#playA')[0].disabled = true;
}
function onPlayB() {
$('#out').jWebAudio('play');
$('#playB')[0].disabled = true;
}
Standard Version
Run
var sources = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
sources = engine.addSoundSource({
'url': ['../../examples/resource/in.wav',
'../../examples/resource/out.wav'],
'preLoad': true
});
}
function onPlayA() {
sources[0].sound.play();
document.getElementById('playA').disabled = true;
}
function onPlayB() {
sources[1].sound.play();
document.getElementById('playB').disabled = true;
}
Play array automatically
jQuery Version
Run
function onload() {
var url = {
'in': 'in.wav',
'a': 'a.ogg'
};
$('.sound').each(function() {
var id = $(this).attr('id');
$(this).jWebAudio('addSoundSource', {
url: '../../examples/resource/' + url[id],
preLoad: true,
callback: function() {
$('#' + id).jWebAudio('play');
}
});
});
}
Standard Version
Run
function onload() {
var engine = new jWebAudio.SoundEngine();
var sources = engine.addSoundSource({
'url': ['../../examples/resource/in.wav',
'../../examples/resource/a.ogg'],
'preLoad': true,
'callback': function() {
for (var i in sources) {
sources[i].sound.play();
}
}
});
}
Pause
jQuery Version
Run
var source = null;
var playing = false;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
playing = true;
document.getElementById('btn').disabled = false;
}
});
}
function play() {
if (playing) {
// pause
document.getElementById('btn').innerHTML = 'Play';
source.sound.pause();
} else {
// play
document.getElementById('btn').innerHTML = 'Pause';
source.sound.play();
}
playing = !playing;
}
Standard Version
Run
var source = null;
var playing = false;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
playing = true;
document.getElementById('btn').disabled = false;
}
});
}
function play() {
if (playing) {
// pause
document.getElementById('btn').innerHTML = 'Play';
source.sound.pause();
} else {
// play
document.getElementById('btn').innerHTML = 'Pause';
source.sound.play();
}
playing = !playing;
}
Stop
jQuery Version
Run
var playing = false;
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
playing = true;
$('#btn')[0].disabled = false;
}
});
}
function play() {
if (playing) {
// pause
$('#btn').text('Play');
$('#audio').jWebAudio('stop');
} else {
// play
$('#btn').text('Stop');
$('#audio').jWebAudio('play');
}
playing = !playing;
}
Standard Version
Run
var source = null;
var playing = false;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
playing = true;
document.getElementById('btn').disabled = false;
}
});
}
function play() {
if (playing) {
// stop
document.getElementById('btn').innerHTML = 'Play';
source.sound.stop();
} else {
// play
document.getElementById('btn').innerHTML = 'Stop';
source.sound.play();
}
playing = !playing;
}
Change volume
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
$('#volume')[0].disabled = false;
},
'volume': 50
});
}
function volumeChange() {
var vol = $('#volume')[0].value;
// set volume
$('#audio').jWebAudio('options', {
volume: parseInt(vol)
});
// get volume
$('#output').text($('#audio').jWebAudio('options').volume);
}
Standard Version
Run
var source = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
document.getElementById('volume').disabled = false;
},
'volume': 50
});
}
function volumeChange() {
var vol = document.getElementById('volume').value;
// set volume
source.sound.setVolume(parseInt(vol));
// get volume
document.getElementById('output').innerHTML =
source.sound.getVolume();
}
Set mute
jQuery Version
Run
var muted = false;
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
playing = true;
$('#btn')[0].disabled = false;
}
});
}
function mute() {
if (muted) {
// set unmuted
$('#btn').text('Mute');
$('#audio').jWebAudio('options', {
muted: false
})
} else {
// set muted
$('#btn').text('Unmute');
$('#audio').jWebAudio('options', {
muted: true
})
}
muted = $('#audio').jWebAudio('options').muted;
}
Standard Version
Run
var source = null;
var muted = false;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
document.getElementById('btn').disabled = false;
}
});
}
function mute() {
if (muted) {
// set unmuted
document.getElementById('btn').innerHTML = 'Mute';
source.sound.setMuted(false);
} else {
// set muted
document.getElementById('btn').innerHTML = 'Unmute';
source.sound.setMuted(true);
}
muted = source.sound.getMuted();
}
Set loop
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/in.wav',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
},
'loop': true
});
}
Standard Version
Run
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': '../../examples/resource/in.wav',
'preLoad': true,
'callback': function() {
source.sound.play();
},
'loop': true
});
}
Non-multishot sound can be set to loop after certain interval, which means play again after certain seconds.
jQuery Version
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'loop': true,
'loopGap': 3 // in seconds
});
Standard Version
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg'
'loop': true,
'loopGap': 3 // in seconds
});
source.sound.play();
Seek position to play
jQuery Version
Run
// duration is the length of sound, in seconds
var duration = null;
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
duration = $('#audio').jWebAudio('duration');
$('#totalSpan').text(Math.ceil(duration));
$('#posInput')[0].disabled = false;
// update position 10 times per second
setInterval(updatePos, 100);
}
});
}
function posChange() {
var pos = Math.min($('#posInput')[0]
.value / 100 * duration, duration);
// set position
$('#audio').jWebAudio('seek', pos);
}
function updatePos() {
// get position
var pos = $('#audio').jWebAudio('seek');
$('#posInput')[0].value = pos / duration * 100;
$('#posSpan').text(Math.ceil(pos));
}
Standard Version
Run
var source = null;
// duration is the length of sound, in seconds
var duration = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
duration = source.sound.duration;
document.getElementById('totalSpan').innerHTML = Math.ceil(duration);
document.getElementById('posInput').disabled = false;
// update position 10 times per second
setInterval(updatePos, 100);
}
});
}
function posChange() {
var pos = Math.min(document.getElementById('posInput')
.value / 100 * duration, duration);
// set position
source.sound.seek(pos);
}
function updatePos() {
var pos = source.sound.offset;
document.getElementById('posInput').value = pos / duration * 100;
document.getElementById('posSpan').innerHTML = Math.ceil(pos);
}
Multishot play
Short audio like gun-shooting sound may be played another time before one is ended. Rather than making more than one instance of audio, multishot enables you to play multi-times in a short period.
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/in.wav',
'multishot': true,
'preLoad': true,
'callback': function() {
$('#btn')[0].disabled = false;
}
});
}
function play() {
$('#audio').jWebAudio('play');
}
Standard Version
Run
var source = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/in.wav',
'multishot': true,
'preLoad': true,
'callback': function() {
document.getElementById('btn').disabled = false;
}
});
}
function play() {
source.sound.play();
}
Multishot stop
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'multishot': true,
'preLoad': true,
'callback': function() {
$('#playBtn')[0].disabled = false;
$('#stopBtn')[0].disabled = false;
}
});
}
function play() {
$('#audio').jWebAudio('play');
}
function stop() {
$('#audio').jWebAudio('stop');
}
Standard Version
Run
var source = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'multishot': true,
'preLoad': true,
'callback': function() {
document.getElementById('playBtn').disabled = false;
document.getElementById('stopBtn').disabled = false;
}
});
}
function play() {
source.sound.play();
}
function stop() {
source.sound.stop();
}
Sound effect
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'multishot': true,
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
}
});
}
var teleId = null;
function teleClick() {
if ($('#teleInput')[0].checked) {
teleId = $('#audio').jWebAudio('addEffect', 'telephonize');
$('#clearBtn')[0].enabled = true;
} else if (teleId !== null) {
$('#audio').jWebAudio('deleteEffect', teleId);
}
}
var cathId = null;
function cathClick() {
if ($('#cathInput')[0].checked) {
cathId = $('#audio').jWebAudio('addEffect', 'cathedral');
$('#clearBtn')[0].enabled = true;
} else if (cathId !== null) {
$('#audio').jWebAudio('deleteEffect', cathId);
}
}
function clearAll() {
$('#audio').jWebAudio('clearAllEffects');
$('#cathInput')[0].checked = false;
$('#teleInput')[0].checked = false;
$('#clearBtn')[0].enabled = false;
}
Standard Version
Run
var sound = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
sound = source.sound;
sound.play();
}
});
}
var teleId = null;
function teleClick() {
if (document.getElementById('teleInput').checked) {
teleId = sound.addEffect('telephonize');
} else if (teleId !== null) {
sound.deleteEffect(teleId);
}
}
var cathId = null;
function cathClick() {
if (document.getElementById('cathInput').checked) {
cathId = sound.addEffect('cathedral');
} else if (cathId !== null) {
sound.deleteEffect(cathId);
}
}
function clearAll() {
sound.clearAllEffects();
document.getElementById('cathInput').checked = false;
document.getElementById('teleInput').checked = false;
document.getElementById('clearBtn').enabled = false;
}
Sound effects
Create new sound effects using the combination of LOWPASS, HIGHPASS, BANDPASS, LOWSHELF, HIGHSHELF, PEAKING, NOTCH, ALLPASS.
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
}
});
}
var useEffect = false;
var id = null;
function toggleEffect() {
useEffect = !useEffect;
if (useEffect) {
id = $('#audio').jWebAudio('addEffect', {
name: 'myEffect',
options: [{
"type": jWebAudio.Filter.prototype.LOWPASS,
"frequency": 1000.0
}, {
"type": jWebAudio.Filter.prototype.HIGHPASS,
"frequency": 500.0
}]
});
} else if (id !== null) {
$('#audio').jWebAudio('deleteEffect', id);
}
}
Standard Version
Run
var source = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
}
});
}
var useEffect = false;
var id = null;
function toggleEffect() {
useEffect = !useEffect;
if (useEffect) {
id = source.sound.addEffect(new jWebAudio.Filter(
'myEffect',
[{
"type": jWebAudio.Filter.prototype.LOWPASS,
"frequency": 1000.0
}, {
"type": jWebAudio.Filter.prototype.HIGHPASS,
"frequency": 500.0
}]
));
} else if (id !== null) {
source.sound.deleteEffect(id);
}
}
3D Sound effect
3D sound effect enables you to set the position of sound source to listener.
jQuery Version
Run
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
}
});
}
var useEffect = false;
var id = null;
function toggleEffect() {
useEffect = !useEffect;
if (useEffect) {
id = $('#audio').jWebAudio('addEffect', '3d');
} else if (id !== null) {
$('#audio').jWebAudio('deleteEffect', id);
}
}
Standard Version
Run
var source = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
}
});
}
var useEffect = false;
var id = null;
function toggleEffect() {
useEffect = !useEffect;
if (useEffect) {
id = source.sound.addEffect('3d');
} else if (id !== null) {
source.sound.deleteEffect(id);
}
}
Set 3D Sound effect position
jQuery Version
Run
var effect = null;
var pos = {
x: 0,
y: 0,
z: 0
};
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
var id = $('#audio').jWebAudio('addEffect', '3d');
effect = $('#audio').jWebAudio('getEffect', id);
// enable UI
$('input').each(function() {
$(this)[0].disabled = false;
});
}
});
}
function xChange() {
var x = $('#xInput')[0].value;
$('xLabel').text(x);
pos.x = parseInt(x);
effect.soundObject.setPosition(pos.x, pos.y, pos.z);
}
function yChange() {
var y = $('#yInput')[0].value;
$('xLabel').text(y);
pos.y = parseInt(y);
effect.soundObject.setPosition(pos.x, pos.y, pos.z);
}
function zChange() {
var z = $('#zInput')[0].value;
$('zLabel').text(z);
pos.z = parseInt(z);
effect.soundObject.setPosition(pos.x, pos.y, pos.z);
}
Standard Version
Run
var source = null;
var effect = null;
var pos = {
x: 0,
y: 0,
z: 0
};
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
var id = source.sound.addEffect('3d');
effect = source.sound.getEffect(id);
// enable UI
var input = document.getElementsByTagName('input');
for (var i in input) {
input[i].disabled = false;
}
}
});
}
function xChange() {
var x = document.getElementById('xInput').value;
document.getElementById('xLabel').innerHTML = x;
pos.x = parseInt(x);
effect.soundObject.setPosition(pos.x, pos.y, pos.z);
}
function yChange() {
var y = document.getElementById('yInput').value;
document.getElementById('yLabel').innerHTML = y;
pos.y = parseInt(y);
effect.soundObject.setPosition(pos.x, pos.y, pos.z);
}
function zChange() {
var z = document.getElementById('zInput').value;
document.getElementById('zLabel').innerHTML = z;
pos.z = parseInt(z);
effect.soundObject.setPosition(pos.x, pos.y, pos.z);
}
Set 3D Sound effect velocity
jQuery Version
Run
var effect = null;
var v = {
x: 0,
y: 0,
z: 0
};
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
var id = $('#audio').jWebAudio('addEffect', '3d');
effect = $('#audio').jWebAudio('getEffect', id);
// enable UI
$('input').each(function() {
$(this)[0].disabled = false;
});
}
});
}
function xChange() {
var x = $('#xInput')[0].value;
$('#xLabel').text(x);
v.x = parseFloat(x);
effect.soundObject.setVelocity(v.x, v.y, v.z);
}
function yChange() {
var y = $('#yInput')[0].value;
$('#xLabel').text(y);
v.y = parseFloat(y);
effect.soundObject.setVelocity(v.x, v.y, v.z);
}
function zChange() {
var z = $('#zInput')[0].value;
$('#zLabel').text(z);
v.z = parseFloat(z);
effect.soundObject.setVelocity(v.x, v.y, v.z);
}
Standard Version
Run
var source = null;
var effect = null;
var v = {
x: 0,
y: 0,
z: 0
};
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
var id = source.sound.addEffect('3d');
effect = source.sound.getEffect(id);
// enable UI
var input = document.getElementsByTagName('input');
for (var i in input) {
input[i].disabled = false;
}
}
});
}
function xChange() {
var x = document.getElementById('xInput').value;
document.getElementById('xLabel').innerHTML = x;
v.x = parseFloat(x);
effect.soundObject.setVelocity(v.x, v.y, v.z);
}
function yChange() {
var y = document.getElementById('yInput').value;
document.getElementById('yLabel').innerHTML = y;
v.y = parseFloat(y);
effect.soundObject.setVelocity(v.x, v.y, v.z);
}
function zChange() {
var z = document.getElementById('zInput').value;
document.getElementById('zLabel').innerHTML = z;
v.z = parseFloat(z);
effect.soundObject.setVelocity(v.x, v.y, v.z);
}
Finish event
Finish event function is the one to be called when sound plays to the end.
jQuery Version
Run
// duration is the length of sound, in seconds
var duration = null;
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
duration = $('#audio').jWebAudio('duration');
$('#totalSpan').text(Math.ceil(duration));
$('#posInput')[0].disabled = false;
// update position 10 times per second
setInterval(updatePos, 100);
},
'finish': function() {
alert('Finished!');
$('#posInput')[0].disabled = true;
}
});
}
function posChange() {
var pos = Math.min($('#posInput')[0]
.value / 100 * duration, duration);
// set position
$('#audio').jWebAudio('seek', pos);
}
function updatePos() {
// get position
var pos = $('#audio').jWebAudio('seek');
$('#posInput')[0].value = pos / duration * 100;
$('#posSpan').text(Math.ceil(pos));
}
Standard Version
Run
var source = null;
// duration is the length of sound, in seconds
var duration = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
duration = source.sound.duration;
document.getElementById('totalSpan').innerHTML = Math.ceil(duration);
document.getElementById('posInput').disabled = false;
// update position 10 times per second
setInterval(updatePos, 100);
},
'finish': function() {
alert('Finished!');
document.getElementById('posInput').disabled = true;
}
});
}
function posChange() {
var pos = Math.min(document.getElementById('posInput')
.value / 100 * duration, duration);
// set position
source.sound.seek(pos);
}
function updatePos() {
var pos = source.sound.offset;
document.getElementById('posInput').value = pos / duration * 100;
document.getElementById('posSpan').innerHTML = Math.ceil(pos);
}
Set finish event
jQuery Version
Run
// duration is the length of sound, in seconds
var duration = null;
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
duration = $('#audio').jWebAudio('duration');
$('#totalSpan').text(Math.ceil(duration));
$('#posInput')[0].disabled = false;
// update position 10 times per second
setInterval(updatePos, 100);
}
});
$('#audio').jWebAudio('finish', function() {
alert('Finished!');
$('#posInput')[0].disabled = true;
});
}
function posChange() {
var pos = Math.min($('#posInput')[0]
.value / 100 * duration, duration);
// set position
$('#audio').jWebAudio('seek', pos);
}
function updatePos() {
// get position
var pos = $('#audio').jWebAudio('seek');
$('#posInput')[0].value = pos / duration * 100;
$('#posSpan').text(Math.ceil(pos));
}
Standard Version
Run
var source = null;
// duration is the length of sound, in seconds
var duration = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
duration = source.sound.duration;
document.getElementById('totalSpan').innerHTML = Math.ceil(duration);
document.getElementById('posInput').disabled = false;
// update position 10 times per second
setInterval(updatePos, 100);
}
});
source.finish = function() {
alert('Finished!');
document.getElementById('posInput').disabled = true;
};
}
function posChange() {
var pos = Math.min(document.getElementById('posInput')
.value / 100 * duration, duration);
// set position
source.sound.seek(pos);
}
function updatePos() {
var pos = source.sound.offset;
document.getElementById('posInput').value = pos / duration * 100;
document.getElementById('posSpan').innerHTML = Math.ceil(pos);
}
Fade in and out
Sound fade in and fade out effect when play, stop and play to the end.
jQuery Version
Run
// duration is the length of sound, in seconds
var duration = null;
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
duration = $('#audio').jWebAudio('duration');
$('#totalSpan').text(Math.ceil(duration));
$('#posInput')[0].disabled = false;
playing = true;
$('#btn')[0].disabled = false;
// update position 10 times per second
setInterval(updatePos, 100);
},
'loop': true,
'fadeIn': true,
'fadeOut': true,
'fadeInTime': 5
});
}
function posChange() {
var pos = Math.min($('#posInput')[0]
.value / 100 * duration, duration);
// set position
$('#audio').jWebAudio('seek', pos);
}
function updatePos() {
// get position
var pos = $('#audio').jWebAudio('seek');
$('#posInput')[0].value = pos / duration * 100;
$('#posSpan').text(Math.ceil(pos));
}
function play() {
if (playing) {
// pause
$('#btn').text('Play');
$('#audio').jWebAudio('stop');
} else {
// play
$('#btn').text('Stop');
$('#audio').jWebAudio('play');
}
playing = !playing;
}
Standard Version
Run
var source = null;
// duration is the length of sound, in seconds
var duration = null;
var playing = false;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
duration = source.sound.duration;
document.getElementById('totalSpan').innerHTML = Math.ceil(duration);
document.getElementById('posInput').disabled = false;
playing = true;
document.getElementById('btn').disabled = false;
// update position once per second
setInterval(updatePos, 1000);
},
'loop': true,
'fadeIn': true,
'fadeOut': true,
'fadeInTime': 5
});
}
function posChange() {
var pos = Math.min(document.getElementById('posInput')
.value / 100 * duration, duration);
// set position
source.sound.seek(pos);
}
function updatePos() {
var pos = source.sound.offset;
//console.log(pos);
document.getElementById('posInput').value = pos / duration * 100;
document.getElementById('posSpan').innerHTML = Math.ceil(pos);
}
function play() {
if (playing) {
// stop
document.getElementById('btn').innerHTML = 'Play';
source.sound.stop();
} else {
// play
document.getElementById('btn').innerHTML = 'Stop';
source.sound.play();
}
playing = !playing;
}
Set fade in and out
No sound effect when first play, because fade in is not set then. Fade in effect when seek and fade out effect when stop or plays to the end.
jQuery Version
Run
// duration is the length of sound, in seconds
var duration = null;
function onload() {
$('#audio').jWebAudio('addSoundSource', {
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
duration = $('#audio').jWebAudio('duration');
$('#totalSpan').text(Math.ceil(duration));
$('#posInput')[0].disabled = false;
playing = true;
$('#btn')[0].disabled = false;
// update position 10 times per second
setInterval(updatePos, 100);
$('#audio').jWebAudio('options', {
'fadeIn': true,
'fadeInTime': 5,
'fadeOut': true
});
},
'loop': true
});
}
function posChange() {
var pos = Math.min($('#posInput')[0]
.value / 100 * duration, duration);
// set position
$('#audio').jWebAudio('seek', pos);
}
function updatePos() {
// get position
var pos = $('#audio').jWebAudio('seek');
$('#posInput')[0].value = pos / duration * 100;
$('#posSpan').text(Math.ceil(pos));
}
function play() {
if (playing) {
// pause
$('#btn').text('Play');
$('#audio').jWebAudio('stop');
} else {
// play
$('#btn').text('Stop');
$('#audio').jWebAudio('play');
}
playing = !playing;
}
Standard Version
Run
var source = null;
// duration is the length of sound, in seconds
var duration = null;
var playing = false;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': '../../examples/resource/a.ogg',
'preLoad': true,
'callback': function() {
source.sound.play();
duration = source.sound.duration;
document.getElementById('totalSpan').innerHTML = Math.ceil(duration);
document.getElementById('posInput').disabled = false;
playing = true;
document.getElementById('btn').disabled = false;
// update position once per second
setInterval(updatePos, 1000);
// set fade here
source.sound.setFadeIn(true, 5);
// use default fading time, which is 3
source.sound.setFadeOut(true);
},
'loop': true
});
}
function posChange() {
var pos = Math.min(document.getElementById('posInput')
.value / 100 * duration, duration);
// set position
source.sound.seek(pos);
}
function updatePos() {
var pos = source.sound.offset;
//console.log(pos);
document.getElementById('posInput').value = pos / duration * 100;
document.getElementById('posSpan').innerHTML = Math.ceil(pos);
}
function play() {
if (playing) {
// stop
document.getElementById('btn').innerHTML = 'Play';
source.sound.stop();
} else {
// play
document.getElementById('btn').innerHTML = 'Stop';
source.sound.play();
}
playing = !playing;
}
Demo
Getting Started
Run jQuery version Run standard version
jquery.js and jquery.jWebAudio.js should always be included to use the jQuery version.
While standard.jWebAudio.js alone should be included to use the standard version.
jQuery Version
$('#div1').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#div1').jWebAudio('play');
}
});
Which has the same effect as the following.
$('#div1').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg'
});
$('#div1').jWebAudio('load', function() {
$('#div1').jWebAudio('play');
});
jWebAudio of jQuery version maintains chainability as jQuery does. So you may call the above functions in this way and will get all the same results.
$('#div1').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg'
}).jWebAudio('load', function() {
$('#div1').jWebAudio('play');
});
Standard Version
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg'
});
source.load(function() {
/* Play sound instantly */
source.sound.play();
});
}
Music Player
When audio control has something to do with UI control panel, as the example of Music Player shows, jQuery version is more preferable.
Sound Effects
Run jQuery version Run standard version
Multiple sound effects can be added to audio. This demo shows how to toggle telephonized sound effect.
jQuery Version
$(document).ready(function() {
$('#div1').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#div1').jWebAudio('play');
}
});
var useEffect = false;
var id = null;
$('#effectBtn').click(function() {
useEffect = !useEffect;
if (useEffect) {
id = $('#div1').jWebAudio('addEffect',
'telephonize');
} else if (id !== null) {
$('#div1').jWebAudio('deleteEffect',
id);
}
});
});
Standard Version
var source = null;
function onload() {
var engine = new jWebAudio.SoundEngine();
source = engine.addSoundSource({
'url': 'resource/a.ogg'
});
source.sound.play();
}
var useEffect = false;
var id = null;
function toggleEffect() {
useEffect = !useEffect;
if (useEffect) {
id = source.sound
.addEffect('telephonize');
} else if (id !== null) {
source.sound.deleteEffect(id);
}
}
API
Add Sound Source
This tells our library the location of the audio to be played without actually load it into memory.
If preLoad is set to be true, the audio will be loaded instantly when added. Otherwise, it won't be loaded until load is called or the first time play is called.
jQuery Version
API:
$(...).jWebAudio('addSoundSource', {
'url': ..., // string
'preLoad': ..., // boolean, optional (default false)
'callback': ..., // function, optional, only useful if preLoad is true
'multishot': ..., // boolean, optional (default false)
'loop': ..., // boolean, optional (default false)
'muted': ..., // boolean, optional (dafault false)
'volume': ..., // integer, optional (default 100)
'finish': ... // function, optional, function to be called when
// sound plays to the end
});
Example:
/* Create sound to be used later */
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'volume': 90
});
Standard Version
API:
/* SoundEngine stores all sounds instances and works like a factory */
var engine = new jWebAudio.SoundEngine();
/* addSoundSource returns instance of source */
var source = engine.addSoundSource({
'url': ..., // string or array of strings
'preLoad': ..., // boolean, optional (default false)
'callback': ..., // function, optional, only useful if preLoad is true
'multishot': ..., // boolean, optional (default false)
'loop': ..., // boolean, optional (default false)
'muted': ..., // boolean, optional (dafault false)
'volume': ..., // integer, optional (default 100)
'finish': ... // function, optional, function to be called when
// sound plays to the end
});
Example:
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg',
'volume': 90
});
In standard version, you can add more than one sound source in one command. But since every element in jQuery version contains a sound source, you cannot add more than one sound source in jQuery version.
Standard Version
var engine = new jWebAudio.SoundEngine();
var sources = engine.addSoundSource({
'url': ['resource/in.wav',
'resource/out.wav'],
'volume': 90
});
In the above example, volume is set to be 90% to both sources and returns an array of sound sources, which has two elements.
If preLoad is set to be true, all sound sources will be loaded. And if there is a callback function defined, it will be called when all sources are loaded. Note that callback function can be undefined or defined as a function, but cannot be an array of functions.
var urls = ['resource/in.wav',
'resource/out.wav'];
var engine = new jWebAudio.SoundEngine();
var sources = engine.addSoundSource({
'url': urls,
'preLoad': true,
'callback': function() {
alert('This will be called when all'
+ ' sound sources are loaded!');
}
});
To load an array of sound sources rather than using preLoad, you should pay additional attention to callback functions in load.
The following is the WRONG way to achieve this.
var urls = ['resource/in.wav',
'resource/out.wav'];
var engine = new jWebAudio.SoundEngine();
var sources = engine.addSoundSource({
'url': urls
});
for (var i in sources) {
/* This is WRONG!!! */
sources[i].load(function() {
console.log('Loaded ' + i + '!');
};
}
You may expect the above example to output 'Loaded 0!' and 'Loaded 1!' but in reality, it will output 'Loaded 1!' twice.
This is because every anonymous callback function has the onload activation object in its scope chain, referring to the same i. When onload returns, the value of i is 1 in this case, so it will output 'Loaded 1!' twice.
The right thing to do is as the following.
var urls = ['resource/in.wav',
'resource/out.wav'];
var engine = new jWebAudio.SoundEngine();
var sources = engine.addSoundSource({
'url': urls
});
for (var i in sources) {
/* This is RIGHT!!! */
sources[i].load(function(realIndex) {
return function() {
console.log('Loaded ' + realIndex
+ '!');
};
}(i);
}
See JavaScript closure and scope chain for more information.
Load
If you wish to control when to load the audio into memory, load function should be called.
You shall always call load before play.
jQuery Version
API:
// callback function is optional and will be
// called after loaded if is defined
$(...).jWebAudio('load', callback);
Example:
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg'
});
$('#audio').jWebAudio('load', function() {
alert('loaded!');
});
Standard Version
API:
// callback function is optional and will be
// called after loaded if is defined
soundSource.load(callback);
Example:
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg'
});
source.load(function() {
alert('loaded!');
});
If you wish to use callback functions when loading an array of sound sources, please refer to addSoundSource for help.
PreLoad
Load the autio when calling addSoundSource.
See play for more information.
jQuery Version
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'preLoad': true,
'callback': function() {
alert('loaded');
}
});
Standard Version
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg',
'preLoad': true,
'callback': function() {
alert('loaded');
}
});
Play
Plays a piece of audio.
You shall always call load before play.
See multishot for more information.
jQuery Version
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg'
});
$('#audio').jWebAudio('load', function() {
$('#audio').jWebAudio.('play');
});
This has the same result as the following. See preLoad for more information.
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'preLoad': true,
'callback': function() {
$('#audio').jWebAudio('play');
}
});
Standard Version
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg'
});
source.load(function() {
/* Play sound instantly */
source.sound.play();
});
This has the same result as the following. See preLoad for more information.
function onload() {
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg',
'preLoad': true,
'callback': function() {
/* Play sound instantly */
source.sound.play();
}
});
}
Sometimes, however, you may want to delay loading the audio (e.g.: loading at the start of a level and play when killing an enemy). Then, the following is what you want.
jQuery Version
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'volume': 80
});
// load audio
var loaded = false;
function onLevelStart() {
$('#audio').jWebAudio('load', function() {
loaded = true;
});
}
// play audio
function onEnemyKilled() {
if (loaded) {
$('#audio').jWebAudio('play');
}
}
Standard Version
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg',
'volume': 80
});
// load audio
var loaded = false;
function onLevelStart() {
source.load(function() {
loaded = true;
});
}
// play audio
function onEnemyKilled() {
if (loaded) {
source.sound.play();
}
}
Pause
Pauses a piece of audio.
Multishot audio cannot be paused.
jQuery Version
$('#audio').jWebAudio('pause');
Standard Version
sound.pause();
Stop
Stops a piece of audio.
Multishot audio cannot be stopped.
jQuery Version
$('#audio').jWebAudio('stop');
Standard Version
sound.stop();
Volume
Sets percentage of volume.
Volume of 100 is the default system volume. Volume of more than 100 is supported.
jQuery Version
$('#audio').jWebAudio('options', {
'volume': parseInt(100)
});
You may set other options in one command in jQuery version. But if you wish to set loop option, make sure you set before load or play. See loop for more information.
$('#audio').jWebAudio('options', {
'volume': parseInt(100),
'muted': false
});
Standard Version
// set volume
sound.setVolume(100);
// get volume
var volume = source.sound.getVolume();
Mute
Sets a piece of audio to be muted.
jQuery Version
$('#audio').jWebAudio('options', {
'muted': true
});
You may set other options in one command in jQuery version. See volume for more information.
Standard Version
// set muted
sound.setMuted(true);
// get muted
var muted = sound.getMuted();
Loop
Continue to play from the beginning once played to the end of audio.
jQuery Version
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'loop': true
});
Standard Version
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg'
'loop': true
});
source.sound.play();
Non-multishot sound can be set to loop after certain interval, which means play again after certain seconds.
jQuery Version
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'loop': true,
'loopGap': 3 // in seconds
});
Standard Version
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg'
'loop': true,
'loopGap': 3 // in seconds
});
source.sound.play();
Seek
Seeks a position to start playing.
jQuery Version
// seek to position at 10 seconds
$('#audio').jWebAudio('seek', 10);
Standard Version
// seek to position at 10 seconds
source.sound.seek(10);
// get the total length of sound, in seconds
var duration = source.sound.duration;
// get the current position of sound, in seconds
var position = source.sound.offset;
Multishot
Short audio like gun-shooting sound may be played another time before one is ended. Rather than making more than one instance of audio, multishot enables you to play multi-times in a short period.
So, once shot, you cannot pause or seek a position to play. Calling play will play a new sound and calling stop will stop all sounds.
jQuery Version
$('#audio').jWebAudio('addSoundSource', {
'url': 'resource/a.ogg',
'multishot': true
});
Standard Version
var engine = new jWebAudio.SoundEngine();
var source = engine.addSoundSource({
'url': 'resource/a.ogg',
'multishot': true
});
Sound Effects
Sound effects include telephonize and cathedral currently. And you may create new sound effects using the combination of LOWPASS, HIGHPASS, BANDPASS, LOWSHELF, HIGHSHELF, PEAKING, NOTCH, ALLPASS.
jQuery Version
// Add sound effect
// Returns id of effect
var id = $('#div1').jWebAudio('addEffect',
'telephonize');
// Delete with id
$('#div1').jWebAudio('deleteEffect', id);
// Delete all effects
$('#div1').jWebAudio('clearAllEffects');
// create user-defined sound effect
var id = $('#div1').jWebAudio('addEffect', {
name: 'myEffect',
options: [{
"type": jWebAudio.Filter.prototype.LOWPASS,
"frequency": 1000.0
}, {
"type": jWebAudio.Filter.prototype.HIGHPASS,
"frequency": 500.0
}]
});
Standard Version
// Add sound effect
// Returns id of effect
var id = sound.addEffect('telephonize');
// Delete with id
sound.deleteEffect(id);
// Delete all effects
sound.clearAllEffects();
// create user-defined sound effect
var id = sound.addEffect(new jWebAudio.Filter(
'myEffect',
[{
"type": jWebAudio.Filter.prototype.LOWPASS,
"frequency": 1000.0
}, {
"type": jWebAudio.Filter.prototype.HIGHPASS,
"frequency": 500.0
}]
));
3D Sound Effect
3D sound effect enables you to set the position of sound source to listener.
See Sound Effect for more information.
jQuery Version
var id = $('#div1').jWebAudio('addEffect', '3d');
effect = $('#div1').jWebAudio('getEffect', id);
effect.soundObject.setPosition(1, 0, 0);
Standard Version
var id = source.sound.addEffect('3d');
effect = source.sound.getEffect(id);
effect.soundObject.setPosition(1, 0, 0);
The above examples shows how to set the position of the audio source relative to the listener attribute. A 3D cartesian coordinate system is used. Default position is (0, 0, 0).
There are also other functions and attributes you may set. See specification for more information.
Fade in and fade out
Fade in makes audio starts from no sound linearly when plays and seeks, while fade out makes audio ends with no sound linearly when plays to the end or stops.
If fadeIn is set to be true (default false) but fadeInTime is not defined, then default fade in time will be used, which is 3 seconds. And it is the same with fade out.
jQuery Version
$('#audio').jWebAudio('addSoundSource', {
'url': ...,
'fadeIn': true,
'fadeOut': true,
'fadeInTime': 5 // in seconds
});
Standard Version
source = engine.addSoundSource({
'url': ...,
'fadeIn': true,
'fadeOut': true,
'fadeInTime': 5 // in seconds
});
Fade in and fade out can be changed after plays. But will only applies when next play, seek or stop is called.
jQuery Version
$('#audio').jWebAudio('options', {
'fadeIn': true,
'fadeInTime': 5,
'fadeOut': true
});
Standard Version
// set fade here
source.sound.setFadeIn(true, 5);
// use default fading time, which is 3
source.sound.setFadeOut(true);
Notice
Resource downloaded
Sound file named 'a.ogg' in examples of this site is downloaded from here under the license of Public Domain and it was made by Antonio Lotti.
Sound files named 'in.wav' and 'out.wav' in examples of this site are downloaded from http://www.mediacollege.com under Public Domain Permission.
Developed and maintained by Wenli Zhang.