fixed work without WebAudio (#749)

ilyhalight · Aug 13, 2024 · 45c5691 · 45c5691
1 parent 9d9728d
commit 45c5691
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 29 deletions.
diff --git a/changelog.md b/changelog.md
@@ -7,6 +7,7 @@
 # 1.6.x
 
 - Изменен загрузчик стилей при сборке расширения, благодаря этому скорость сборки стала немного быстрее, а итоговый размер кода, отвечающего за стили, уменьшен в ~1.65 раза
+- Исправлена работа расширения без наличия WebAudio (#749)
 
 # 1.6.1
 

diff --git a/dist/vot-min.user.js b/dist/vot-min.user.js
diff --git a/dist/vot.user.js b/dist/vot.user.js
@@ -2229,6 +2229,11 @@ function initHls() {
     : undefined;
 }
 
+function initAudioContext() {
+  const audioContext = window.AudioContext || window.webkitAudioContext;
+  return audioContext ? new audioContext() : undefined;
+}
+
 const deletefilter = [
   /(?:https?|ftp):\/\/\S+/g,
   /https?:\/\/\S+|www\.\S+/gm,
@@ -5335,7 +5340,6 @@ class SubtitlesWidget {
 
     this.bindEvents();
     this.updateContainerRect();
-    this.applySubtitlePosition();
   }
 
   createSubtitlesContainer() {
@@ -5863,8 +5867,7 @@ class VideoHandler {
   videoData = "";
   firstPlay = true;
   audio = new Audio();
-  audioContext = new (window.AudioContext || window.webkitAudioContext)();
-  gainNode = this.audioContext.createGain();
+  audioContext = initAudioContext();
 
   hls = initHls(); // debug enabled only in dev mode
   votClient;
@@ -5955,8 +5958,8 @@ class VideoHandler {
       await this.updateTranslationErrorMsg(
         res.remainingTime > 0
           ? secsToStrTime(res.remainingTime)
-          : res.message ??
-              localizationProvider.get("translationTakeFewMinutes"),
+          : (res.message ??
+              localizationProvider.get("translationTakeFewMinutes")),
       );
     } catch (err) {
       console.error("[VOT] Failed to translate video", err);
@@ -6183,14 +6186,9 @@ class VideoHandler {
     this.subtitlesWidget.setFontSize(this.data.subtitlesFontSize);
     this.subtitlesWidget.setOpacity(this.data.subtitlesOpacity);
 
-    // audio booster
-    this.audio.crossOrigin = "anonymous";
-    this.gainNode.connect(this.audioContext.destination);
-    this.audioSource = this.audioContext.createMediaElementSource(this.audio);
-    this.audioSource.connect(this.gainNode);
-
     this.initUI();
     this.initUIEvents();
+    this.initAudioBooster();
 
     const videoHasNoSource =
       !this.video.src && !this.video.currentSrc && !this.video.srcObject;
@@ -6240,6 +6238,16 @@ class VideoHandler {
     this.votButton.container.dataset.loading = loading;
   }
 
+  initAudioBooster() {
+    this.audio.crossOrigin = "anonymous";
+    if (this.audioContext) {
+      this.gainNode = this.audioContext.createGain();
+      this.gainNode.connect(this.audioContext.destination);
+      this.audioSource = this.audioContext.createMediaElementSource(this.audio);
+      this.audioSource.connect(this.gainNode);
+    }
+  }
+
   initUI() {
     // VOT Button
     {
@@ -6507,6 +6515,7 @@ class VideoHandler {
         localizationProvider.get("VOTAudioBooster"),
         this.data?.audioBooster ?? false,
       );
+      this.votAudioBoosterCheckbox.container.hidden = !this.audioContext;
       this.votSettingsDialog.bodyContainer.appendChild(
         this.votAudioBoosterCheckbox.container,
       );
@@ -6841,7 +6850,7 @@ class VideoHandler {
             this.votVideoTranslationVolumeSlider.label.querySelector(
               "strong",
             ).textContent = `${this.data.defaultVolume}%`;
-            this.gainNode.gain.value = this.data.defaultVolume / 100;
+            this.setAudioVolume(this.data.defaultVolume / 100);
             if (!this.data.syncVolume) {
               return;
             }
@@ -7263,7 +7272,7 @@ class VideoHandler {
 
             const finalVolume = Math.round(videoVolume);
             this.data.defaultVolume = finalVolume;
-            this.gainNode.gain.value = this.data.defaultVolume / 100;
+            this.setAudioVolume(this.data.defaultVolume / 100);
             this.syncVolumeWrapper("video", finalVolume);
           }
         }
@@ -7528,6 +7537,7 @@ class VideoHandler {
     if (["youtube", "googledrive"].includes(this.site.host)) {
       videoVolume = youtubeUtils.getVideoVolume() ?? videoVolume;
     }
+
     return videoVolume;
   }
 
@@ -7539,9 +7549,22 @@ class VideoHandler {
         return;
       }
     }
+
     this.video.volume = volume;
   }
 
+  getAudioVolume() {
+    return this.gainNode ? this.gainNode.gain.value : this.audio.volume;
+  }
+
+  setAudioVolume(volume) {
+    if (this.gainNode) {
+      return (this.gainNode.gain.value = volume);
+    }
+
+    return (this.audio.volume = volume);
+  }
+
   isMuted() {
     return ["youtube", "googledrive"].includes(this.site.host)
       ? youtubeUtils.isMuted()
@@ -8086,7 +8109,7 @@ class VideoHandler {
 
   setupAudioSettings() {
     if (typeof this.data.defaultVolume === "number") {
-      this.gainNode.gain.value = this.data.defaultVolume / 100;
+      this.setAudioVolume(this.data.defaultVolume / 100);
     }
 
     if (

diff --git a/src/index.js b/src/index.js
@@ -27,6 +27,7 @@ import debug from "./utils/debug.js";
 import {
   GM_fetch,
   initHls,
+  initAudioContext,
   isPiPAvailable,
   lang,
   secsToStrTime,
@@ -81,8 +82,7 @@ class VideoHandler {
   videoData = "";
   firstPlay = true;
   audio = new Audio();
-  audioContext = new (window.AudioContext || window.webkitAudioContext)();
-  gainNode = this.audioContext.createGain();
+  audioContext = initAudioContext();
 
   hls = initHls(); // debug enabled only in dev mode
   votClient;
@@ -401,14 +401,9 @@ class VideoHandler {
     this.subtitlesWidget.setFontSize(this.data.subtitlesFontSize);
     this.subtitlesWidget.setOpacity(this.data.subtitlesOpacity);
 
-    // audio booster
-    this.audio.crossOrigin = "anonymous";
-    this.gainNode.connect(this.audioContext.destination);
-    this.audioSource = this.audioContext.createMediaElementSource(this.audio);
-    this.audioSource.connect(this.gainNode);
-
     this.initUI();
     this.initUIEvents();
+    this.initAudioBooster();
 
     const videoHasNoSource =
       !this.video.src && !this.video.currentSrc && !this.video.srcObject;
@@ -458,6 +453,16 @@ class VideoHandler {
     this.votButton.container.dataset.loading = loading;
   }
 
+  initAudioBooster() {
+    this.audio.crossOrigin = "anonymous";
+    if (this.audioContext) {
+      this.gainNode = this.audioContext.createGain();
+      this.gainNode.connect(this.audioContext.destination);
+      this.audioSource = this.audioContext.createMediaElementSource(this.audio);
+      this.audioSource.connect(this.gainNode);
+    }
+  }
+
   initUI() {
     // VOT Button
     {
@@ -725,6 +730,7 @@ class VideoHandler {
         localizationProvider.get("VOTAudioBooster"),
         this.data?.audioBooster ?? false,
       );
+      this.votAudioBoosterCheckbox.container.hidden = !this.audioContext;
       this.votSettingsDialog.bodyContainer.appendChild(
         this.votAudioBoosterCheckbox.container,
       );
@@ -1059,7 +1065,7 @@ class VideoHandler {
             this.votVideoTranslationVolumeSlider.label.querySelector(
               "strong",
             ).textContent = `${this.data.defaultVolume}%`;
-            this.gainNode.gain.value = this.data.defaultVolume / 100;
+            this.setAudioVolume(this.data.defaultVolume / 100);
             if (!this.data.syncVolume) {
               return;
             }
@@ -1481,7 +1487,7 @@ class VideoHandler {
 
             const finalVolume = Math.round(videoVolume);
             this.data.defaultVolume = finalVolume;
-            this.gainNode.gain.value = this.data.defaultVolume / 100;
+            this.setAudioVolume(this.data.defaultVolume / 100);
             this.syncVolumeWrapper("video", finalVolume);
           }
         }
@@ -1746,6 +1752,7 @@ class VideoHandler {
     if (["youtube", "googledrive"].includes(this.site.host)) {
       videoVolume = youtubeUtils.getVideoVolume() ?? videoVolume;
     }
+
     return videoVolume;
   }
 
@@ -1757,9 +1764,22 @@ class VideoHandler {
         return;
       }
     }
+
     this.video.volume = volume;
   }
 
+  getAudioVolume() {
+    return this.gainNode ? this.gainNode.gain.value : this.audio.volume;
+  }
+
+  setAudioVolume(volume) {
+    if (this.gainNode) {
+      return (this.gainNode.gain.value = volume);
+    }
+
+    return (this.audio.volume = volume);
+  }
+
   isMuted() {
     return ["youtube", "googledrive"].includes(this.site.host)
       ? youtubeUtils.isMuted()
@@ -2304,7 +2324,7 @@ class VideoHandler {
 
   setupAudioSettings() {
     if (typeof this.data.defaultVolume === "number") {
-      this.gainNode.gain.value = this.data.defaultVolume / 100;
+      this.setAudioVolume(this.data.defaultVolume / 100);
     }
 
     if (

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -50,6 +50,11 @@ function initHls() {
     : undefined;
 }
 
+function initAudioContext() {
+  const audioContext = window.AudioContext || window.webkitAudioContext;
+  return audioContext ? new audioContext() : undefined;
+}
+
 const deletefilter = [
   /(?:https?|ftp):\/\/\S+/g,
   /https?:\/\/\S+|www\.\S+/gm,
@@ -140,6 +145,7 @@ export {
   langTo6391,
   isPiPAvailable,
   initHls,
+  initAudioContext,
   cleanText,
   GM_fetch,
 };