typecho漂亮的html5音乐播放器,便捷的配置面板,支持网易云解析-cPlayer

插件简介

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

插件截图

cplayer-1.png
cplayer.png


安装方法

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

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

下载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]

例:

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

例:

[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'/]

下载地址

插件下载

原创文章,作者:馒头侠,如若转载,请注明出处:https://www.mantouxia.com/1144.html
基于Bootsarp4的响应式的typecho博客主题-Reach
« 上一篇 02-29
typecho响应式炫紫模板-Purple
下一篇 » 03-01

发表评论