AI 摘要

这篇文章讲了如何在WordPress文章中使用自定义的Aplayer音乐播放器。通过添加自定义HTML代码到文章中,可以实现稳定的效果。用户需要手动更改参数,确保歌词格式正确。同时提供了一键生成器,简化了代码的添加过程。需要注意不能在同一篇文章中放置多个Aplayer,如果需要可以将其更名。此外,还指出了CDN资源加载可能会碰到的问题,并提供了解决方案。

1.效果展示:

离别开出花 - 就是南方凯

By Dos7t3r | 417.red

作词Lyricist:李浩瑞

作曲Composer:李浩瑞

制作人Producer:刘昊霖/李浩瑞

编曲Arranger:谭侃侃

人声编辑Vocal Editing:刘昊霖/谭笑聪

配唱制作人Vocal Producer:刘昊霖/李浩瑞

录音师Recording Engineer:袁中仁

混音师Mixing Engineer:谭笑聪

母带后期混音师Mastering Engineer:谭笑聪

视觉设计Visual Design:kidult.

监制Executive Producer:陶诗

策划总监Planning Director:左三好

营销推广Marketing Promoter:祝鑫

项目统筹Project Overall Planning:张北@新鲜制造

录音棚Vocal Recording Studio:好乐无荒录音棚(长沙)

混音棚Mixing Studio:好乐无荒混音棚(长沙)

制作公司Manufacturing Company:好乐无荒

联合出品 Joint Poduction:好乐无荒×Q音新鲜制造

OP/SP:好乐无荒

(本作品声明:著作权权利保留,未经许可,不得使用)

喔~眼泪轻轻地擦

别管那多嘴乌鸦

咽下那些风沙

你才能慢慢长大

要错过几个她

用你最好的年华

这是青春的代价

坐上那朵离家的云霞

飘去无人知晓的天涯

背着妈妈说的那句话

孩子人生其实不复杂

喔~眼泪轻轻地擦

别管那多嘴乌鸦

咽下那些风沙

你才能慢慢长大

要错过几个她

用你最好的年华

这是青春的代价

当离别开出花

伸出新长的枝桠

像冬去春又来

等待心雪融化

你每次离开家

带着远方的牵挂

那城市的繁华

盖住了月牙

当离别开出花

它生长在悬崖

在最高的山顶

才听得见回答

没什么好害怕

孩子放心去飞吧

在你的身后

有个等你的家

坐上那朵离家的云霞

飘去无人知晓的天涯

背着妈妈说的那句话

孩子人生其实不复杂

喔~眼泪轻轻地擦

别忘那童年梦话

散在远方的花

也随风慢慢长大

要错过几个她

用你最真的年华

这是青春的回答

当离别开出花

伸出新长的枝桠

像冬去春又来

等待心雪融化

你每次离开家

带着远方的牵挂

那城市的繁华

它生长在悬崖

孩子放心去飞吧

在你的身后

有个等你的家

00:00 / 00:00
An audio error has occurred.
  1. 1 离别开出花 就是南方凯

一键生成器请访问:

2.介绍

由于有的文章使用第三方平台嵌入的话,因为种种原因,效果可能达不到预期。

于是,这个用WordPress写文章可以自定义html的特色 而诞生的自定义Aplayer就诞生啦~

使用时候只需要找到后台添加

添加新模块,向下滑,找到【自定义html】

在这里将代码复制进去,更改参数即可~

因为走的不是解析,所以比较稳定,缺点是比较麻烦

注意,参数应该在这里设置:

你应该写成下面这样,将内容放到两个英文的单引号之间:

歌词如果你选择url,那么填入url即可;如果你选了粘贴,那么像我这样严格按照lrc歌词格式填写即可

重点强调一下,必须是[xx:xx.xx]这样的格式,如果不按照格式的话歌词可能会缺少(不会展示)

需要你手动修改一下

2025-01-11 现在不需要啦,如果你用我的generator生成的话会自动帮你修复哦~

3.源码

<meta charset="UTF-8">
<div id="aplayer"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script>
// 初始化播放器
const ap = new APlayer({
container: document.getElementById('aplayer'), // 播放器容器
audio: [
{
name: '', // 歌曲名称
artist: '', // 艺术家名称
url: '', // MP3 文件的 URL
cover: '', // 封面图片的 URL
lrc: `` // 嵌入式歌词内容
}
],
lrcType: 1 // LRC 歌词支持 (0: 关闭, 1: 内嵌, 3: 外链)
});
</script>

4.懒人版

因为我也懒,所以我弄了个小玩意,可以一键生成代码,使用时候只需要直接复制粘贴进去即可~

5.Tips

1.多个Aplayer

需要注意的一个地方是,生成时候默认声明了一个叫aplayer的div块,如果你重复的话,他只会显示一个。这意味着你不能在同一篇文章中放两个生成的。有需求的话,你需要将aplayer更名。例如更名为aplayer1等。

新版本可以实现共存啦!

2.无法加载/一片空白?

这种情况下请先访问 https://cdn.jsdelivr.net 看能否正常打开

由于国内对 cdn.jsdelivr.net 的部分屏蔽,有的时候可能无法加载

如果无法打开请考虑更换cdn源,可以通过新版本的生成器自选CDN哦~