• Stars
    star
    129
  • Rank 277,909 (Top 6 %)
  • Language
    PHP
  • License
    MIT License
  • Created over 8 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A typecho plugin for a beautiful html5 music player https://github.com/MoePlayer/cPlayer/tree/f9b593dcd89395f9d7dd08ccda428f7628ab9ab2

cPlayer-Typecho-Plugin

A typecho plugin for the beautiful html5 music player https://github.com/MoePlayer/cPlayer/tree/f9b593dcd89395f9d7dd08ccda428f7628ab9ab2

Demo

cftdemo

介绍

  1. 通过简短的代码在文章或页面中插入漂亮的Html5播放器
  2. 便捷的配置窗口,不用再手动填代码啦
  3. 自动解析lrc链接,可根据歌曲名和歌手名自动查找封面并生成缓存
  4. 支持网易云音乐单曲、歌单、专辑、歌手id的解析
  5. 网易云音乐返回结果支持https
  6. 与cPlayer保持同步更新

声明

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

安装方法

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

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

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

使用方法

在文章或页面中点击编辑器中的插入音乐按钮(目前仅支持原生编辑器/EditorMD/wangEditor)按提示配置,或手动加入下方格式的短代码即可:

调用格式

单曲播放:
[player 属性1="值1" 属性2="值2" 属性3="值3" /]
or
[player 属性1="值1" 属性2="值2" 属性3="值3"][lrc]歌词[/lrc][tlrc]歌词翻译[/tlrc][/player]

example:

[player url="http://xxx.com/xxx.mp3" artist="Someone" name="Title"/]

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

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

多首歌曲:
[player]
[mp3 歌曲属性1="值1" 歌曲属性2="值2" 歌曲属性3="值3"/]
[mp3 歌曲属性1="值1" 歌曲属性2="值2" 歌曲属性3="值3"][lrc]歌词[/lrc][tlrc]歌词翻译[/tlrc][/mp3]
[/player]

example:

[player]
[mp3 url="http://xxx.com/xxx.mp3" artist="Someone" name="Title"/]
[mp3 url="http://xxx.com/xxx.mp3" artist="Someone" name="Title"][lrc][00:00.00]Test lyrics[/lrc][tlrc][00:00.00]Test lyrics[/tlrc][/mp3]
[mp3 id="29947420"/] //网易云音乐歌曲id直接解析
[/player]
网易云音乐解析示例:
[player id='36492783,33715196,461011'/] //一次加入三首歌
[player id='456390601' type='collect'/] //歌单
[player id='2116' type='artist'/] //艺人热门五十首
[player id='2897014' type='album'/] //专辑
[player type='recommend'/] //每日推荐

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

[[player id='36492783,33715196,461011'/]]

输出:
[player id='36492783,33715196,461011'/]

用到的shortcode标签

[player] :整个播放器的标签,里面可用下面提到的所有属性
[mp3] :可以用歌曲属性和网易云音乐属性,用于嵌套在[player]标签内部添加音乐
[lrc] :用以添加文本的歌词,可嵌套在[mp3],[player]标签内部;只有当其父标签只定义一首歌的时候才起作用
[tlrc] :用以添加文本的歌词翻译,可嵌套在[mp3],[player]标签内部;只有当其父标签只定义一首歌的时候才起作用,需要[lrc]标签

关于各个标签的属性

歌曲的属性(可在[mp3]或[player]中使用,不能用于修改整个歌单的属性):

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

网易云音乐(与歌曲属性用法一样)

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

特殊属性

autoplay: 自动播放,可用值为 true 或 false,默认为 false

每日推荐说明

需先在设置页填入网易云音乐 Cookie 中 MUSIC_U 字段的值,需要带上 MUSIC_U=,日推缓存将在缓存时间第二天 6:00 之后失效

另请注意,现在(2018-1-19)不填 MUSIC_U 字段歌单将极大几率只返回一首,若你遇到此问题,请填入 MUSIC_U 字段并清空缓存重试

关于 MUSIC_U

MUSIC_U 字段记录了账号在网易云的登录状态(但不包含密码信息),任何时候都不应公开或与他人分享 MUSIC_U 字段的值

清空歌词,播放列表、封面图片url的缓存

前往插件设置页面点击红色清空缓存按钮即可

Thanks

制作过程中参考~~(基本照抄)~~了zgq354的代码,特此感谢

LICENSE

MIT © journey.ad

More Repositories

1

Moe-Counter

多种风格可选的萌萌计数器
JavaScript
1,301
star
2

sd-webui-bilingual-localization

Stable Diffusion web UI bilingual localization extensions. SD WebUI双语对照翻译插件
JavaScript
852
star
3

pixiv-viewer

又一个Pixiv阅览工具
Vue
259
star
4

live2d_src

基于 https://github.com/EYHN/hexo-helper-live2d 的修改版
JavaScript
237
star
5

chat-room

一个普通的聊天室
EJS
191
star
6

Bitmagnet-Next-Web

🧲 A modern BitTorrent indexer, powered by Bitmagnet. / 一个更现代的磁力搜索列表程序,由 Bitmagnet 强力驱动。
TypeScript
119
star
7

Snow-Typecho-Plugin

简单的,有丰富自定义项的 typecho 页面下雪插件
PHP
74
star
8

honkai-starrail-scene

【崩坏:星穹铁道】预约页场景提取
JavaScript
61
star
9

jianpu

利用Web Audio API将数字简谱转为钢琴曲
HTML
51
star
10

journey-ad

44
star
11

hentai-wallpaper

绅士的壁纸
Python
42
star
12

slime-pixi

使用 PIXI.JS 复刻的原神史莱姆乐园活动
JavaScript
33
star
13

sd-webui-custom

给Stable Diffusion web UI加点料
Python
33
star
14

HyperMD-Typecho-Plugin

适用于Typecho的Markdown编辑器HyperMD
CSS
32
star
15

wangEditor-Typecho-Plugin

适用于Typecho的wangEditor插件 https://github.com/wangfupeng1988/wangEditor/
JavaScript
32
star
16

MDRuby-Typecho-Plugin

Typecho Markdown Ruby 标签拓展支持插件
PHP
22
star
17

oreooo

使用 Vue CLI 重置的奥利奥!
Vue
22
star
18

pixel-paint

Vue 实现的像素绘板应用
Vue
16
star
19

bilicdn

12
star
20

uebersicht-widget

我用的一些 Übersicht 小部件
JavaScript
11
star
21

blog-img

CSS
10
star
22

nocilol.me

个人博客
Stylus
10
star
23

HideText-Typecho-Plugin

为文章添加肉眼不可见的额外信息,可用于追踪未授权转载行为
PHP
9
star
24

DanmakuSender

哔站弹幕发送者uid反查
JavaScript
9
star
25

Huaji-Typecho-Plugin

A typecho plugin of Huaji.
PHP
5
star
26

cf-pages-proxy

JavaScript
4
star
27

oreooo-react

使用 React Hooks 重置的奥利奥!
JavaScript
3
star
28

qqfm-vue

Vue 制作的 QQFM 播放器
Vue
2
star
29

Image-Box-Typecho-Plugin

Image-Box for Typecho
PHP
2
star
30

journey-ad.github.io

GitHub pages index
2
star
31

Shields-Typecho-Plugin

为 Typecho 添加 shields.io 支持
PHP
1
star
32

dotfiles_autobackup

auto backup configuration dot files.
1
star