如何搭建个人网页（八）—— 音乐播放器

发表于 2024-12-16 更新于 2024-12-22 分类于个人网页搭建阅读次数： Waline：本文字数： 4.1k 阅读时长 ≈ 7 分钟

开始

本章主要讲如何为网站增加音乐播放器。

Aplayer音乐播放器

音乐播放器我选择的是Aplayer插件，能够自定义歌曲列表，并定义播放设置等。

首先，安装aplyer，在blog/目录下：

1	npm install aplayer --save

然后将blog/node_modules/aplayer/dist目录复制到blog/themes/next/source下。

在目录 blog/themes/next/source/dist 下新建 music.js 文件，该文件将定义播放器的设置和播放列表，以下是一个示例：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    // fixed: true,
    // autoplay: true,
    audio: [
      {
        name: '晴天',
        artist: '周杰伦',
        url: '/images/周杰伦 - 晴天.mp3',
        cover: '/images/晴天.png',
      },
      {
        name: '我记得',
        artist: '赵雷',
        url: '/images/赵雷 - 我记得.flac',
        cover: '/images/我记得.png',
      },
    ]
  });

然后是选择将音乐播放器插入的位置，我放到了侧边栏的底下，比较美观一点。打开blog/themes/next/layout/_macro/sidebar.njk 文件，找到<div class="sidebar-panel-container">和<div class="back-to-top animated"...>，在这两个元素中间插入以下内容：

<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>

插入的位置如下图所示：

到此就算完成了，可以用hexo clean/g/s命令三件套查看效果。

引入歌曲

定义播放器的设置和播放列表都在music.js文件中，引入歌曲有两种方式，外部链接或内部链接，示例如下：

{
    name: '晴天',
    artist: '周杰伦',
    url: '/images/周杰伦 - 晴天.mp3',
    cover: '/images/晴天.png',
},
{
    name: 'スパークル（火花）——《你的名字。》插曲',
    artist: 'ゆう十',
    url: 'http://music.163.com/song/media/outer/url?id=1984045303.mp3',
    cover: 'http://p2.music.126.net/SiTInUUumsPdSdndv1MCyw==/109951167903888878.jpg?param=130y130',
},
{
    name: 'Call of Silence',
    artist: '澤野弘之 (さわの ひろゆき)',
    url: 'https://xxxxx-bucket.oss-cn-nanjing.aliyuncs.com/music/call%20of%20silence.mp3',
    cover: 'https://xxxxx-bucket.oss-cn-nanjing.aliyuncs.com/music/call%20of%20silence.png',
},

如果使用内部链接，只需要先下载歌曲，然后在blog/source/images目录中上传对应的歌曲和封面文件即可。

关于下载歌曲，网易云很多歌曲都没有版权；qq音乐下载的话，如果是非vip歌曲，下载的会是flac文件，经测试是可以正常播放的；如果是vip歌曲，下载下来会是mgg文件，我没试过能否正常播放。

qq音乐下载说明：

应版权方要求，此类歌曲会员用户下载后为专属格式，拷贝至其他播放器可能无法播放。

若需拷贝至其他播放器播放，可单曲购买该歌曲后重新下载，即可拷贝至其他播放器播放。

这里放个免费下mp3歌曲和lrc歌词的网站：歌曲宝-找歌就用歌曲宝-MP3音乐高品质在线免费下载

使用外部链接的话，可以用网易云的外链播放器，复制其中的src即可，但是有很多歌曲有版权保护，无法生成。

还有一个办法，就是使用我们前面提到的阿里云OSS，然后将歌曲和封面上传到bucket中（上传文件不建议有中文，不然链接会很丑），然后复制链接填入music.js，亲测有效。这样还能控制静态网页代码的大小。（推荐）

Aplayer设置

此外还有一些Aplayer的设置，这些都在music.js文件中填写：

fixed: true；使用后音乐播放器会固定出现在aplayer所在元素的左下角，因此如果要开启，请将aplayer元素放在整个网页之中（否则不美观），例如在blog/themes/next/layout/_layout.njk文件的最后一个<body>前面插入，效果如下：

此时可能导致back2top按钮被播放器遮挡，解决：进入blog\themes\next\source\css\_common\components\back-to-top.styl文件，给 &.back-to-top-on 添加一个播放器高度的值，例如：
1
2
3
&.back-to-top-on {
bottom: $b2t-position-bottom-on + 50px;
}
autoplay: true；开启后会自动播放音乐，但是大部分浏览器都禁止了自动播放，所以开了也没用。
order: ‘list’/‘random’；列表顺序播放与随机播放。

更多其他设置参考官网Home - APlayer。

解决切换页面播放中断问题

参考：Hexo Next主题中添加aplayer播放器 | 南风

如果你切回页面，会发现歌曲播放中断，并且也丢失了进度。好在现在的Next主题里已经集成了pjax插件，利用它就可以解决问题，这个插件主要功能是加速页面的切换速度，建议启用！

在~/themes/next/目录下右键git bash here，输入命令：

1	git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

下载完成后打开主题配置文件_config.next.yml文件，定位到pjax处，启用就可以了：

1	pjax: true

开启歌词

aplayer支持三种方法引进歌词，分别为lrc、js、html，这里介绍lrc方法。

在music.js文件中，按如下改写即可：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 3,
    audio: {
        name: 'name',
        artist: 'artist',
        url: 'demo.mp3',
        cover: 'demo.jpg',
        lrc: 'lrc.lrc'
    }
});

其中lrc应该满足以下格式之一：

[mm:ss]APlayer
[mm:ss.xx]is
[mm:ss.xxx]amazing
[mm:ss.xx][mm:ss.xx]APlayer
[mm:ss.xx]<mm:ss.xx>is
[mm:ss.xx]amazing[mm:ss.xx]APlayer

注意：有些lrc文件的时间戳可能类似于[12:03.2]或者[32:43.250158]，**这种都是aplayer不支持的，会导致这行歌词被跳过，**请手动进行修改。

解决CORS跨域问题

对于lrc歌词，如果使用外部链接的方法，有可能发现无法加载，检查控制台报错显示：

ef8253878ce39340cb44e90709873bc5

这是CORS跨域问题，猜测可能的原因是lrc文件的Header Type为application/octet-stream，而mp3和png的Header Type在阿里云OSS里默认允许跨域。

解决：在oss控制台，进入bucket，左侧点击 ”数据安全/跨域设置“，创建规则，按下图填写，然后确定。

播放器美化

参考：Aplayer 音乐播放器美化配置 | Dale 的花园 ^_^