Add Aplayer for Music page

This commit is contained in:
Joshua Boniface 2024-09-02 02:10:42 -04:00
parent cb00bb57ec
commit 7c63bbd19d
6 changed files with 226 additions and 6 deletions

View File

@ -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 -->
<script type="text/javascript" src="https://www.scmplayer.net/script.js"
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>
<!-- SCM Music Player script end -->
{{< aplayer
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"
name="Into Æther, The Vision, The Summoning, Thraximundar, Escape, Brooding, The Gathering, Lament, Thraximundar Defeated"
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 >}}

View File

@ -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"

View File

@ -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>

View File

@ -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>

3
static/css/APlayer.min.css vendored Normal file

File diff suppressed because one or more lines are too long

2
static/js/APlayer.min.js vendored Normal file

File diff suppressed because one or more lines are too long