Fix: [Envelope] react to media element volume changes (#3003)

* Fix: [Envelope] react to media element volume changes * 7.0.1
katspaugh · Jul 11, 2023 · 0c466b6 · 0c466b6
1 parent 4991237
commit 0c466b6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Navigable audio waveform player",

diff --git a/src/plugins/envelope.ts b/src/plugins/envelope.ts
@@ -210,7 +210,14 @@ class EnvelopePlugin extends BasePlugin<EnvelopePluginEvents, EnvelopePluginOpti
     this.initSvg()
     this.initFadeEffects()
 
+    // Sync the plugin's volume with the media element volume
+    const media = this.wavesurfer.getMediaElement()
+    const onMediaVolumeChange = () => this.setVolume(media.volume)
+    media.addEventListener('volumechange', onMediaVolumeChange)
+
     this.subscriptions.push(
+      () => media.removeEventListener('volumechange', onMediaVolumeChange),
+
       this.wavesurfer.on('redraw', () => {
         const duration = this.wavesurfer?.getDuration()
         if (!duration) return