Should fix autoplay

README.md

@@ -12,7 +12,7 @@ serving
 
 this scraper will download the gif and mp3 from a ytmnd and write a file embedding these things in addition to zoom text (if any).
 
-The downloaded files cannot be loaded from a `file://` url. In order to view these files, put them online or run a local server. For example, `python -m http.server` from the directory and got to [http://localhost:8000/](http://localhost:8000/)
+The downloaded files cannot be loaded from a `file://` url. In order to view these files, put them online or run a local server. For example, `python -m http.server` from the directory and got to [http://localhost:8000/](http://localhost:8000/). If you host them somewhere, remember to include `ytmnd.js` in the same directory.
 
 options
 -------

ytmnd.js

@@ -1,42 +1,43 @@
 (function () {
-  var AudioContext = window.AudioContext || window.webkitAudioContext;
+  var audio = new Audio(url);
-  var context = new AudioContext();
+  audio.loop = true;
-  var request = new XMLHttpRequest();
+  audio.muted = true;
-  var source;
+  audio
-  var buffer;
+    .play()
-
+    .then(function () {
-  request.open("GET", url, true);
+      console.log("Audio started (muted). Click/tap to unmute!");
-  request.responseType = "arraybuffer";
+      var unmuteMsg = document.createElement("div");
-
+      unmuteMsg.textContent = "Click to unmute";
-  request.onload = function () {
+      unmuteMsg.style.cssText =
-    context.decodeAudioData(
+        "position:fixed;top:10px;right:10px;background:rgba(0,0,0,0.8);color:#fff;padding:10px 20px;border-radius:5px;font-family:sans-serif;z-index:9999;cursor:pointer;";
-      request.response,
+      document.body.appendChild(unmuteMsg);
-      function (response) {
+      function unmute() {
-        buffer = response;
+        audio.muted = false;
-
+        unmuteMsg.remove();
-        function playBuffer() {
+        console.log("Audio unmuted!");
-          source = context.createBufferSource();
-          source.buffer = buffer;
-          source.connect(context.destination);
-
-          source.onended = function () {
-            playBuffer();
-          };
-
-          source.start(0);
       }
-
+      document.addEventListener("click", unmute, { once: true });
-        playBuffer();
+      document.addEventListener("keydown", unmute, { once: true });
-      },
+      document.addEventListener("touchstart", unmute, { once: true });
-      function (error) {
+      unmuteMsg.addEventListener("click", unmute, { once: true });
-        console.error("Audio decoding failed:", error);
+    })
-      },
+    .catch(function (error) {
-    );
+      console.error("Autoplay failed even when muted:", error);
-  };
+      function playOnInteraction() {
-
+        audio.muted = false;
-  request.onerror = function () {
+        audio
-    console.error("Failed to load audio file");
+          .play()
-  };
+          .then(function () {
-
+            console.log("Audio started after user interaction");
-  request.send();
+          })
+          .catch(function (err) {
+            console.error("Still couldn't play:", err);
+          });
+      }
+      document.addEventListener("click", playOnInteraction, { once: true });
+      document.addEventListener("keydown", playOnInteraction, { once: true });
+      document.addEventListener("touchstart", playOnInteraction, {
+        once: true,
+      });
+    });
 })();