Add Aplayer for Music page

content/en/pages/music.md

@@ -14,8 +14,10 @@ My debut album, in the works since 2011 (or 2006, depending on how you count it)
 
 Below is a playlist containing preview audio of all 9 songs, as produced by MuseSounds. No real instruments or vocals yet. I plan to record this over the Winter of 2024/2025 with a goal for a Spring 2025 release. Enjoy.
 
-<!-- SCM Music Player https://www.scmplayer.net -->
+{{< aplayer
-<script type="text/javascript" src="https://www.scmplayer.net/script.js" 
+    artist="Joshua M. Boniface, Joshua M. Boniface, Joshua M. Boniface, Joshua M. Boniface, Joshua M. Boniface, Joshua M. Boniface, Joshua M. Boniface, Joshua M. Boniface, Joshua M. Boniface"
-data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':false,'shuffle':false,'repeat':0,'placement':'top','showplaylist':true,'playlist':[{'title':'Into %C6ther','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/1%20Into%20Aether.ogg'},{'title':'The Vision','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/2%20The%20Vision.ogg'},{'title':'The Summoning','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/3%20The%20Summoning.ogg'},{'title':'Thraximundar','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/4%20Thraximundar.ogg'},{'title':'Escape','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/5%20Escape.ogg'},{'title':'Brooding','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/6%20Brooding.ogg'},{'title':'The Gathering','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/7%20The%20Gathering.ogg'},{'title':'Lament','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/8%20Lament.ogg'},{'title':'Thraximundar Defeated','url':'https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/9%20Thraximundar%20Defeated.ogg'}]}" ></script>
+    name="Into Æther, The Vision, The Summoning, Thraximundar, Escape, Brooding, The Gathering, Lament, Thraximundar Defeated"
-<!-- SCM Music Player script end -->
+    theme="#111111"
-
+    url="https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/1%20Into%20Aether.ogg, https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/2%20The%20Vision.ogg, https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/3%20The%20Summoning.ogg, https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/4%20Thraximundar.ogg, https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/5%20Escape.ogg, https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/6%20Brooding.ogg, https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/7%20The%20Gathering.ogg, https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/8%20Lament.ogg, https://file.bonifacelabs.ca/Public/Into%20Aether/Preview/9%20Thraximundar%20Defeated.ogg"
+>}}
+{{< /aplayer >}}

hugo.toml

@@ -75,7 +75,7 @@ theme = "hugo-blog-awesome"
   [[Languages.en-ca.menu.main]]
     pageRef="music"
     name = 'Music'
-    url = '/music/'
+    url = '/pages/music/'
     weight = 40
   [[Languages.en-ca.menu.main]]
     pageRef="hardware"

layouts/shortcodes/aplayer.html

@@ -0,0 +1,94 @@
+<!-- require APlayer -->
+<link rel="stylesheet" href="/css/APlayer.min.css">
+<script src="/js/APlayer.min.js"></script>
+
+<div id="aplayer"></div>
+
+<script>
+    const ap = new APlayer({
+        container: document.getElementById('aplayer'),
+
+        {{ with .Get "fixed" }}    
+            fixed: {{- . -}},
+        {{ end }}
+
+        {{ with .Get "mini" }} 
+            mini: {{- . -}},
+        {{ end }}
+
+        {{ with .Get "autoplay" }}
+            autoplay: {{- . -}},
+        {{ end }}
+
+        {{ with .Get "cover" }}
+            cover: "{{ . }}",
+        {{ end }}
+
+        {{ with .Get "theme" }}
+            theme: "{{ . }}",
+        {{ end }}
+
+        {{ with .Get "loop" }}
+            loop: "{{ . }}",
+        {{ end }}
+
+        {{ with .Get "order" }}
+            order: "{{ . }}",
+        {{ end }}
+
+        {{ with .Get "preload" }}
+            preload: "{{ . }}",
+        {{ end }}
+
+        {{ with .Get "volume" }}
+            volume: {{- . -}},
+        {{ end }}
+
+        {{ with .Get "mutex" }}
+            mutex: {{- . -}},
+        {{ end }}
+
+        {{ with .Get "lrc-type" }}
+            lrcType: {{- . -}},
+        {{ end }}
+
+        {{ with .Get "lrc-folded" }}
+            listFolded: {{- . -}},
+        {{ end }}
+
+        {{ with .Get "list-max-height" }}
+            listMaxHeight: {{- . -}},
+        {{ end }}
+
+        {{ with .Get "storage-name" }}
+            storageName: "{{ . }}",
+        {{ end }}
+
+        audio: [
+            {{- range $i, $v := split ($.Get "name")  "," -}}
+                {{ if $i}},{{ end }}
+                {
+                    name: "{{ $v }}",
+                    
+                    url: "{{ index (split ($.Get "url")  ",")  $i }}",
+
+                    {{ with index (split ($.Get "artist")  ",") $i }}
+                        artist: "{{ . }}",
+                    {{ end }}
+
+                    {{ with index (split ($.Get "cover")  ",") $i }}
+                        cover: "{{ . }}",
+                    {{ end }}
+                    
+                    {{ with index (split ($.Get "lrc")  ",") $i }}
+                        lrc: "{{ . }}"
+                    {{ end }}
+                }
+            {{- end -}}
+        ]
+
+    });
+
+    // You can call Aplayer APIs directly in your inner shortcodes.
+    {{ .Inner | safeJS }}
+</script>

layouts/shortcodes/meting.html

@@ -0,0 +1,119 @@
+<!-- require APlayer -->
+{{ with .Params.Aplayer.style_cdn }}
+    <link rel="stylesheet" href="{{ . | safeURL }}">
+{{ else }}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
+{{ end }}
+
+{{ with .Params.Aplayer.cdn }}
+    <script src="{{ . | safeURL }}"></script>
+{{ else }}
+    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
+{{ end }}
+
+<!-- require MetingJS -->
+{{ with .Params.APlayer.meting_cdn }}
+    <script src="{{ . | safeURL }}"></script>
+{{ else }}
+    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
+{{ end }}
+
+<div id="aplayer">
+    <meting-js 
+    {{ with .Get "id" }}
+        id="{{ . }}" 
+    {{ end }}
+
+    {{ with .Get "server" }}
+        server="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "type" }} 
+        type="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "auto" }} 
+        auto="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "fixed" }}    
+        fixed="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "mini" }} 
+        mini="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "autoplay" }}
+        autoplay="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "theme" }}
+        theme="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "loop" }}
+        loop="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "order" }}
+        order="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "preload" }}
+        preload="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "volume" }}
+        volume="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "mutex" }}
+        mutex="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "lrc-type" }}
+        lrc-type="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "lrc-folded" }}
+        list-folded="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "list-max-height" }}
+        list-max-height="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "storage-name" }}
+        storage-name="{{ . }}"
+    {{ end }}
+    
+    {{ with .Get "name" }}
+        name="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "artist" }}
+        artist="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "url" }}
+        url="{{ . }}"
+    {{ end }}
+
+    {{ with .Get "cover" }}
+        cover="{{ . }}"
+    {{ end }} >
+    </meting-js>
+</div>
+
+<script>
+    let ap = null;
+    Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
+        set: aplayer => {
+            ap = aplayer
+
+            // You can call Aplayer APIs directly in your inner shortcodes.
+            {{ .Inner | safeJS }}
+        }
+    });
+</script>