漂亮的音乐播放器插件Aplayer

2020年2月8日10:12:31 12 952 1532字阅读5分6秒

漂亮的音乐播放器插件Aplayer

Aplayer是一款HTML5的WordPress音乐播放器,界面仿照网易云音乐外链播放器,每个音乐需要填写音乐名称、作者、音乐封面、还有外链地址,添加成功后在音乐列表右侧复制短代码到文章需要显示的位置粘即可。

使用方法:

下载插件并在后台进行启用,启用后会在文章栏目下多个“音乐”栏目。

在后台“音乐”下,填写相关内容,如下图所示:

漂亮的音乐播放器插件Aplayer

填写相关内容之后保存,在所有音乐里面可以查看到音乐信息;

复制音乐的“短代码”到文章里就能正常播放了。

漂亮的音乐播放器插件Aplayer

音乐样式:

[ar:海伦]
[ti:桥边姑娘]
[00:00.00]海伦-桥边姑娘
[00:00.33]作词:海伦
[00:00.48]作曲:海伦
[00:00.64]编曲:漠心藤
[00:00.79]视觉:华玮轩
[00:17.21]暖阳下我迎芬芳
[00:20.04]是谁家的姑娘
[00:23.21]我走在了那座小桥上
[00:26.18]你抚琴奏忧伤
[00:29.50]桥边歌唱的小姑娘
[00:32.36]你眼角在流淌
[00:35.64]你说一个人在逞强
[00:38.71]一个人念家乡
[00:42.01]风华模样你落落大方
[00:48.02]坐在桥上我听你歌唱
[00:56.75]我说桥边姑娘你的芬芳
[01:03.53]我把你放心上
[01:06.69]刻在了我心膛
[01:09.77]桥边姑娘你的忧伤
[01:15.98]我把你放心房
[01:18.98]不想让你流浪
[01:37.91]暖阳下的桥头旁
[01:40.66]有这样一姑娘
[01:43.82]她有着长长的乌黑发
[01:46.95]一双眼明亮
[01:50.17]姑娘你让我心荡漾
[01:53.15]小鹿在乱撞
[01:56.32]你说无人在身旁
[01:59.48]一个人在流浪
[02:02.66]风华模样你落落大方
[02:08.77]坐在桥上我听你歌唱
[02:17.41]我说桥边姑娘你的芬芳
[02:24.27]我把你放心上
[02:27.40]刻在了我心膛
[02:30.53]桥边姑娘你的忧伤
[02:36.66]我把你放心房
[02:39.77]不想让你流浪

歌词的格式如下:

[ar:海伦]
[ti:桥边姑娘]
[00:00.00]海伦-桥边姑娘
[00:00.33]作词:海伦
[00:00.48]作曲:海伦
[00:00.64]编曲:漠心藤
[00:00.79]视觉:华玮轩
[00:17.21]暖阳下我迎芬芳
[00:20.04]是谁家的姑娘
[00:23.21]我走在了那座小桥上
[00:26.18]你抚琴奏忧伤
[00:29.50]桥边歌唱的小姑娘
[00:32.36]你眼角在流淌
[00:35.64]你说一个人在逞强
[00:38.71]一个人念家乡
[00:42.01]风华模样你落落大方
[00:48.02]坐在桥上我听你歌唱
[00:56.75]我说桥边姑娘你的芬芳
[01:03.53]我把你放心上
[01:06.69]刻在了我心膛
[01:09.77]桥边姑娘你的忧伤
[01:15.98]我把你放心房
[01:18.98]不想让你流浪
[01:37.91]暖阳下的桥头旁
[01:40.66]有这样一姑娘
[01:43.82]她有着长长的乌黑发
[01:46.95]一双眼明亮
[01:50.17]姑娘你让我心荡漾
[01:53.15]小鹿在乱撞
[01:56.32]你说无人在身旁
[01:59.48]一个人在流浪
[02:02.66]风华模样你落落大方
[02:08.77]坐在桥上我听你歌唱
[02:17.41]我说桥边姑娘你的芬芳
[02:24.27]我把你放心上
[02:27.40]刻在了我心膛
[02:30.53]桥边姑娘你的忧伤
[02:36.66]我把你放心房
[02:39.77]不想让你流浪

