Aplayer 在 Blog 的使用方式

發表於 分類於 閱讀次數： 閱讀次數： Disqus： 文章字數： 4.8k 所需閱讀時間 ≈ 4 分鐘
教學: 如何在自己的部落格使用 Aplayer 來當作網頁的音樂撥放器

身為一個喜歡音樂的人，肯定是想過要把音樂播放器內嵌於文章中
但 Hexo 版本的 Aplayer Plugin 已經失效了，也不太可能自己去修
於是就研究了通用的做法來進行內嵌。

照片截圖:

(文章內有實際可以點的播放器 ! )

選擇 Aplayer 的原因

一開始是在別人的 Hexo 發現別人用了 hexo-tag-aplayer 來內嵌音樂
而認識了這款網頁播放介面。

我也實際的使用了一段時間，但因為真的蠻常踩到 bug 的
且該插件已經沒人維護，所以就把文章內的音樂都撤掉了 QQ

直到 ... 今天 !
我突然很想寫自己喜歡的樂團的推廣文，於是又開始 survey 音樂撥放器。
找來找去，還是這款好，而且開源。

  • 可以設定播放列表
  • 可以讓撥放器互斥 (按另一個播放器會自動停止前一個)
  • 可以顯示歌詞
  • 空間占比小
  • 搭配 script 可以在指定時間開始播放

Demo:

正常大小 (搭配設定 div 寬度)
小型

至少我覺得這個介面算好看的了 !

使用方式

首先，引入分成兩段

  1. libaray 引入段落
  2. 播放器段落

這邊主要介紹 HTML 和 markdown 使用方式。
但其實 HTML 的差異就只有，引入的那段可以搬到 header，甚至直接學 markdown 全部擺一起

播放器的部分:

1
2
3
4
5
6
<div class="player-container">
  正常大小 (搭配設定 div 寬度)
  <div id="player" class="aplayer" style="width: 70%"></div>
  小型
  <div id="player-mini" class="aplayer"></div>
</div>

import + 嵌入式 JS 的部份:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- 引入 Lib 的部份 -->
<script src="
https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css
" rel="stylesheet">

<!-- 設定播放器的部分 -->
<script>
  let apNormal = new APlayer({
    container: document.getElementById('player'),
    listFolded: false,
    fixed: false, //吸底模式
    mini: false, //迷你模式
    listMaxHeight: 900,
    volume: 0.9,
    loop: 'none',
    audio: [{
      name: 'You and Me',
      artist: 'しゃろう',
      url: 'https://meteorve.github.io/WebAssets/audio/YouAndMe.mp3',
      cover: 'https://meteorve.github.io/WebAssets/audio/YouAndMe.jpg',
      theme: '#d9edf7'
    }]
  });
  
  let apMini = new APlayer({
    container: document.getElementById('player-mini'),
    listFolded: false,
    mini: true, //迷你模式
    listMaxHeight: 900,
    volume: 0.9,
    loop: 'none',
    audio: [{
      name: 'You and Me',
      artist: 'しゃろう',
      url: 'https://meteorve.github.io/WebAssets/audio/YouAndMe.mp3',
      cover: 'https://meteorve.github.io/WebAssets/audio/YouAndMe.jpg',
      theme: '#d9edf7'
    }]
  });
</script>

在段落分配上
import Lib 那個可以貼在文章最上面、或是放文末都可以，但一定要在 <script> 的前面

1
2
3
4
5
6
7
8
9
Article Title

... Some Text ...

{貼上 播放器 div 部分}

... Some Text ...

{文末 -- 貼上 import + 嵌入式 js 的部份}

如果你是使用 Hexo
我會建議在貼上這些 code 的前後方，使用官方推薦的

1
2
3
{% raw %}
把程式碼夾在中間
{% endraw %}

這樣包起來

關於如何自定義細節

這邊來解釋一下上面的 Code

  1. 播放器 HTML 部分
1
<div id="player" class="aplayer" style="width: 70%"></div>

上面這樣就是最基本的一個單位。

  1. JS 設定部分
    我們先把 import 的部分拔掉不看
    下面這樣的設定就是一個單位，建立一個 APlayer 物件
    並且 container 指定為 "player" (對應到上方例子的 id 欄位)
    然後其實直接去改 audio 屬性中的 name, artist 等等資訊
    就可以直接替換成你自己的播放器了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
  let apNormal = new APlayer({
    container: document.getElementById('player'),
    listFolded: false,
    fixed: false, //吸底模式
    mini: false, //迷你模式
    listMaxHeight: 900,
    volume: 0.9,
    loop: 'none',
    audio: [{
      name: 'You and Me',
      artist: 'しゃろう',
      url: 'https://meteorve.github.io/WebAssets/audio/YouAndMe.mp3',
      cover: 'https://meteorve.github.io/WebAssets/audio/YouAndMe.jpg',
      theme: '#d9edf7'
    }]
  });
</script>

可以觀察: 我最上面的 Code 有兩個這樣的 div，一個 id 是 player，另一個是 player-mini
分別在 <script> 內部可以找到對應設定的地方
所以如果今天想要新增第三個
那就再建立一個 <div id="player-3" class="aplayer"></div>
並且在 <script> 新增一個新的物件(一個新的基本單位)，就算是舉一反三囉。

值得一提的是，我們可以透過操作 js 物件來讓他剛播放的時候就從指定時間開始

1
2
3
4
// 播放時從 50 秒開始
apNormal.on('play', function() {
  ap.seek(50);
});

加入這個，就會讓他在播放時直接跳轉至第 50 秒。

至於為何是 apNormal.on(... ?
是因為我 js 那段是使用
let apNormal = new APlayer({ ... 去建立物件的。
關於這些變數，我會推薦直接在這個頁面 Ctrl + F 去搜尋 apNormal
或是你覺得可能有連動效果的關鍵字，你能更快的得到解答。

這邊做了一個最暴力和在一起的版本，代表的確是可以直接貼 markdown 去渲染的
同時也有塞 "從 50 秒開始" 的這三行，可以比較看看有放和拿掉的差異。
https://jsfiddle.net/MeteorV/jzu78p39/5/

關於上傳音樂和照片

JS 內部指定的封面、音樂連結，必須是可以 public access 的 (就是你開無痕，任何裝置都可以打開的檔案)

所以一般作法有兩種

  1. 上傳公開雲端/私人雲端，拿到 public link
  2. 放在你的 HTML Server 底下的其他資料夾
    例如你的 css 有一個獨立的資料夾、那你肯定可以再建立一個名為 assets 的資料夾
    然後檔案放在裡面、並且將路徑寫為相對路徑寫進去 js。
    不過音樂如果沒壓縮就會比較吃你伺服器的流量囉。
    • 這邊可以提一下，如果你是使用 Hexo，可以放在 /source 內建一個新資料夾，
      他會自動被繼承到 output HTML 的相對路徑 (在 hexo generate 的時候一併複製到 public 資料夾)

專輯封面倒是簡單一點，上傳 imgur 就很堪用。

Other Reference

看官方文件可以找到更多的功能設定
https://aplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0

因為寫這篇也不知道能幫助多少人 QQ
所以就先不花更多時間寫太多例子了

如果有真的想不到的場景，可以再留言跟我討論~

但上面的官方文件要先自己看過哦 !
End

2024.07.14