hexo+yilia添加背景音乐

---

添加背景音乐（截图为APlayer播放器）

简单版：网易云外链

参考：

• hexo+yilia个性化之-添加背景音乐
• Hexo博客yilia主题添加背景音乐 （网易云音乐）

步骤：

1.到网易云官网获取音乐外链：搜索音乐–>生成外链播放器（使用iframe插件形式）–>复制代码

2.打开路径 themes/yilia/layout/_partial/left-col.ejs，在最后一个上面添加代码，就像下面这样。注意是否需要自动播放，建议不要设置为自动播放（src中的auto=0表示不自动播放，如果是1就自动播放）。

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 
        src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66">iframe>
nav>

3.根据需要设置宽高属性，宽建议228。

4.为了方便起见，设置成能够在主题的配置文件中开启和关闭的形式：

<% if(theme.simple_163_music && theme.simple_163_music.enable){ %>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66">iframe>
<% } %>

同时需要在主题的配置文件themes/yilia/_config.yml中开启：

# 音乐
# 简单的网易云音乐
simple_163_music:
 enable: true

如需关闭设置为false。

复杂版：APlayer音乐播放器

参考：

• Hexo全局添加APlayer音乐播放器
• APlayer官网：https://aplayer.js.org
• github仓库：https://github.com/MoePlayer/APlayer
• 使用说明：https://aplayer.js.org/#/zh-Hans/

安装步骤

1.打开路径 themes/yilia/layout/_partial/left-col.ejs，在最后一个上面添加代码，就像下面这样。

<% if(theme.aplayer.enable) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">

<div id="aplayer" style="position:absolute;left;0;bottom:0;">div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js">script>
<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        autoplay: false,
        listFolded: true,
        listMaxHeight: 90,
        order: 'list',
        loop: 'all',
        theme: '#b7daff',
        preload: 'none',
        mutex: true,
        lrcType: 3,
        volume: 0.7,
        fixed: true,
        audio: [{
                name: '亲爱的旅人啊（Cover：木村弓）',
                artist: '周深',
                lrc: '/music/lrc/亲爱的旅人啊（Cover：木村弓）-周深.lrc',
                cover: 'http://p1.music.126.net/1YrCPOBV314i-mTtlDg8mQ==/109951164148664637.jpg?param=300x300',
                url: 'http://m10.music.126.net/20191102134206/7c499bc0065a03c980aa04817b2b7b2b/ymusic/555f/525a/5258/b5f91cd86ce0046a6f70e249d0802a1e.mp3'
            },
            {
                name: '陈情令：无羁',
                artist: 'Silu Wang',
                lrc: '',
                cover: 'http://p2.music.126.net/8eL7nls1F8o48_umy0uqBQ==/109951164361652548.jpg?param=300x300',
                url: 'http://m10.music.126.net/20191102144314/e85a4a99852144dced7bc7eace047ecc/ymusic/015d/550f/5152/67f6f0756ebe8bd362f5f85c507acf68.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>
<% } %>

2.同时需要在主题的配置文件themes/yilia/_config.yml中开启：

# 添加APlayer音乐播放器，官网：https://aplayer.js.org
# github: https://github.com/MoePlayer/APlayer
aplayer:
  enable: true

如需关闭设置为false。

说明

1.存在问题：fixed: true模式下，歌曲列表高度listMaxHeight好像无效。

2.使用：音乐直链搜索：https://music.liuzhijin.cn/ 查找的歌曲好像有限制，就是如果使用太频繁，会被拒绝访问（响应码403，有点像禁爬虫）。可以使用七牛云存储对应MP3文件。（歌词好像是没有显示的）

3.对于有些歌曲没有歌词的情况（如上面的第二首歌），不建议直接置为空lrc: '',，这样会出现问题：一开始可能没有问题，如果设置循环，第二次时就会报错–找不到歌词。建议：添加同名歌词文件，如/music/lrc/无羁 - Silu Wang-陈情令.lrc，歌词内容置为空，如：[00:00.00] 暂无歌词，这样就不会出现类似问题。

补充

上面说到的歌曲列表高度listMaxHeight问题，应该是一个bug，详见：listMaxHeight does not work and no scroll in Fixed mode，但是可以不进行设置，因为它有一个默认值250px。

更新

将配置分开，方便修改。

            
            <% if(theme.aplayer.enable) { %>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">

                <div id="aplayer" style="text-align:left">div>
                <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js">script>
                <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js">script>

                
                <script type="text/javascript" src="<%- url_for('js/APlayer_config.js') %>">script>

                
                <script type="text/javascript">
                      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>
            <% } %>
            

配置文件H:\Hexo\themes\yilia\source\js\APlayer_config.js:

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    theme: '#b7daff',
    loop: 'all',
    order: 'list',
    preload: 'auto',
    volume: 0.5,
    lrcType: 3,
    mutex: true,
    listFolded: false,

    audio: [{
            name: '一直很安静',
            artist: '阿桑',
            lrc: '/music/lrc/一直很安静 - 阿桑.lrc',
            cover: 'https://p1.music.126.net/SpovasHBud2A1qXXADXsBg==/109951163167455610.jpg?param=300x300',
            url: 'http://q0fzyzixq.bkt.clouddn.com/audio/mp3/一直很安静 - 阿桑.mp3'
                  },
        {
            name: '亲爱的旅人啊（Cover：木村弓）',
            artist: '周深',
            lrc: '/music/lrc/亲爱的旅人啊（Cover：木村弓）-周深.lrc',
            cover: 'https://p1.music.126.net/1YrCPOBV314i-mTtlDg8mQ==/109951164148664637.jpg?param=300x300',
            url: 'http://q0fzyzixq.bkt.clouddn.com/audio/mp3/亲爱的旅人啊（Cover：木村弓） - 周深.mp3'
                  }
        ]
});

分开后，如果需要更新歌曲，只需要更新音乐的配置文件APlayer_config.js就可以了，而不是修改主题的布局文件。

---

文章首发于：hexo+yilia添加背景音乐