perf: load aPlayer after the whole page

Former-commit-id: 7d16aff90a25e744544834a42776368b55903ea6

4 files changed, 68 insertions, 23 deletions

diff --git a/content/posts/weekly/31.md b/content/posts/weekly/31.md
index 4193d749..227ef8f1 100644
--- a/content/posts/weekly/31.md
+++ b/content/posts/weekly/31.md
@@ -20,6 +20,7 @@ related_cards:
 endnotes:
   - 封面图自摄，设备为 iPhone 15 Pro
   - 封面图摄于清晨五点半
+aplayer: true
 ---
 
 这周的某一天突然想起了以前很喜欢的一个小众歌手，一首歌的旋律在脑中浮现出来，回家就找到谱子用尤克里里弹了这首歌，希望你也喜欢。
diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html
index 63a2aa03..bf041938 100644
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@@ -7,6 +7,13 @@
 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
 {{ end }}
 
+<!-- Aplayer -->
+{{ if .Params.aplayer }}
+{{ with resources.Get "css/aplayer.css" }}
+<style>{{ .Content | safeCSS }}</style>
+{{ end }}
+{{ end }}
+
 <!-- Extra -->
 {{ range .Site.Params.extraCSSFiles -}}
 <link
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 308038ff..12beca10 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -8,6 +8,57 @@
   <script>Fancybox.bind("[data-fancybox]");</script>
 {{- end }}
 
+{{ if .Params.aplayer }}
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const lazyPlayers = document.querySelectorAll(".lazy-aplayer");
+  if (!lazyPlayers.length) return;
+
+  const loadAPlayer = () => {
+    if (window.APlayer) return Promise.resolve();
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = "https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js";
+      script.onload = resolve;
+      script.onerror = reject;
+      document.body.appendChild(script);
+    });
+  };
+
+  const observer = new IntersectionObserver((entries, obs) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        loadAPlayer().then(() => {
+          const el = entry.target;
+          const id = el.dataset.id ? `-` + el.dataset.id : ``;
+          const container = document.createElement('div');
+          container.id = `aplayer${id}`;
+          el.appendChild(container);
+
+          const ap = new APlayer({
+            container: container,
+            audio: [{
+              name: el.dataset.name,
+              artist: el.dataset.artist,
+              url: el.dataset.url,
+              cover: el.dataset.cover
+            }]
+          });
+
+          ap.on('play', () => umami?.track?.('🎵 Play music with aPlayer'));
+          ap.on('ended', () => umami?.track?.('🎵 Played entiresong with aPlayer'));
+
+          obs.unobserve(el);
+        });
+      }
+    });
+  });
+
+  lazyPlayers.forEach(player => observer.observe(player));
+});
+</script>
+{{ end }}
+
 <script>
   littlefoot.littlefoot({
     dismissOnUnhover: true,
diff --git a/layouts/shortcodes/aplayer.html b/layouts/shortcodes/aplayer.html
index b335e462..84c83002 100644
--- a/layouts/shortcodes/aplayer.html
+++ b/layouts/shortcodes/aplayer.html
@@ -1,23 +1,9 @@
-{{ with resources.Get "css/aplayer.css" }}
-<style>{{ .Content | safeCSS }}</style>
-{{ end }}
-<div id="aplayer{{ with .Get "id" }}-{{ . }}{{ end }}" style="margin: 1rem 0;"></div>
-<script src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
-<script>
-const ap = new APlayer({
-    container: document.getElementById('aplayer'),
-    audio: [{
-        name: '{{ .Get "name" }}',
-        artist: '{{ .Get "artist" }}',
-        url: '{{ .Get "url" }}',
-        cover: '{{ .Get "cover" }}'
-    }]
-});
-
-ap.on('play', function () {
-  umami.track('🎵 Play music with aPlayer')
-});
-ap.on('ended', function () {
-  umami.track('🎵 Played entiresong with aPlayer')
-});
-</script>
+<div
+  class="lazy-aplayer"
+  data-name="{{ .Get "name" }}"
+  data-artist="{{ .Get "artist" }}"
+  data-url="{{ .Get "url" }}"
+  data-cover="{{ .Get "cover" }}"
+  {{ with .Get "id" }}data-id="{{ . }}"{{ end }}
+  style="margin: 1rem 0;"
+></div>