diff --git a/network/static/js/observation_view.js b/network/static/js/observation_view.js
index fa8942a..69db2e6 100644
--- a/network/static/js/observation_view.js
+++ b/network/static/js/observation_view.js
@@ -20,7 +20,6 @@ $(document).ready(function() {
     $('.wave').each(function(){
         var $this = $(this);
         var wid = $this.data('id');
-        var wavesurfer = Object.create(WaveSurfer);
         var data_audio_url = $this.data('audio');
         var container_el = '#data-' + wid;
         $(container_el).css('opacity', '0');
@@ -42,10 +41,18 @@ $(document).ready(function() {
             progressDiv.css('display', 'none');
         };
 
-        wavesurfer.init({
+        var wavesurfer = WaveSurfer.create({
             container: container_el,
             waveColor: '#bf7fbf',
-            progressColor: 'purple'
+            progressColor: 'purple',
+            plugins: [
+                WaveSurfer.spectrogram.create({
+                    wavesurfer: wavesurfer,
+                    container: '#wave-spectrogram',
+                    fftSamples: 256,
+                    windowFunc: 'hann'
+                })
+            ]
         });
 
         wavesurfer.on('destroy', hideProgress);
@@ -67,13 +74,6 @@ $(document).ready(function() {
 
         wavesurfer.on('ready', function() {
             hideProgress();
-            var spectrogram = Object.create(WaveSurfer.Spectrogram);
-            spectrogram.init({
-                wavesurfer: wavesurfer,
-                container: '#wave-spectrogram',
-                fftSamples: 256,
-                windowFunc: 'hann'
-            });
 
             //$playbackTime.text(formatTime(wavesurfer.getCurrentTime()));
             $playbackTime.text(formatTime(wavesurfer.getCurrentTime()));
diff --git a/package-lock.json b/package-lock.json
index c89c854..f1be71f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6310,9 +6310,9 @@
             }
         },
         "wavesurfer.js": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-1.4.0.tgz",
-            "integrity": "sha1-TbpmCY5zZhXZY/qFx0dvvX4JxWU="
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-3.1.0.tgz",
+            "integrity": "sha512-ip4NesZYmRVHGHukxRSXGRtqlKMKvqnWxD0JTJTCHyQk1GyQnASxL7zOrY+e6WRFL4/iDNiw96zDKAr9eNtuqg=="
         },
         "wgs84": {
             "version": "0.0.0",
diff --git a/package.json b/package.json
index 62c084c..a8bf549 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
         "mapbox-gl": "^1.3.1",
         "moment": "^2.24.0",
         "satellite.js": "^3.0.1",
-        "wavesurfer.js": "^1.4.0"
+        "wavesurfer.js": "^3.1.0"
     },
     "assets": [
         "jquery/dist/jquery.min.js",