main.js

import { isMicSupported } from './feature-detection/isMicSupported.js';

var Main = (function () {
  //  audio + canvas environment variables:
  var blobs = [], // array to hold latest recording for the session
    edits = [], // array to hold latest edited recording for the session
    timer, // needed by startBtn and stopBtn
    recorder, // single instance constructed, used in many places
    audioCtx, // single session audioContext that is used in many places
    analyser, // set-up by mic, connected by on.startBtn, used by draw()
    source, // for current source <audio>: defined by 'this' when loaded
    canvas = document.getElementById('canvas'), // avoided jQuery object due to canvas issues when painting
    canvasCtx, // single session canvasContext used in MP3Recorder and draw()
    drawVisual, // requestAnimationFrame id to cancel draw() callback loop
    handledURL = window.URL || window.webkitURL, // alias to avoid overwriting the window objects themselves
    saveCount = 0, // counts saved mp3s to determine if beforeunload prompt appears
    configSampleRate, // shares dynamic sampleRate between audioCtx and edit equation
    //  authoring values:
    leftHandle, // sliding percentage to trim from audio start
    rightHandle, // sliding percentage to trim from audio end
    timeValue, // current audio time in int percentage for timeHandle
    leftFrames, // discrete n frames to trim (requires leftHandle)
    rightFrames, // discrete n frames to trim (requires rightHandle)
    totalFrames, // a constant per audio recording
    featuresResults; // results from feature detection module

  // initiate application resources
  function init() {
    // 'use strict';

    // init Web Audio API context (prefixed by AudioContextMonkeyPatch.js)
    try {
      audioCtx = new window.AudioContext();
    } catch (e) {
      alert(
        'Web Audio API not supported, please try updating or switching browsers to continue. Error: ',
        e
      );
      window.dispatchEvent(new Event('unload'));
      return;
    }

    // config recorder and connect to audio and canvas contexts
    try {
      recorder = new MP3Recorder({ bitRate: 128 });
    } catch (e) {
      alert(
        'Recorder not supported, please try updating or switching browsers to continue. Error: ',
        e
      );
      window.dispatchEvent(new Event('unload'));
      return;
    }
    // suspend audioContext until user starts recording
    // if (recorder && audioCtx.state === 'running') {
    //   audioCtx.suspend();
    // }

    // init canvas 2d context
    if (canvas.getContext) {
      canvasCtx = canvas.getContext('2d');
      // set colors here instead of inside draw() callback to avoid flickering
      canvasCtx.fillStyle = 'rgb(' + 10 + ',' + 211 + ',' + (256 >> 0) + ')';
      var gradient = canvasCtx.createLinearGradient(0, 0, 0, 300);
      gradient.addColorStop(0, 'white');
      gradient.addColorStop(1, 'red');
      canvasCtx.strokeStyle = gradient;
    } else {
      alert(
        'canvas context unsupported, please try updating or switching browsers to see visualisations'
      );
      window.dispatchEvent(new Event('unload'));
      return;
    }

    // construct slider once (updated dynamically)
    initSlider();

    // start playback/slider interval once (updated dynamically)
    initInterval();

    // init audio player controls
    initPlayerUI();

    // attach the two FileSaver.js events in init & therefore only once - avoids queued file downloads
    $('#download').on('click', function () {
      // use FileSaver.js saveAs() to stop UID.mp3 filenames
      saveAs(blobs[0], getFilename(false));
      saveCount++;
    });

    $('#download-edit').on('click', function () {
      // use FileSaver.js saveAs() to stop UID.mp3 filenames
      saveAs(edits[0], getFilename(true));
      saveCount++;
    });

    // attach listrner here to avoid double ups
    $('#edited').on('error', function (e) {
      console.log('edited error');
      alert('media error: ' + e.code + ': ' + e.message);
      window.dispatchEvent(new Event('unload'));
      return;
    });

    $('#source')
      .on('durationchange', function () {
        // keep relevant slider values up to date
        source = this;
        totalFrames = source.duration * 38.28125;

        // refresh / reset authoring values for new source
        leftHandle = 0;
        $('#slider').slider('values', 0, 0);
        rightHandle = 100;
        $('#slider').slider('values', 1, 100);
        source.currentTime = 0.0;
        timeValue = (source.currentTime / source.duration) * 100;
        $('#leftDiv, #rightDiv, #timeDiv').css('width', '0.0%');
        checkFrames();
      })
      .on('error', function (e) {
        console.log('durationchange error');
        alert('media error: ' + e.code + ': ' + e.message);
        window.dispatchEvent(new Event('unload'));
        return;
      });
  }

  /** handles Web Audio API processing and delegating to Web Worker *****************************************************/

  // inits recorder object, populate AudioContext & prepares Worker communication
  var MP3Recorder = function (config) {
    recorder = this;
    recorder.startTime = 0;
    config = config || {};
    var realTimeWorker = new Worker('./dependencies/worker-realtime.js');

    // Initializes LAME so that we can record
    this.initialize = function () {
      // let context decide sampleRate - informed by browser / hardware
      config.sampleRate = audioCtx.sampleRate;

      // save sampleRate to global to share with edit equation
      configSampleRate = config.sampleRate;

      realTimeWorker.postMessage({ cmd: 'init', config: config });
    };
    // This function finalizes LAME output and saves the MP3 data to a file
    var microphone, processor;

    // Function that handles getting audio out of the browser's media API
    function beginRecording(stream) {
      // Set up Web Audio API to process data from the media stream (microphone)
      // optional: setting a bufferSize of 0 instructs the browser to choose the best bufferSize
      // note: Webkit version 31 requires that a valid bufferSize be passed when calling this method

      // set bufferSize to largest size to avoid all mobile noise artifacts (at the possible expense of latency)
      processor = audioCtx.createScriptProcessor(16384, 1, 1); // (16384 = largest buffer possible)
      analyser = audioCtx.createAnalyser();

      // for each bufferSize of raw audio (while recording), send it to Worker to be encoded with LAME
      processor.onaudioprocess = function (event) {
        realTimeWorker.postMessage({
          cmd: 'encode',
          buf: event.inputBuffer.getChannelData(0)
        });
      };

      // iOS likes createMediaStreamSource to go after processor code...arbitrarily AFAIK
      microphone = audioCtx.createMediaStreamSource(stream);

      // Begin retrieving microphone data
      microphone.connect(analyser);
      microphone.connect(processor);
      processor.connect(audioCtx.destination);
    }

    // Return a function which will stop recording and return all MP3 data
    this.stop = function () {
      if (processor && microphone) {
        // Clean up the Web Audio API resources
        microphone.disconnect();
        processor.disconnect();
        analyser.disconnect();
        // Return the buffers array. Note that there may be more Worker buffers pending
        processor.onaudioprocess = null;
      }
    };

    // Function for kicking off recording on 'start' click
    // refactored for promise-based MediaDevices and polyfilled
    this.start = function (onSuccess, onError) {
      // Request access to the microphone
      window.navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then(function (stream) {
          // Begin recording and get a function that stops the recording
          var stopRecording = beginRecording(stream);
          recorder.startTime = Date.now();
          if (onSuccess && typeof onSuccess === 'function') {
            onSuccess();
          }
          // Run a function every 100 ms to update the UI and dispose it after 5 seconds
        })
        .catch(function (error) {
          if (onError && typeof onError === 'function') {
            onError(error);
            return;
          }
        });
    };

    var mp3ReceiveSuccess, currentErrorCallback;

    this.getMp3Blob = function (onSuccess, onError) {
      currentErrorCallback = onError;
      mp3ReceiveSuccess = onSuccess;
      realTimeWorker.postMessage({ cmd: 'finish' });
    };

    realTimeWorker.onmessage = function (e) {
      switch (e.data.cmd) {
        case 'end':
          if (mp3ReceiveSuccess) {
            mp3ReceiveSuccess(new Blob(e.data.buf, { type: 'audio/mpeg' }));
          }
          break;
        case 'error':
          if (currentErrorCallback) {
            currentErrorCallback(e.data.error);
          }
          break;
        default:
          alert(
            'Web Worker received a message it does not know how to handle: ' +
              e.data
          );
      }
    };
    this.initialize();
  };

  /** canvas visualisation function *************************************************************************************/

  // repeatedly called from requestAnimationFrame callback
  function draw() {
    // 'use strict';

    // callback to parent function gives requestAnimationFrame control over draws per second (aims at 60fps)
    drawVisual = window.requestAnimationFrame(draw);

    // clear canvas before drawing
    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);

    // get byte-based array data
    var bytes = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(bytes);

    // create bouncing colored bars
    for (var i = 1; i < bytes.length; i++) {
      canvasCtx.fillStyle = 'rgb(' + i + ',' + 211 + ',' + (256 >> 0) + ')';
      canvasCtx.strokeRect(i, canvas.height - bytes[i] / 2, 10, canvas.height);
      canvasCtx.fillRect(i, canvas.height - bytes[i] / 1.8, 10, canvas.height);
    }
  }

  /** slider, authoring and playback functions [interelated] ************************************************************/

  // init jquery-ui slider
  function initSlider() {
    // 'use strict';

    // reveal DOM slider
    $('#slider').slider({
      step: 0.1,
      range: false,
      animate: false, // true = inconsistent due to interference from setInterval mapping currentTime to CSS
      values: [0.0, 100.0, 0.0], // jquery gives lowest index value precedence upon overlap

      // define convienient handle id's to target for editing and playback
      create: function () {
        $('.ui-slider-handle').eq(0).attr('id', 'leftHandle');
        $('.ui-slider-handle').eq(1).attr('id', 'rightHandle');
        // give timeHandle the highest index value so that editHandles get UI selection priority
        $('.ui-slider-handle').eq(2).attr('id', 'timeHandle');
      },

      // restrict handles from sliding over each other update editing values
      slide: function (event, ui) {
        // force mapping timeHandle ⇌ currentTime while user is dragging timeHandle
        if ($('#timeHandle').hasClass('ui-state-active')) {
          source.currentTime = (source.duration / 100) * ui.values[2];
        }

        // if left/right Handles get too close to overlapping, return false to stop slide
        if (
          ui.values[0] + 2 >= ui.values[1] ||
          ui.values[1] <= ui.values[0] + 2
        ) {
          // force mouseup so timeHandle is not dragged past its bounds
          $('#leftHandle').trigger('mouseup');
          return false;
        }

        // attempt to smooth currentTime animation when being dragged forward by leftHandle.
        // needs to update currentTime from here and not interfere with setIntervals job of
        // watching currentTime changes driven by playback rather than slider user actions.

        // real solution: divide up control such that when user is sliding & this loop runs which:
        // dictates handle css + handle value + time value and BLOCKS setIntervals updates.
        // however when !source.paused, let setInterval and timeValue drive css + values.

        // if (ui.values[2] <= ui.values[0]) {
        //     ui.values[2] = (0.1 + ui.values[0]);
        //     $('#timeHandle').css('left', (ui.values[2] + '\%'));
        // needs to somehow timeValue = ui.values[2]
        // }

        // color edit handle divs
        $('#leftDiv').css('width', ui.values[0] + '%');
        $('#rightDiv').css('width', 100 - ui.values[1] + '%');
      },

      // refresh frame values when handles are explicitly moved by the user
      stop: function (event, ui) {
        checkFrames();
        // fixes a removing-your-finger bug on some touch screens
        $('.ui-slider-handle').blur();
      }
    });
  }

  // check frame values are mapped to current slider values
  function checkFrames() {
    // 'use strict';
    leftFrames = (totalFrames / 100) * leftHandle;
    rightFrames = (totalFrames / 100) * (100 - rightHandle);

    // check for meaningful values, enable/disable edit button
    if (leftFrames === 0 && rightFrames === 0) {
      $('#editBtn').css('pointer-events', 'none');
    } else {
      $('#editBtn').css('pointer-events', 'auto');
    }
  }

  // set up playerUI
  function initPlayerUI() {
    // 'use strict';

    // prepare player
    $('#pause, #muted').hide();
    $('#duration').html('0:00');

    // remembers pre-muted volume value and muted status
    var preMuted, muted;

    $('#source').on('loadedmetadata', function () {
      preMuted = parseFloat(source.volume);
    });

    // volume vontrol
    $('#volume').on('input', function () {
      source.volume = parseFloat(this.value / 10);

      if (source.volume !== 0 && muted === true) {
        muted = false;
        $('#volume-btn, #muted').toggle();
        source.volume = parseFloat(this.value / 10);
      }
    });

    $('#volume-btn').on('click', function () {
      muted = true;
      preMuted = parseFloat(source.volume);
      source.volume = parseFloat(0);
      $('#volume').value = 0;
      $('#volume-btn, #muted').toggle();
    });

    $('#muted').on('click', function () {
      muted = false;
      source.volume = preMuted;
      $('#volume').value = preMuted * 10;
      $('#volume-btn, #muted').toggle();
    });

    // play button
    $('#play').on('click', function () {
      // store a time value for reference with setTimeout
      var time = source.currentTime;
      $('#play, #pause').toggle();

      source
        .play()
        .then(function () {
          setTimeout(function () {
            // if after 30ms the source time has not changed give it a refresh and a nudge
            if (time === source.currentTime) {
              resetSlider(leftHandle, rightHandle);
              checkFrames();
              // seperate function to try avoid a ...play().then().play()... loop when timeHandle gets stuck
              resumePlay();
            }
          }, 30); // > 26ms allows setInterval to update time value
        })
        .catch(function () {
          $('#play, #pause').toggle();
        });

      $('#play').blur();
    });

    //pause button
    $('#pause').on('click', function () {
      source.pause();
      $('#play, #pause').toggle();
    });
  }

  // seperated purely to try avoid a ...play().then().play()... loop when timeHandle gets stuck
  function resumePlay() {
    source.play();
  }

  // tries to re-calibrate the slider if playerUI gets stuck / loses track
  function resetSlider(left, right) {
    // refresh handle positions
    source.pause();

    leftHandle = left;
    $('#slider').slider('values', 0, left);
    rightHandle = right;
    $('#slider').slider('values', 1, right);

    // bump timeHandle off of leftHandle to stop Firefox Mobile getting stuck
    source.currentTime = source.currentTime + 0.001;
  }

  // runs once on repeat to keep handle values up to date and within range
  function initInterval() {
    // 'use strict';

    setInterval(function () {
      // only runs if interval has some audio to affect
      if (source) {
        // timeValue (int) is given to both timeHandle value & CSS position
        timeValue = (source.currentTime / source.duration) * 100;

        // add percentage and update position
        $('#timeHandle').css('left', timeValue + '%');
        // assigns up-to-date timeValue to timeHandle
        $('#slider').slider('values', 2, timeValue.toFixed(1));
        // color time div width
        $('#timeDiv').css('width', timeValue.toFixed(1) + '%');

        // keep these top-scope variables up-to-date for other authoring/playback functions
        leftHandle = $('#slider').slider('values')[0];
        rightHandle = $('#slider').slider('values')[1];

        // set lower-bound of currentTime to wherever leftHandle currently is
        if (source.currentTime < (source.duration / 100) * leftHandle) {
          source.currentTime = (source.duration / 100) * leftHandle + 0.005;
          resetSlider(leftHandle, rightHandle);
          $('#play').show();
          $('#pause').hide();
        }

        // set upper-bound of currentTime to wherever rightHandle currently is
        if (source.currentTime > (source.duration / 100) * rightHandle) {
          source.currentTime = (source.duration / 100) * leftHandle + 0.005;
          resetSlider(leftHandle, rightHandle);
          $('#play').show();
          $('#pause').hide();
        }

        // if playback reaches the end, reset currentTime and buttons
        if (source.currentTime === source.duration) {
          source.currentTime = 0;
          source.pause();
          $('#pause').hide();
          $('#play').show();
        }

        // get minutes and seconds
        var s = parseInt(source.currentTime % 60);
        var m = parseInt((source.currentTime / 60) % 60);

        // add 0 if seconds less than 10
        if (s < 10) {
          s = '0' + s;
        }

        // update duration
        $('#duration').html(m + ':' + s);
      }
    }, 26); // ms is exactly 1 mp3 frame and the fastest possible event rate of 'timeupdate' that I am circumventing
  }

  /** edit and upload functions and their respective button functions ***************************************************/

  // returns semantic filename for up/downloads
  // note: required removing 'filename = mediaid + fileExt;' from UploadHandler.ashx to stop it overriding filenames
  function getFilename(ifEdit) {
    // check if filename is for an edited mp3
    var string = '';
    if (ifEdit === true) {
      string = 'edit_';
    }

    var date = new Date();
    var filename =
      'recording_' +
      string +
      date.getDate() +
      '.' +
      (1 + date.getMonth()) +
      '.' +
      date.getFullYear() +
      '.mp3';
    return filename;
  }

  // pass current source blob to edit function
  $('#editBtn').on('click', function (e) {
    e.preventDefault();
    edit(blobs[blobs.length - 1]);
  });

  function edit(blob2edit) {
    // 'use strict';

    // check for previous blob to revoke URL and then delete
    if (edits.length > 0) {
      handledURL.revokeObjectURL(edits[edits.length - 1]);
      edits.splice(edits.length - 1, 1);
    }

    // mp3 seconds per frame = 0.026             (constant)
    // CBR mp3 at a 128,000 bitRate              (constant)
    // 1152 samples per frame                    (constant)
    // 1152 / 8 = 144 bits per sample            (constant)

    // 'bits / frame = frame_size * bit_rate / sample_rate' - http://lame.sourceforge.net/tech-FAQ.txt
    //  417.95918367 = 144        * 128000   / 44100
    //  new b/f rate = 144        * x        / x

    // Web Audio API sampleRate can be changed according to browser/hardware detection, so use audioCtx value
    var bitsPerFrame = 144 * (128000 / configSampleRate);

    // get closest quantity of bits to the nearest byte - http://lame.sourceforge.net/tech-FAQ.txt
    // note: if (padding-bit) {use .round} else {use .floor}
    var leftBytes = Math.round(leftFrames * bitsPerFrame);
    var rightBytes = Math.round(rightFrames * bitsPerFrame);

    // protect from slicing by -0
    if (rightBytes === 0) {
      rightBytes = blob2edit.size;
    } else {
      rightBytes = -rightBytes;
    }

    // trim n bytes, equal to the nearest n mp3 frames, equal to the sliding percent values set by the user
    try {
      var newEdit = blob2edit.slice(leftBytes, rightBytes, 'audio/mpeg');
      newEdit.name = getFilename(true);
      edits.push(newEdit);
    } catch (e) {
      alert('failed to create edit, please try again. error: ' + e);
      // clear edits array
      edits = [];
    } finally {
      if (edits.length > 0) {
        try {
          // create URL object
          var editURL = handledURL.createObjectURL(edits[edits.length - 1]);

          // attach new src and reveal audio element
          $('#edited').attr('src', editURL).css('display', 'block');

          // pause playback before modal overlay
          if (!source.paused) {
            source.pause();
            $('#play').show();
            $('#pause').hide();
          }

          // present 'Keep / Discard' dialog modal
          $('#keep-discard').dialog({
            title: 'Your Edited Audio',
            modal: true,
            closeOnEscape: true,
            minWidth: 310,
            buttons: [
              {
                text: 'Keep',
                click: function () {
                  upload(edits[edits.length - 1], true);
                  $('#keep-discard').dialog('close');
                }
              },
              {
                text: 'Discard',
                click: function () {
                  handledURL.revokeObjectURL(edits[edits.length - 1]);
                  edits.pop();
                  $('#keep-discard').dialog('close');
                }
              }
            ]
          });

          // fixes odd auto-highlighting bug on download button (without removing <a> highlighting)
          $('#download-edit').blur();
          $('#edited').focus();
          $('#edited').blur();
        } catch (e) {
          alert('failed to display your edit, please try again');
          console.log('edit blobURL error: ', e);
          // clear edits array
          edits = [];
        }
      } else {
        alert('failed to create an mp3 of your edit, please try again');
        // clear edits array
        edits = [];
      }
    }
  }

  // pass current source blob to upload function
  $('#upBtn').on('click', function (e) {
    e.preventDefault();
    upload(blobs[blobs.length - 1], false);
  });

  //   function upload(blob2upload, ifEdit) {
  ('use strict');

  // prepare blob for form upload
  // var formData = new FormData();
  // check for edited mp3 and change filename accordingly
  // if (ifEdit === true) {
  //   formData.append('blob', blob2upload, getFilename(true));
  // } else {
  //   formData.append('blob', blob2upload, getFilename(false));
  // }

  // // upload to server with no added type-processing
  // $.ajax({
  //   type: 'POST',
  //   url: 'UploadHandler.ashx',
  //   headers: {
  //     'x-user-id': 'custom-value'
  //     // 'x-zone-id': 'custom-value'
  //   },
  //   data: formData,
  //   cache: false,
  //   processData: false, // tell jQuery not to process the data
  //   contentType: false, // tell jQuery not to set a contentType
  //   success: function (data) {
  //     saveCount++;
  //     alert('Your recording has been sent to your Media Manager');
  //   },
  //   error: function (error) {
  //     alert('Could not upload your audio, please try again or contact us.');
  //     console.log('Upload error message: ' + error);
  //   }
  // });
  //   }

  /** Start initiates recording, Stop gets and presents blob  ***********************************************************/

  $('#startBtn').on('click', function (e) {
    e.preventDefault();
    // run feature test module on user click
    // check if results already exist
    if (!featuresResults) {
      featuresResults = isMicSupported();
      // async not handled for featuresResults.support yet
      // will will still appear in log after a split second or so
      console.log(featuresResults);
    }

    // iOS will only allow recording in direct response to a user gesture
    if (audioCtx.state === 'suspended') {
      audioCtx.resume();
    }

    // this stops possibility of qeueing multiple overlapping recordings at once by
    // forcing users to resolve getUserMedia prompt before allowing more start clicks
    $('#startBtn').attr('pointer-events', 'none');

    var btn = $(this);

    recorder.start(
      function () {
        $('#timer, #bg').css('visibility', 'visible');
        // start timer
        var start = 0,
          s = 0,
          m = 0;
        //Add 0 if seconds less than 10
        if (s < 10) {
          s = '0' + s;
        }

        timer = setInterval(function () {
          start++;
          // get minutes and seconds
          s = parseInt(start % 60);
          m = parseInt((start / 60) % 60);
          // add 0 if seconds less than 10
          if (s < 10) {
            s = '0' + s;
          }
          updateTimer();
        }, 1000);

        var updateTimer = function () {
          $('#timer').text(m + ':' + s);
        };

        updateTimer();

        // return clickable property to start button
        $('#startBtn').attr('pointer-events', 'auto');

        // kick-off drawing: requestAnimationFrame callback drives animation from within draw();
        draw();

        // swap out start button for stop button
        $('#startBtn, #stopBtn').toggle();
      },
      function (e) {
        // reset context and buttons
        if (audioCtx.state === 'running') {
          audioCtx.suspend();
        }
        // swap out start button for stop button
        // $('#startBtn, #stopBtn').toggle();

        alert(
          e,
          'Could not make use of your microphone, please check your hardware is working:'
        );
        window.dispatchEvent(new Event('unload'));
        return;
      }
    );
  });

  $('#stopBtn').on('click', function (e) {
    // 'use strict';
    e.preventDefault();

    // if source was playing, reset pause/play buttons
    if (source && !source.paused) {
      $('#play').show();
      $('#pause').hide();
    }

    // cancel animation callback
    window.cancelAnimationFrame(drawVisual);
    // stop timer
    clearInterval(timer);
    // stop recorder
    recorder.stop();

    // swap out stop button for start button
    $(this).css('display', 'none');
    $('#startBtn').css('display', 'inline-block');

    recorder.getMp3Blob(function (blob) {
      // check for previous blob to revoke URL and then delete
      if (blobs.length > 0) {
        handledURL.revokeObjectURL(blobs[blobs.length - 1]);
        blobs.splice(blobs.length - 1, 1);
      }

      // check if the recording is broken via empty buffers
      if (blob.size === 0) {
        alert('there was a problem with the recording, please try again');
      } else {
        blob.name = getFilename(false);
        blobs.push(blob);
      }

      try {
        // create URL object
        var blobURL = handledURL.createObjectURL(blobs[blobs.length - 1]);
      } catch (e) {
        alert('could not display your recording please try again. error: ' + e);
      } finally {
        if (blobURL) {
          // attach blobURL and use new audio.src to update authoring values
          $('#source').attr('src', blobURL);
        } else {
        }
      }
    });

    if (audioCtx.state === 'running') {
      audioCtx.suspend();
    }

    // reveal UI elements
    $('#slide-wrap, #slider, #playerUI, #storeBtn, #upBtn, #editBtn').css(
      'visibility',
      'visible'
    );
  });

  /** resource unload functions and call to init() **********************************************************************/

  // jQuery appears to have removed their beforeunload API entries, so using vanilla JS to be safe
  window.addEventListener('beforeunload', function (e) {
    // if the user has made a recording but has not uploaded, offer a 'are you sure'
    if (blobs.length !== 0 && saveCount === 0) {
      var confirmationMessage =
        'Are you sure you want to leave? Any unsaved recordings will be lost';

      e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
      return confirmationMessage; // Gecko, WebKit, Chrome <34
    }
  });

  $(window).on('unload', function () {
    console.log('unloading resources..');
    // unload URL objects
    handledURL.revokeObjectURL(edits[edits.length - 1]);
    handledURL.revokeObjectURL(blobs[blobs.length - 1]);

    // delete session array blobs
    blobs = [];
    edits = [];

    // force stop --> disconnect nodes (Zhuker warns this may not empty all Web Worker buffers)
    recorder.stop();

    // close audio context
    audioCtx.close();
  });

  // initiate required resources
  init();
})();