Jump To …


Block diagram of the Electronic Gunfire Effects Generator


We use jQuery, backbone.js and some custom UI elements (namely a knob and a switch) in this application. We make these libraries available to our application using require.js.

require(["jquery", "backbone", "knob", "switch"], ($, Backbone, Knob, Switch) ->
  $(document).ready ->


This class wraps an AudioBufferSourceNode and loads the audio from a given URL.

    class Player
      constructor: (@url) ->

This BufferSource plays a white noise signal read in from a WAV file.

        @source = audioContext.createBufferSource()

      play: ->
        if @buffer

Set the buffer of a new AudioBufferSourceNode equal to the samples loaded by loadBuffer.

          @source.buffer = @buffer
          @source.loop = true
          @source.start 0

Load the samples from the provided url, decode and store in an instance variable.

      loadBuffer: ->
        self = this

        request = new XMLHttpRequest()
        request.open('GET', @url, true)
        request.responseType = 'arraybuffer'

Load the decoded sample into the buffer if the request is successful.

        request.onload = =>
          onsuccess = (buffer) ->
            self.buffer = buffer

          onerror = -> alert "Could not decode #{self.url}"

          audioContext.decodeAudioData request.response, onsuccess, onerror



Instead of using an AudioBufferSourceNode, the same effect could be achieved using a ScriptProcessorNode.

      class WhiteNoise
        constructor: (context) ->
          self = this
          @context = context
          @node = @context.createScriptProcessor(1024, 1, 2)
          @node.onaudioprocess = (e) -> self.process(e)

        process: (e) ->
          data0 = e.outputBuffer.getChannelData(0)
          data1 = e.outputBuffer.getChannelData(1)

Generate random numbers in the range of -1 to 1.

          for i in [0...data0.length]
            data0[i] = Math.random() * 2 - 1
            data1[i] = data0[i]

        connect: (destination) ->


This class uses a gain node to generate a volume ramp at specific times to simulate the attack and release time of the gunshot.

    class Envelope
      constructor: () ->
        @node = audioContext.createGain()
        @node.gain.value = 0

      addEventToQueue: () ->

Set gain to 0 "now".

        @node.gain.linearRampToValueAtTime(0, audioContext.currentTime);

Attack: ramp to 1 in 0.0001ms.

        @node.gain.linearRampToValueAtTime(1, audioContext.currentTime + 0.001);

Decay: ramp to 0.3 over 100ms.

        @node.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.101);

Release: ramp down to 0 over 500ms.

        @node.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.500);

Now we create and connect the noise to the envelope generators so that they can be triggered by the timing node. We also create 4 voices to allow shots to overlap.

    audioContext = new AudioContext

Create the noise source.

    noise = new Player("/audio/white_noise.wav")

We create 4 instances of the envelope class to provide 4 separate voices. This is necessary as if the rate of fire is very fast the envelope will not have time to reach zero before being triggered again.

    voice1 = new Envelope()
    voice2 = new Envelope()
    voice3 = new Envelope()
    voice4 = new Envelope()

Connect the noise source to the 4 voices.


Connect the voice outputs to a low-pass filter to allow a simulation of distance.

    filter = audioContext.createBiquadFilter()
    filter.type = "lowpass"
    filter.Q.value = 1
    filter.frequency.value = 800

Connect the voices to the filter.


Connect the filter to a master gain node.

    gainMaster = audioContext.createGain()
    gainMaster.gain.value = 5

Connect the gain node to the output destination.


    voiceSelect = 0
    fireRate = 1100 # 50% of 200ms to 2000ms range
    intervalTimer = null

A function to select the next voice and queue the event.

    fire = () ->
      if voiceSelect > 4 then voiceSelect = 1
      if voiceSelect == 1 then voice1.addEventToQueue()
      if voiceSelect == 2 then voice2.addEventToQueue()
      if voiceSelect == 3 then voice3.addEventToQueue()
      if voiceSelect == 4 then voice4.addEventToQueue()

A function to repeatedly fire the gunshot when the rapid fire switch is on.

    schedule = () ->
      if intervalTimer != null
        intervalTimer = setTimeout(schedule, fireRate)

Set up the controls.

    volumeKnob = new Knob(el: '#volume')
    rateOfFireKnob = new Knob(el: '#rate-of-fire')
    distanceKnob = new Knob(el: '#distance')
    multiFireSwitch = new Switch(el: '#multi-fire')
    trigger = $('#trigger')

Set the rapid fire rate.

    multiFireSwitch.on('on', =>
      intervalTimer = setTimeout(schedule, fireRate)

Clear the rapid fire function.

    multiFireSwitch.on('off', =>
      intervalTimer = null

Set the master gain value.

    volumeKnob.on('valueChanged', (v) =>
      gainMaster.gain.value = v * 20

Set the filter frequency.

    distanceKnob.on('valueChanged', (v) =>
      filter.frequency.value = 100 + (1.0 - v) * 800

Change the rate of fire. The knob provides a value from 0 to 1, from which we compute the rate of fire, in the range 2000ms to 200ms.

    rateOfFireKnob.on('valueChanged', (v) =>
      fireRate = 200 + (1.0 - v) * 1800

Trigger a single shot.