Meteor

APlayer Plugin For Typecho

2016-08-17 / Meteor / Typecho / 插件 / 17169 次围观 / 3 条评论

近期发现音乐页面的虾米音乐盒子的音乐没有了,看来虾米音乐还是不稳定。于是就有打算安装音乐播放器插件的想法。typecho的音乐插件不是很多,但好多估计没有持续更新导致无法使用,后来在官方论坛里发现了APlayer插件,当然同时还有 羽中漫步 的 Audio Player插件,比较了一番,因为要用网易云的音乐,故使用了前者。这是来自DIYgod的一个十分漂亮而且功能齐全的html5音乐播放器widget,后来作者zgq354把它做成了Typecho的插件

支持自定义歌曲链接或直接插入网易云音乐的歌曲
插件效果可以查看 音乐 页面:http://www.pxsky.net/music.html

具体介绍,安装方式以及使用方法请直接戳Github链接
Github: https://github.com/zgq354/APlayer-Typecho-Plugin

介绍

通过简短的代码在文章或页面中插入漂亮的Html5播放器
自动解析lrc链接,可根据歌曲名和歌手名自动查找封面并生成缓存
支持网易云音乐单曲、歌单、专辑、歌手id的解析
与APlayer保持同步更新

声明

本插件仅供个人学习研究使用,请勿将其用作商业用途,音乐版权归网易云音乐 music.163.com 所有。

安装

安装前请确保插件中的cache目录可写(保存缓存用,否则会让博客加载缓慢)

主机需支持curl扩展,否则将可能不能自动查找封面、解析网易云音乐id、从https的url中获取歌词(file_get_contents在不支持openssl的主机中不能打开https链接)

Download ZIP, 解压,将 APlayer-Typecho-Plugin-master 重命名为 APlayer ,之后上传到你博客中的 /usr/plugins 目录,在后台启用即可

使用方法

在文章或页面中加入下方格式的短代码即可

调用格式

单曲播放:

[player 属性1="值1" 属性2="值2" 属性3="值3" /]
or

[player url="http://xxx.com/xxx.mp3" artist="Someone" title="Title"]][lrc][[00:00.00]]Test lyrics[[/lrc]][[/player]

网易云音乐:
[player id="29947420"/]

多首歌曲:

[player 属性1="值1" 属性2="值2" 属性3="值3"]]
[[mp3 歌曲属性1="值1" 歌曲属性2="值2" 歌曲属性3="值3"/]]
[[mp3 歌曲属性1="值1" 歌曲属性2="值2" 歌曲属性3="值3"]][lrc]歌词[[/lrc]][[/mp3]]
[[/player]
example:

[player theme="#e6d0b2" autoplay='1']]
[[mp3 url="http://xxx.com/xxx.mp3" artist="Someone" title="Title"/]]
[[mp3 url="http://xxx.com/xxx.mp3" artist="Someone" title="Title"]][lrc][[00:00.00]]Test lyrics[[/lrc]][[/mp3]]
[[mp3 id="29947420"/]] //网易云音乐歌曲id直接解析
[[/player]

网易云音乐解析示例:

[player id='346069,346080,29947420'/] //一次加入三首歌
[player id='11362719' type='collect'/] //歌单
[player id='3684' type='artist'/] //艺人热门五十首
[player id='3084335' type='album'/] //专辑

如果要阻止代码解析成为播放器的话,用[]包裹player标签即可

[player id='3084335' type='album'/]

输出:
[player id='3084335' type='album'/]

用到的shortcode标签

关于各个标签的属性

播放器配置(只能在player标签中使用):

showlrc: 当showlrc的值为 0 或 false 时,不显示歌词,否则将按照歌曲有无歌词来判断是否输出歌词
autoplay: 是否自动播放,默认为 false (注:由于移动端浏览器限制,此功能在移动端浏览器将不起作用)
theme: 设置主题颜色(十六进制),默认为 '#e6d0b2'
歌曲的属性(可在mp3player中使用,不能用于修改整个歌单的属性):

url: mp3文件的链接,必需
lrc: 歌词的lrc链接,非必需
lrcoffset: 歌词整体提前时间(ms)若这个值为负数则为歌词整体延后的时间
title: 歌曲的标题,若值为空则显示 Unknown
artist: 歌曲的艺术家,若值为空则显示 Unknown
cover: 封面图片链接,非必需,若该值为图片链接则按照链接加载封面图,若没有此属性则会按照title和artist自动从豆瓣api中查找封面图,若值为 false 则不自动查找封面,显示默认封面图片
网易云音乐(与歌曲属性用法一样)

id: 歌曲/歌单/专辑/艺人的id ,如果是歌曲的话可用 , 分隔歌曲id一次插入多首歌曲
type: 用以判断id的类型,分为4种:song:歌曲,album:专辑,artist:艺人,collect:歌单

清空歌词,播放列表、封面图片url的缓存
前往插件设置页面点击红色清空缓存按钮即可

文章转自:http://blog.izgq.net/archives/456/

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自Meteor's Blog,原文地址《APlayer Plugin For Typecho
上一篇: 深度XP精简系统收藏 下一篇: 解决centos系统重启dns丢失的方法

已有 3 条评论

  1. Coney

    用了一阵子TP,现在有回到WP的环抱了。
    不过TP真的很快速,很简洁。

    1. Meteor

      我的另个网站也是WP的,感觉它太臃肿,对于我这样的仅仅玩玩博客,随便写写,要求不高的人来说,TP已经够用,而且就像你说的,运行很快。

  2. 卢松松博客

    不错,看完这个收获很大!

> 添加新评论

Copyright © Meteor's Blog / Theme by Ben & Meteor / Typecho))) / Admin / Sitemap /