Fork me on GitHub
jWebAudio
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
Original: 38.3kb Minified: 13.4kb
Standard Version
Original: 23.9kb Minified: 9.3kb
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

Run jQuery version

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.