Solo 博客添加 APlayer 音乐播放器插件

常见外链播放器的通病

这两天有空，想把自己的博客主页添加一个音乐播放器插件，搜了一下，由于版权意识逐渐增强，现在网上常见的外链播放器就只有虾米还有网易的了，虾米的不是很好看，网易云的外链播放器毛病也不少，支持外链播放的音乐很少，而且还不能够调节音量。然后就看到一款 APlayer 插件，这个是真的好看哈哈哈哈哈，主要是可以自己选择音乐。

APlayer 插件的优势

然后就看到一款 APlayer 插件，这个是真的好看哈哈哈哈哈，主要是可以自己选择音乐。不光能够调节音量，还支持歌词展示，有点 Nice。然后就准备用这个了，我是准备加载公告栏的。

使用方法

引入 Aplayer.js

我是在 header 里面引入的 cdn

<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
​

编写播放器参数

根据 Aplayer 文档的描述，编写以下代码

<div id="aplayer"></div>
​

<script>
        var ap = new APlayer
                ({
                    element: document.getElementById('aplayer'),
                    narrow: false,
                    autoplay: true,
                    showlrc: true,
                    music: {
                            title: '歌曲标题',
                            author: '歌手',
                            url: '音乐URL',
                            pic: '首图'
                            }
                });
        ap.init();
    </script>
​

然后刷新你的主页，就可以看到已经有音乐的栏目了

带有歌词的播放界面

添加代码

<div id="aplayer">
            <pre class="aplayer-lrc-content">
                [00:00.00] 作曲 : 林一峰
                [00:01.00] 作词 : 易家扬
                [00:24.898]听见 冬天的离开
                [00:29.697]我在某年某月 醒过来
                [00:34.768]我想 我等 我期待
                [00:40.598]未来却不能因此安排
                [00:53.398]阴天 傍晚 车窗外
                [00:58.758]未来有一个人在等待
                [01:04.298]向左向右向前看
                [01:09.599]爱要拐几个弯才来
                [01:14.369]我遇见谁 会有怎样的对白
                [01:19.638]我等的人 他在多远的未来
                [01:24.839]我听见风来自地铁和人海
                [01:30.399]我排着队 拿着爱的号码牌
                [01:56.388]阴天 傍晚 车窗外
                [02:02.298]未来有一个人在等待
                [02:06.650]向左向右向前看
                [02:12.000]爱要拐几个弯才来
                [02:16.980]我遇见谁 会有怎样的对白
                [02:22.289]我等的人 他在多远的未来
                [02:27.989]我听见风来自地铁和人海
                [02:32.688]我排着队 拿着爱的号码牌
                [02:43.380]我往前飞 飞过一片时间海
                [02:48.298]我们也曾在爱情里受伤害
                [02:53.689]我看着路 梦的入口有点窄
                [02:58.748]我遇见你是最美丽的意外
                [03:05.888]总有一天 我的谜底会揭开
            </pre>
        </div>
    <script>
        var ap = new APlayer
                ({
                    element: document.getElementById('aplayer'),
                    narrow: false,
                    autoplay: true,
                    showlrc: true,
                    music: {
                            title: '遇见',
                            author: '孙燕姿',
                            url: 'http://music.163.com/song/media/outer/url?id=287035.mp3',
                            pic: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000002ehzTm0TxXC2.jpg'
                            }
                });
        ap.init();
    </script>
​

这里只是演示了其中一种添加歌词的方法，更多添加歌词的方法详见：APlayer 文档

然后刷新我们的主页，播放音乐就可以看到歌词了！

音乐列表

音乐列表的话，直接把 js 代码更改为：

<script>
        var ap = new APlayer
                ({
                    element: document.getElementById('player1'),
                    narrow: false,
                    autoplay: false,
                    showlrc: false,
                    listFolded: false,
                    listMaxHeight: 90,
                    music:[{
                            title: 'Something Just Like This (Megamix)',
                            author: 'The Chainsmokers',
                            url: 'https://xxx.oss-cn-chengdu.aliyuncs.com/AnDyWuMUSICLAND+-+Something+Just+Like+This+%28Megamix%29.mp3',
                            pic: 'https://xxx.oss-cn-chengdu.aliyuncs.com/offline-471565537.jpg'
                            },
                            {
                            title: '遇见',
                            author: '孙燕姿',
                            url: 'http://music.163.com/song/media/outer/url?id=287035.mp3',
                            pic: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000002ehzTm0TxXC2.jpg'
                            }]
                });
        ap.init();
    </script>
​

更多参数参见 Aplayer 文档

然后刷新主页，就可以看到播放列表了

写在最后

这里写的各种 URL 最后都可以更换成你们自己的对象储存或者是私有资源路径，这样也规避了由于版权导致的无法访问的问题。是不是很 Nice 啊！！！哈哈哈哈哈哈

更新

⚠️ 警告！！！！！

引入 js CDN 的代码不要放在 header 里面，这样会引起管理页面出现 Bug，就是点击管理页面的时候不会跳转，但是也不会报错！！

现在把代码位置更改到公告里面

就是把引入 js 的代码写在公告里面