不保证播放器与任何主题都能兼容,本站使用主题修改内容如下:其他主题请根据CSS自行修改

<style>
.article-content .aplayer{line-height:normal}
.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{top:0px;left:3px}
</style>

选项说明:

element:绑定的播放器元素。

narrow:是否使用窄屏模式,即只显示缩略图和播放按钮,请看演示demo中的样式3。

autoplay:是否自动播放,注意这个在移动端手机上不支持自动播放的。

showlrc:是否展示歌词,请看演示demo中的样式1。

music:用来设置播放音乐相关信息的集合,其中title表示音乐标题,author表示音乐的作者,url表示播放文件地址,pic当然就是播放的音乐缩略图。

APlayer还提供了播放器事件,如载入播放器:ap.init();播放:ap.play()和暂停:ap.pause()。

有关APlayer项目的最新进展,大家可以关注APlayer项目地址:https://github.com/DIYgod/APlayer

    文章来源:刘荣焕博客 https://liuronghuan.com/aplayer.html
继续阅读
weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
知更鸟主题文章底部添加个性图标和分类目录 WordPress

知更鸟主题文章底部添加个性图标和分类目录

星光自己也摸索过文章显示当前分类目录的方法,虽然也是成功了,但是不怎么美丽,离我的要求还有一点点的距离,没有达到完美化。在与“简单生活”博客友联过程中看到他的网站显示的效果正是我想要的,随与博主联系获...
知更鸟主题回复邮件通知功能失效修复方法 WordPress

知更鸟主题回复邮件通知功能失效修复方法

星光最近使用了知更鸟主题的最新版本,主题变化挺大的,越来越好,在这里要感谢“鸟哥”的辛勤付出,开发出了这么优秀的WordPress主题!自从更新主题后,博客也有不少网友过来捧场留言,星光也在第一时间回...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:12   其中:访客  8   博主  4
    • 演员 演员 1 来自天朝的朋友 谷歌浏览器 Windows 7 中国 移动

      还要添加歌词-.-

        • 星光 星光  博主 来自天朝的朋友 谷歌浏览器  YAL-AL10 Build/HUAWEIYAL-AL10 山东省潍坊市 联通

          回复 演员 不添加也可以,这个只是演示了加歌词后的效果,妥妥的~

        • 叶先生博客 叶先生博客 4 来自天朝的朋友 谷歌浏览器 Windows 7 江西省赣州市 移动

          还是你之前的那个音乐好看些

            • 星光 星光  博主 来自天朝的朋友 谷歌浏览器  YAL-AL10 Build/HUAWEIYAL-AL10 山东省青岛市 联通

              回复 叶先生博客 之前那个音乐是哪个?以前只用过WP自带的,但没有这个漂亮。

                • 叶先生博客 叶先生博客 4 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 移动

                  回复 星光 就是网易云的那个啊

                    • 星光 星光  博主 来自天朝的朋友 谷歌浏览器  YAL-AL10 Build/HUAWEIYAL-AL10 山东省潍坊市 联通

                      回复 叶先生博客 网易云因为版权问题:一是部分音乐不能生成外链播放器,第二有的音乐搜不到。

                • 智幼未来 智幼未来 0 来自天朝的朋友 火狐浏览器 Windows 7 宁夏银川市 电信

                  不错的,适合有些文章,看起来比较漂亮,妥妥的。

                  • 779966 779966 0 来自天朝的朋友 谷歌浏览器  PCRM00 Build/QKQ1.191117.002 山东省潍坊市 电信

                    播放器可以自动播放吗?

                    • 星光 星光  博主 来自天朝的朋友 火狐浏览器 Windows 10 山东省潍坊市 联通

                      “779966”那位博友,在这里回复你:播放器可以自动播放音乐。本站启用了 @回复 邮件提醒功能,请尽量把邮箱地址填写正确,谢谢配合!

                      • 绿软吧 绿软吧 2 来自天朝的朋友 谷歌浏览器 Windows 7 福建省厦门市 电信

                        感谢分享!!!!

                        • porndodo porndodo 0 搜狗浏览器 Windows 7 北美地区

                          不让出门,只能刷刷博客了!

                          • 尘事如潮人如水 尘事如潮人如水 1 来自天朝的朋友 谷歌浏览器 Windows 10 甘肃省兰州市 电信

                            不错,谢谢分享!