From f96f3b313c363f6970b2101dcc8270e10990d637 Mon Sep 17 00:00:00 2001
From: Ben Osheroff <osheroff@users.noreply.github.com>
Date: Mon, 15 Jun 2020 13:21:26 -0700
Subject: [PATCH] MediaElement safari fixes (#1964)

* rewrite mediaelement-webaudio comment

* resume audiocontext for Safari + mediaelement/webaudio

this was happening in the webaudio backend, but due to the odd
inheritance layout of mediaelement-webaudio it wasn't happening here.

* add changelog entry

* hoist common code into utility function

* generalize comment
---
 CHANGES.md                   |  1 +
 src/mediaelement-webaudio.js | 16 ++++++++++------
 src/webaudio.js              | 15 ++++++++++++---
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index d059f990b..46ca878aa 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -4,6 +4,7 @@ wavesurfer.js changelog
 4.0.0 (unreleased)
 ------------------
 
+- Fixed mediaelement-webaudio playback under Safari (#1964)
 - Fixed the `destroy` method of the `MediaElementWebAudio` backend. Instead of
   destroying only the media element, the audio nodes are disconnected and the
   audio context is closed. This was done by splitting the `destroy` method of the
diff --git a/src/mediaelement-webaudio.js b/src/mediaelement-webaudio.js
index 55281ff36..51ff2fcdc 100644
--- a/src/mediaelement-webaudio.js
+++ b/src/mediaelement-webaudio.js
@@ -1,12 +1,11 @@
 import MediaElement from './mediaelement';
 
 /**
- * MediaElementWebAudio backend: allows to load audio as HTML5 audio tag and use it with WebAudio API.
- * Setting the MediaElementWebAudio backend, there is the possibility to load audio of big dimensions, using the WebAudio API features.
- * The audio to load is an HTML5 audio tag, so you have to use the same methods of MediaElement backend for loading and playback.
- * In this way, the audio resource is not loaded entirely from server, but in ranges, since you load an HTML5 audio tag.
- * In this way, filters and other functionalities can be performed like with WebAudio backend, but without decoding
- * internally audio data, that caused crashing of the browser. You have to give also peaks, so the audio data are not decoded.
+ * MediaElementWebAudio backend: load audio via an HTML5 audio tag, but playback with the WebAudio API.
+ * The advantage here is that the html5 <audio> tag can perform range requests on the server and not
+ * buffer the entire file in one request, and you still get the filtering and scripting functionality
+ * of the webaudio API.
+ * Note that in order to use range requests and prevent buffering, you must provide peak data.
  *
  * @since 3.2.0
  */
@@ -60,6 +59,11 @@ export default class MediaElementWebAudio extends MediaElement {
         this.sourceMediaElement.connect(this.analyser);
     }
 
+    play(start, end) {
+        this.resumeAudioContext();
+        return super.play(start, end);
+    }
+
     /**
      * This is called when wavesurfer is destroyed
      *
diff --git a/src/webaudio.js b/src/webaudio.js
index 33137f2ed..65a41b259 100755
--- a/src/webaudio.js
+++ b/src/webaudio.js
@@ -575,6 +575,17 @@ export default class WebAudio extends util.Observer {
         this.source.connect(this.analyser);
     }
 
+    /**
+     * @private
+     *
+     * some browsers require an explicit call to #resume before they will play back audio
+     */
+    resumeAudioContext() {
+        if (this.ac.state == 'suspended') {
+            this.ac.resume && this.ac.resume();
+        }
+    }
+
     /**
      * Used by `wavesurfer.isPlaying()` and `wavesurfer.playPause()`
      *
@@ -670,9 +681,7 @@ export default class WebAudio extends util.Observer {
 
         this.source.start(0, start);
 
-        if (this.ac.state == 'suspended') {
-            this.ac.resume && this.ac.resume();
-        }
+        this.resumeAudioContext();
 
         this.setState(PLAYING);