Hexo在全球范围内添加了APlayer音乐播放器

相关站点

根据Yilia主题在全球范围内添加APlayer音乐播放器

编辑Yilia的模板文件hexo-theme-yilia / layout / \ _ partial / left-col.ejs，在文件末尾添加以下代码树莓派 音乐播放器，可以在其中直接链接歌曲的歌词文件，封面图像和URL通过音乐，您可以使用搜索工具来获取或使用服务器的本地资源文件. 提示，如果以下代码无法将APlayer播放器固定到理想的页面位置，则可以修改div标签的样式和APlayer的固定参数值.

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
44
45
46
47
48
49
50
51
52

<% if(theme.aplayer.enable)  %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
// 这里div的样式是笔者自己修改过的，你可以直接使用APlayer官方的原配置：<div id="aplayer"></div>
<div id="aplayer" style="position:absolute;left;0;bottom:0;"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
<script>
  const ap = new APlayer(
    container: document.getElementById('aplayer'),
    autoplay: false, //自动播放
    listFolded: true, //播放列表默认折叠
    listMaxHeight: 90, //播放列表最大高度
    order: 'list', //音频循环顺序, 可选值: 'list', 'random'
    loop: 'all', //音频循环播放, 可选值: 'all', 'one', 'none'
    theme: '#e9e9e9', //切换音频时的主题色，优先级低于audio.theme
    preload: 'none', //音频预加载，可选值: 'none', 'metadata', 'auto'
    mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
    lrcType: 3, //歌词格式，可选值：3（LRC文件歌词格式），1（JS字符串歌词格式）
    volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
    fixed: false, //吸底模式（fixed:true），迷你模式（mini:true），普通模式（注释此行或者设置fixed:false）
    audio: [
        name: '平凡之路',
        artist: '朴树',
        lrc: '/downloads/lrc/平凡之路-朴树.lrc',
        cover: 'http://p2.music.126.net/W_5XiCv3rGS1-J7EXpHSCQ==/18885211718782327.jpg?param=300x300',
        url: 'http://fs.open.kugou.com/cd5cbe8edb012e4f77b0857cefc0956e/5c66accf/G097/M08/0A/1F/AYcBAFkQGpOAMUpuAEm-3SlWMyk951.mp3'
      ,
      
        name: '后会无期',
        artist: 'G.E.M.邓紫棋',
        lrc: '/downloads/lrc/后会无期-G.E.M.邓紫棋.lrc',
        cover: 'http://p1.music.126.net/vpvPajo3kn88nHc7jUjeWQ==/5974746185758035.jpg?param=300x300',
        url: 'http://m10.music.126.net/20190215193113/e5afc8b5376136029366f2053cf30f85/ymusic/2c87/6ec3/582e/0d572dcc04f8de34133c0f364b74c30c.mp3'
      
    ]
  );

  //实现切换音频时，根据音频的封面图片自适应主题色
  const colorThief = new ColorThief();
  const setTheme = (index) => 
    if (!ap.list.audios[index].theme) 
      colorThief.getColorAsync(ap.list.audios[index].cover, function(color) 
        ap.theme(`rgb($color[0], $color[1], $color[2])`, index);
      );
    
  ;
  setTheme(ap.list.index);
  ap.on('listswitch', (data) => 
    setTheme(data.index);
  );
</script>
<%  %>

配置Yilia主题

编辑Yilia主题配置文件hexo-theme-yilia / _config.yml，并在文件末尾添加以下内容.

1
2

aplayer:
  enable: true

重建博客

提示，如果音频文件使用本地资源文件并通过hexo服务器提供Web服务，则无法通过APlayer进度栏调整播放进度. 在这种情况下，需要Nginx或Apache之类的Web服务器.

1
2
3
4
5
6
7
8
9
10
11

# 进入博客的根目录
$ cd /blogroot

# 通过Hexo清理Public目录
$ hexo clean

# 通过Hexo构建静态文件
$ hexo generate

# 通过Hexo启动服务
$ hexo server

扩展建议

如果以后想方便地添加或删除歌曲树莓派 音乐播放器，建议将歌曲信息写入单独的Json文件中. 初始化APlayer音乐播放器时，JavaScript代码会动态读取Json文件，以后您只需要编辑歌曲的Json文件即可达到动态更新歌曲列表的目的. 当前的博客使用此方法. 有关详细信息，请参阅此站点上的JavaScript代码和Json文件.

最终渲染

作者: 粘土

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-272589-1.html