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.
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.
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.
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.
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.
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.
This tells our library the location of the audio to be played without actually load it into memory.
function onload() { $('#audio').jWebAudio('addSoundSource', { 'url': '../../examples/resource/a.ogg' }); }
function onload() { var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': '../../examples/resource/a.ogg' }); }
Add array of sound sources in standard version and add sound sources with the same class in jQuery version.
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' }); }); }
function onload() { var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': ['../../examples/resource/in.wav', '../../examples/resource/out.wav'] }); }
If you wish to control when to load the audio into memory, load function should be called.
function onload() { $('#audio').jWebAudio('addSoundSource', { 'url': '../../examples/resource/a.ogg' }); $('#audio').jWebAudio('load', function() { alert('Loaded!'); }); }
function onload() { var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': '../../examples/resource/a.ogg' }); source.load(function() { alert('Loaded!'); }); }
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); }); }); }
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 the sound when add sound source.
function onload() { $('#audio').jWebAudio('addSoundSource', { 'url': '../../examples/resource/a.ogg', 'preLoad': true, 'callback': function() { alert('Loaded!'); } }); }
function onload() { var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': '../../examples/resource/a.ogg', 'preLoad': true, 'callback': function() { alert('Loaded!'); } }); }
PreLoad two sound sources when add sound source.
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); } }); }); }
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!'); } }); }
function onload() { $('#audio').jWebAudio('addSoundSource', { 'url': '../../examples/resource/a.ogg' }); } function play() { $('#audio').jWebAudio('load', function() { $('#audio').jWebAudio('play'); }); $('#btn')[0].disabled = true; }
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; }
function onload() { $('#audio').jWebAudio('addSoundSource', { 'url': '../../examples/resource/a.ogg', 'preLoad': true, 'callback': function() { $('#audio').jWebAudio('play'); } }); }
function onload() { var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': '../../examples/resource/a.ogg', 'preLoad': true, 'callback': function() { source.sound.play(); } }); }
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; }
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; }
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'); } }); }); }
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(); } } }); }
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; }
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; }
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; }
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; }
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); }
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(); }
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; }
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(); }
function onload() { $('#audio').jWebAudio('addSoundSource', { 'url': '../../examples/resource/in.wav', 'preLoad': true, 'callback': function() { $('#audio').jWebAudio('play'); }, 'loop': true }); }
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.
$('#audio').jWebAudio('addSoundSource', { 'url': 'resource/a.ogg', 'loop': true, 'loopGap': 3 // in seconds });
var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': 'resource/a.ogg' 'loop': true, 'loopGap': 3 // in seconds }); source.sound.play();
// 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)); }
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); }
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.
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'); }
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(); }
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'); }
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(); }
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; }
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; }
Create new sound effects using the combination of LOWPASS, HIGHPASS, BANDPASS, LOWSHELF, HIGHSHELF, PEAKING, NOTCH, ALLPASS.
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); } }
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 enables you to set the position of sound source to listener.
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); } }
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); } }
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); }
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); }
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); }
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 function is the one to be called when sound plays to the end.
// 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)); }
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); }
// 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)); }
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); }
Sound fade in and fade out effect when play, stop and play to the end.
// 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; }
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; }
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.
// 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; }
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; }
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.
$('#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'); });
function onload() { var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': 'resource/a.ogg' }); source.load(function() { /* Play sound instantly */ source.sound.play(); }); }
When audio control has something to do with UI control panel, as the example of Music Player shows, jQuery version is more preferable.
Run jQuery version Run standard version
Multiple sound effects can be added to audio. This demo shows how to toggle telephonized sound effect.
$(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); } }); });
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); } }
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.
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 });
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.
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.
If you wish to control when to load the audio into memory, load function should be called.
You shall always call load before play.
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!'); });
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.
Load the autio when calling addSoundSource.
See play for more information.
$('#audio').jWebAudio('addSoundSource', { 'url': 'resource/a.ogg', 'preLoad': true, 'callback': function() { alert('loaded'); } });
var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': 'resource/a.ogg', 'preLoad': true, 'callback': function() { alert('loaded'); } });
Plays a piece of audio.
You shall always call load before play.
See multishot for more information.
$('#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'); } });
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.
$('#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'); } }
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(); } }
Pauses a piece of audio.
Multishot audio cannot be paused.
$('#audio').jWebAudio('pause');
sound.pause();
Stops a piece of audio.
Multishot audio cannot be stopped.
$('#audio').jWebAudio('stop');
sound.stop();
Sets percentage of volume.
Volume of 100 is the default system volume. Volume of more than 100 is supported.
$('#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 });
// set volume sound.setVolume(100); // get volume var volume = source.sound.getVolume();
Sets a piece of audio to be muted.
$('#audio').jWebAudio('options', { 'muted': true });
You may set other options in one command in jQuery version. See volume for more information.
// set muted sound.setMuted(true); // get muted var muted = sound.getMuted();
Continue to play from the beginning once played to the end of audio.
$('#audio').jWebAudio('addSoundSource', { 'url': 'resource/a.ogg', 'loop': true });
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.
$('#audio').jWebAudio('addSoundSource', { 'url': 'resource/a.ogg', 'loop': true, 'loopGap': 3 // in seconds });
var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': 'resource/a.ogg' 'loop': true, 'loopGap': 3 // in seconds }); source.sound.play();
Seeks a position to start playing.
// seek to position at 10 seconds $('#audio').jWebAudio('seek', 10);
// 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;
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.
$('#audio').jWebAudio('addSoundSource', { 'url': 'resource/a.ogg', 'multishot': true });
var engine = new jWebAudio.SoundEngine(); var source = engine.addSoundSource({ 'url': 'resource/a.ogg', 'multishot': true });
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.
// 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 }] });
// 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 enables you to set the position of sound source to listener.
See Sound Effect for more information.
var id = $('#div1').jWebAudio('addEffect', '3d'); effect = $('#div1').jWebAudio('getEffect', id); effect.soundObject.setPosition(1, 0, 0);
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 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.
$('#audio').jWebAudio('addSoundSource', { 'url': ..., 'fadeIn': true, 'fadeOut': true, 'fadeInTime': 5 // in seconds });
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.
$('#audio').jWebAudio('options', { 'fadeIn': true, 'fadeInTime': 5, 'fadeOut': true });
// set fade here source.sound.setFadeIn(true, 5); // use default fading time, which is 3 source.sound.setFadeOut(true);
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.