1. 下载Aplayer

请前往Aplayer下载,由于使用的主题用的是jade模板引擎,请自行阅读文档使用

2. 编写widget

2.1 新建widget

找到hexo主题(我用的BlueLake主题)下的_widget文件夹，新建aplayer.jade

2.2 编写widget

下面是插件标题

.widget
    .widget-title
        i(class='fa fa-user')= ' ' + __('Music')

引入aplayer.js,注意语法格式，不懂得请自行搜索

script(type='text/javascript',src='/js/APlayer.min.js')

播放列表demo,具体的播放器设置请前往Aplayer阅读

#player.aplayer
    script.
    var aplayerList = new APlayer({
            element: document.getElementById('player'),
            narrow: false,
            autoplay: true,
            showlrc: false,
            mutex: true,
            theme: '#FFF0',
            mode: 'random',
            preload: 'metadata',
            listmaxheight: '200px',
            music: //播放列表 自行设置
                [
                    {
                        title: 'あっちゅ～ま青春!',
                        author: '七森中☆ごらく部',
                        url: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.mp3',
                        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.jpg',
                        lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.lrc'
                    },
                    {
                        title: 'secret base~君がくれたもの~',
                        author: '茅野愛衣',
                        url: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
                        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg',
                        lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.lrc'
                    },
                    {
                        title: '回レ！雪月花',
                        author: '小倉唯',
                        url: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.mp3',
                        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.jpg',
                        lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.lrc'
                    }
                ]
        });

由于比较懒，直接饮用了meting的api，直接获取网易云的歌单
代码中的Id是网易云歌单的id，ajax请求结果返回的是处理过的json数据，可以直接处理使用

//Thanks Meting and Aplayer
$(function() {
    $.ajax({
        url: "https://api.i-meto.com/meting/api?server=netease&type=playlist&id=141998290",
        success: function(e) {
            var aplayerList = new APlayer({
            element: document.getElementById('player'),
            narrow: false,
            autoplay: true,
            showlrc: false,
            mutex: true,
            theme: '#FFF0',
            mode: 'random',
            preload: 'metadata',
            listmaxheight: '200px',
            music:JSON.parse(e)
            });
            window.aplayers || (window.aplayers = []),
            window.aplayers.push(aplayerList)
        }
    })
})

有点强迫症的我对播放器样式稍作了修改,直接贴代码

//change aplayer style 
var aplayer  = document.getElementById('player');
aplayer.style.boxShadow = 'none';
aplayer.style.marginTop = '10px';
$('.aplayer-list-light').css('background','#d8e2eb69');

3. 启用widget

修改主题的_config.yml文件

# Sidebar
widgets:
  - author
  - aplayer//启用的插件
  - weibo
  - recent_posts
  - category
  - tag
  - archive
  - links

感谢Aplayer(DIYgod) 网易云API(meting)