text: 'use strict';
  
  // Create an instance
  var wavesurfer = Object.create(WaveSurfer);
  
  // Init & load audio file
  document.addEventListener('DOMContentLoaded', function () {
      var options = {
          container     : document.querySelector('#waveform'),
          waveColor     : 'violet',
          progressColor : 'purple',
          cursorColor   : 'navy'
      };
  
      if (location.search.match('scroll')) {
          options.minPxPerSec = 100;
          options.scrollParent = true;
      }
  
      // Init
      wavesurfer.init(options);
      // Load audio from URL
      // wavesurfer.load('example/media/demo.wav');
  
      // Regions
      if (wavesurfer.enableDragSelection) {
          wavesurfer.enableDragSelection({
              color: 'rgba(0, 255, 0, 0.1)'
          });
      }
  });
  
  // Play at once when ready
  // Won't work on iOS until you touch the page
  wavesurfer.on('ready', function () {
      //wavesurfer.play();
  });
  
  // Report errors
  wavesurfer.on('error', function (err) {
      console.error(err);
  });
  
  // Do something when the clip is over
  wavesurfer.on('finish', function () {
      console.log('Finished playing');
  });
  
  
  /* Progress bar */
  document.addEventListener('DOMContentLoaded', function () {
      var progressDiv = document.querySelector('#progress-bar');
      var progressBar = progressDiv.querySelector('.progress-bar');
  
      var showProgress = function (percent) {
          progressDiv.style.display = 'block';
          progressBar.style.width = percent + '%';
      };
  
      var hideProgress = function () {
          progressDiv.style.display = 'none';
      };
  
      wavesurfer.on('loading', showProgress);
      wavesurfer.on('ready', hideProgress);
      wavesurfer.on('destroy', hideProgress);
      wavesurfer.on('error', hideProgress);
  });
  
  
  // Drag'n'drop
  document.addEventListener('DOMContentLoaded', function () {
      var toggleActive = function (e, toggle) {
          e.stopPropagation();
          e.preventDefault();
          toggle ? e.target.classList.add('wavesurfer-dragover') :
              e.target.classList.remove('wavesurfer-dragover');
      };
  
      var handlers = {
          // Drop event
          drop: function (e) {
              toggleActive(e, false);
  
              // Load the file into wavesurfer
              if (e.dataTransfer.files.length) {
                  wavesurfer.loadBlob(e.dataTransfer.files[0]);
              } else {
                  wavesurfer.fireEvent('error', 'Not a file');
              }
          },
  
          // Drag-over event
          dragover: function (e) {
              toggleActive(e, true);
          },
  
          // Drag-leave event
          dragleave: function (e) {
              toggleActive(e, false);
          }
      };
  
      var dropTarget = document.querySelector('#drop');
      Object.keys(handlers).forEach(function (event) {
          dropTarget.addEventListener(event, handlers[event]);
      });
  });
  