lint: disable and replace usage of var (katspaugh#2136)

* lint: disable and replace usage of var

* examples: use let or const instead of var

* tests: use let or const instead of var

* address review comment

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
         'comma-spacing': ["error", { "before": false, "after": true }],
         'no-console': 1,
         'no-unused-vars': 'off',
+        'no-var': 'error',
         'no-unreachable': 2,
         'no-extra-semi': "error",
         'no-multi-spaces': "error",

example/angular-material/main.js

@@ -19,7 +19,7 @@
                     '../elan/transcripts/001z.mp3'
                 ];
                 $scope.longList = [];
-                for (var i = 0; i < 100; i++) {
+                for (let i = 0; i < 100; i++) {
                     $scope.longList.push({
                         title: 'Long List test: ' + i,
                         url: $scope.urls[Math.floor(3 * Math.random())]

example/angular-material/wavesurfer.directive.js

@@ -10,7 +10,7 @@
      * Main module, your application should depend on this
      * @module {mdWavesurfer}
      */
-    var app = angular.module('mdWavesurfer', ['ngMaterial']);
+    let app = angular.module('mdWavesurfer', ['ngMaterial']);
 
     /**
      * @ngdoc service
@@ -45,9 +45,9 @@
         function($q, $document, $timeout) {
             return {
                 getLength: function(object) {
-                    var deferred = $q.defer();
-                    var estimateLength = function(url) {
-                        var audio = $document[0].createElement('audio');
+                    let deferred = $q.defer();
+                    let estimateLength = function(url) {
+                        let audio = $document[0].createElement('audio');
                         audio.src = url;
                         audio.addEventListener(
                             'loadeddata',
@@ -100,8 +100,8 @@
                 return '00:00';
             }
 
-            var minutes = Math.floor(input / 60);
-            var seconds = Math.floor(input) % 60;
+            const minutes = Math.floor(input / 60);
+            const seconds = Math.floor(input) % 60;
 
             return (
                 (minutes < 10 ? '0' : '') +
@@ -117,7 +117,7 @@
         '$attrs',
         '$element',
         function(attributes, $element) {
-            var audio = this;
+            let audio = this;
 
             audio.tracks = [];
             audio.selectedIndex = audio.selectedIndex || 0;
@@ -136,15 +136,15 @@
 
             //remove audio track
             audio.removeTrack = function(trackScope) {
-                var idx = audio.tracks.indexOf(trackScope);
+                const idx = audio.tracks.indexOf(trackScope);
                 if (idx >= 0) {
                     audio.tracks.splice(idx, 1);
                 }
             };
 
             audio.playerProperties = {};
-            var nKey;
-            for (var attr in attributes) {
+            let nKey;
+            for (let attr in attributes) {
                 if (attr.match(/^player/)) {
                     nKey = attr.replace(/^player([A-Z])/, function(m, $1) {
                         return $1.toLowerCase();
@@ -153,13 +153,13 @@
                 }
             }
 
-            var getPlayer = function() {
+            let getPlayer = function() {
                 return $element
                     .find('md-wavesurfer-player')
                     .controller('mdWavesurferPlayer');
             };
-            var setAutoPlay = function(forcePlay) {
-                var controller = getPlayer();
+            let setAutoPlay = function(forcePlay) {
+                let controller = getPlayer();
                 if (
                     controller &&
                     (forcePlay || controller.surfer.isPlaying())
@@ -170,7 +170,7 @@
             audio.setTrack = function(idx, forcePlay) {
                 if (audio.tracks.length > idx) {
                     if (audio.selectedIndex === idx) {
-                        var ctrl = getPlayer();
+                        let ctrl = getPlayer();
                         ctrl.surfer.playPause();
                     } else {
                         setAutoPlay(forcePlay);
@@ -309,7 +309,7 @@
         '$interval',
         '$mdTheming',
         function($element, $scope, attributes, $interval, $mdTheme) {
-            var control = this,
+            let control = this,
                 timeInterval;
 
             control.themeClass = 'md-' + $mdTheme.defaultTheme() + '-theme';
@@ -323,11 +323,11 @@
                 }
             };
 
-            var initWaveSurfer = function() {
+            let initWaveSurfer = function() {
                 control.isReady = false;
                 control.currentTime = 0;
                 if (!control.surfer) {
-                    var options = {
+                    let options = {
                             container: $element[0].querySelector(
                                 '.waveSurferWave'
                             )
@@ -371,7 +371,7 @@
                 control.surfer.load(control.src);
             };
 
-            var startInterval = function() {
+            let startInterval = function() {
                     timeInterval = $interval(function() {
                         control.currentTime = control.isReady
                             ? control.surfer.getCurrentTime()
@@ -399,7 +399,7 @@
 
             $scope.$watch(
                 function() {
-                    var div = $element[0].querySelector('.audioPlayerWrapper');
+                    let div = $element[0].querySelector('.audioPlayerWrapper');
                     return div ? div.offsetWidth : 0;
                 },
                 function(width) {

example/angular/app.js

@@ -1,6 +1,6 @@
 /* global angular */
 
-var app = angular.module('ngWavesurfer', []);
+let app = angular.module('ngWavesurfer', []);
 
 app.directive('ngWavesurfer', function() {
     return {
@@ -9,8 +9,8 @@ app.directive('ngWavesurfer', function() {
         link: function($scope, $element, $attrs) {
             $element.css('display', 'block');
 
-            var options = angular.extend({ container: $element[0] }, $attrs);
-            var wavesurfer = WaveSurfer.create(options);
+            let options = angular.extend({ container: $element[0] }, $attrs);
+            let wavesurfer = WaveSurfer.create(options);
 
             if ($attrs.url) {
                 wavesurfer.load($attrs.url, $attrs.data || null);
@@ -22,7 +22,7 @@ app.directive('ngWavesurfer', function() {
 });
 
 app.controller('PlaylistController', function($scope) {
-    var activeUrl = null;
+    let activeUrl = null;
 
     $scope.paused = true;
 

example/annotation/app.js

@@ -1,7 +1,7 @@
 /**
  * Create a WaveSurfer instance.
  */
-var wavesurfer;
+let wavesurfer;
 
 /**
  * Init & load.
@@ -87,8 +87,8 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     /* Toggle play/pause buttons. */
-    var playButton = document.querySelector('#play');
-    var pauseButton = document.querySelector('#pause');
+    let playButton = document.querySelector('#play');
+    let pauseButton = document.querySelector('#pause');
     wavesurfer.on('play', function() {
         playButton.style.display = 'none';
         pauseButton.style.display = '';
@@ -105,7 +105,7 @@ document.addEventListener('DOMContentLoaded', function() {
 function saveRegions() {
     localStorage.regions = JSON.stringify(
         Object.keys(wavesurfer.regions.list).map(function(id) {
-            var region = wavesurfer.regions.list[id];
+            let region = wavesurfer.regions.list[id];
             return {
                 start: region.start,
                 end: region.end,
@@ -131,23 +131,23 @@ function loadRegions(regions) {
  */
 function extractRegions(peaks, duration) {
     // Silence params
-    var minValue = 0.0015;
-    var minSeconds = 0.25;
+    const minValue = 0.0015;
+    const minSeconds = 0.25;
 
-    var length = peaks.length;
-    var coef = duration / length;
-    var minLen = minSeconds / coef;
+    let length = peaks.length;
+    let coef = duration / length;
+    let minLen = minSeconds / coef;
 
     // Gather silence indeces
-    var silences = [];
+    let silences = [];
     Array.prototype.forEach.call(peaks, function(val, index) {
         if (Math.abs(val) <= minValue) {
             silences.push(index);
         }
     });
 
     // Cluster silence values
-    var clusters = [];
+    let clusters = [];
     silences.forEach(function(val, index) {
         if (clusters.length && val == silences[index - 1] + 1) {
             clusters[clusters.length - 1].push(val);
@@ -157,21 +157,21 @@ function extractRegions(peaks, duration) {
     });
 
     // Filter silence clusters by minimum length
-    var fClusters = clusters.filter(function(cluster) {
+    let fClusters = clusters.filter(function(cluster) {
         return cluster.length >= minLen;
     });
 
     // Create regions on the edges of silences
-    var regions = fClusters.map(function(cluster, index) {
-        var next = fClusters[index + 1];
+    let regions = fClusters.map(function(cluster, index) {
+        let next = fClusters[index + 1];
         return {
             start: cluster[cluster.length - 1],
             end: next ? next[0] : length - 1
         };
     });
 
     // Add an initial region if the audio doesn't start with silence
-    var firstCluster = fClusters[0];
+    let firstCluster = fClusters[0];
     if (firstCluster && firstCluster[0] != 0) {
         regions.unshift({
             start: 0,
@@ -180,7 +180,7 @@ function extractRegions(peaks, duration) {
     }
 
     // Filter regions by minimum length
-    var fRegions = regions.filter(function(reg) {
+    let fRegions = regions.filter(function(reg) {
         return reg.end - reg.start >= minLen;
     });
 
@@ -213,7 +213,7 @@ function randomColor(alpha) {
  * Edit annotation for a region.
  */
 function editAnnotation(region) {
-    var form = document.forms.edit;
+    let form = document.forms.edit;
     form.style.opacity = 1;
     (form.elements.start.value = Math.round(region.start * 10) / 10),
     (form.elements.end.value = Math.round(region.end * 10) / 10);
@@ -250,8 +250,8 @@ function showNote(region) {
  * Bind controls.
  */
 window.GLOBAL_ACTIONS['delete-region'] = function() {
-    var form = document.forms.edit;
-    var regionId = form.dataset.region;
+    let form = document.forms.edit;
+    let regionId = form.dataset.region;
     if (regionId) {
         wavesurfer.regions.list[regionId].remove();
         form.reset();

example/audio-element/main.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // Create an instance
-var wavesurfer;
+let wavesurfer;
 
 // Init & load audio file
 document.addEventListener('DOMContentLoaded', function() {

example/bars/index.html

@@ -19,7 +19,7 @@
 
     <!-- Demo -->
     <script src="main.js"></script>
-    
+
     <!-- highlight.js for syntax highlighting in this example -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
@@ -61,7 +61,7 @@ <h3>Bars example</h3>
             <p>Draws a waveform with bars.</p>
 
             <p>
-                <pre><code>var wavesurfer = WaveSurfer.create({
+                <pre><code>let wavesurfer = WaveSurfer.create({
     container: document.querySelector('#waveform'),
     barWidth: 2,
     barHeight: 1, // the height of the wave

example/bars/main.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // Create an instance
-var wavesurfer = {};
+let wavesurfer = {};
 
 // Init & load audio file
 document.addEventListener('DOMContentLoaded', function() {
@@ -20,7 +20,7 @@ document.addEventListener('DOMContentLoaded', function() {
     wavesurfer.load('../media/demo.wav');
 
     // Play button
-    var button = document.querySelector('[data-action="play"]');
+    const button = document.querySelector('[data-action="play"]');
 
     button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
 });

example/cursor/index.html

@@ -20,7 +20,7 @@
 
     <!-- Demo -->
     <script src="main.js"></script>
-    
+
     <!-- highlight.js for syntax highlighting in this example -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
@@ -62,7 +62,7 @@ <h3>Cursor plugin</h3>
             <p>Shows a cursor on the waveform.</p>
 
             <p>
-                <pre><code>var wavesurfer = WaveSurfer.create({
+                <pre><code>let wavesurfer = WaveSurfer.create({
     container: document.querySelector('#waveform'),
     plugins: [
         WaveSurfer.cursor.create({

example/cursor/main.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // Create an instance
-var wavesurfer = {};
+let wavesurfer = {};
 
 // Init & load audio file
 document.addEventListener('DOMContentLoaded', function() {
@@ -29,7 +29,7 @@ document.addEventListener('DOMContentLoaded', function() {
     wavesurfer.load('../media/demo.wav');
 
     // Play button
-    var button = document.querySelector('[data-action="play"]');
+    const button = document.querySelector('[data-action="play"]');
 
     button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
 });