美文网首页后端相关程序员
Hexo增加音乐播放功能

Hexo增加音乐播放功能

作者: 才兄说 | 来源:发表于2019-01-14 00:17 被阅读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音乐外链网站

    个人站点首发

    相关文章

      网友评论

        本文标题:Hexo增加音乐播放功能

        本文链接:https://www.haomeiwen.com/subject/vmprdqtx.html