后端相关程序员

Hexo增加音乐播放功能

2019-01-14  本文已影响2人  才兄说

关于

在个人的站点上,如果有音乐播放的功能,那么读者可以一遍阅读文章,一边欣赏音乐,是一件很愉快的事情。下面就以本站点为案例,分享增加音乐播放功能的步骤。

具体操作

1.先上效果图


2.准备
APlayer,下载github压缩包,解压后把dist文件夹复制到\themes\next\source目录中。

在dist目录里,新建music.js文件,并把如下代码粘贴进去。

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
      {
        name: "你一定要幸福",
        artist: '简弘亦',
        url: 'http://www.ytmp3.cn/down/51689.mp3',
        cover: 'http://img.ytmp3.cn/image/52.jpg',
      },
      {
        name: '一百万个可能(Live)',
        artist: '摩登兄弟',
        url: 'http://www.ytmp3.cn/down/52772.mp3',
        cover: 'http://img.ytmp3.cn/image/53.jpg',
      },
      {
        name: 'The Rose',
        artist: 'Westlife',
        url: 'http://www.ytmp3.cn/down/56694.mp3',
        cover: 'http://img.ytmp3.cn/image/51.jpg',
      },
      {
        name: 'In The Eyes',
        artist: '江映东',
        url: 'http://www.ytmp3.cn/down/53053.mp3',
        cover: 'http://img.ytmp3.cn/image/10.jpg',
      }
    ]
});

3.在\themes\next\layout_layout.swig文件中,<body>里新增如下代码:

<!-- 音频播放 -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

重新发布就可以看到效果了。

4.补充
Aplayer 中文文档
mp3音乐外链网站

个人站点首发

上一篇下一篇

猜你喜欢

热点阅读