APlayer Typecho Plugin with HTTPS

in 折腾 with 82 comments

APlayer是基佬@DIYGod开发维护的一款HTML5在线音乐播放器,支持本地音频播放,网易云音乐的歌曲、封面、歌词解析。而博主@zgq354此前已经将其整合为typecho插件,不过这款插件已经很久没有更新,解析出来的网易云音乐数据并没有使用https安全协议。
昨天DIY帮我解决了播放器与Pjax的兼容问题,顺手我又将插件的云音乐解析部分做了部分改动,现在该插件已经支持网易云音乐的https解析。

更新历史:

介绍

通过简短的代码在文章或页面中插入漂亮的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 属性1="值1" 属性2="值2" 属性3="值3"][lrc]歌词[/lrc][/player]

example:

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

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

网易云音乐:

[player id="719102"/]

多首歌曲:

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

网易云音乐解析示例

[单曲]

更多用法请参考Github。

用到的shortcode标签

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

Github

点此进入:APlayer-Typecho-Plugin

Responses
选择表情选择表情
  1. 博主,支持HTTPS解析指的是解析的地址还是网易的吗?

    Reply
    1. @钛客志

      是网易的,只是协议头变了。

      Reply
  2. 感觉你们typecho都是折腾粉~另外这样的布局好多。。。左边的导航那种

    Reply
    1. @姜辰

      写博客多年,三栏、单栏、右边栏、左边栏,都试过了,目前博客的排版还是比较符合我口味,说不准以后会变。 icon_wink.gif

      Reply
      1. @大袋鼠

        期待变得更好~~

        Reply
  3. 你好,您开发的插件貌似和一款主题有冲突。麻烦您能不能看一下,只要是这个主题和您的插件一起使用,评论框的css就会失效。而且播放器也用不了。https://github.com/Kilerd/Cat

    Reply
    1. @MoGeek

      你所发的这款主题不是typecho主题标准化结构。
      请在主题的footer.php文件中上面添加Aplayer的初始化函数。
      评论不方便贴代码,你可以在我博客html源代码中搜索找到那段JS。

      Reply
  4. 羡慕会自己写插件的人

    Reply
  5. 非常感谢劳动成果,但是使用与你的博客源码对比之后,发现github上面的plugin.php 输出js少了一句判断:
    if(document.getElementById('player' + APlayerOptions[i]['id'])) {
    导致在使用instantclick.js后会报错

    Reply
    1. @友人C

      感谢提醒,github已经更新了。

      Reply
  6. 非常感谢!
    但是F12 https的网易资源没办法加载出来,是现在又不行了吗?
    GET https://p4.music.126.net/jeTWEnqNvRAkhnljvWujtQ==/18421217811788044.jpg?param=106x106 net::ERR_CONNECTION_REFUSED

    还有一个小问题:直接使用就是适配pjax还是自己进行配置的呢?

    Reply
    1. @友人C

      报错是封面资源请求被拒绝,但我这里是正常的,你提供一下出错的页面我来看看。
      关于适配pjax需要自己配置,你可以看看我博客底部InstantClick初始化那里的js。(文中说的pjax实现方式就是InstantClick.js)

      Reply
      1. @大袋鼠

        我这儿,该页面就是报错的,不知道是否是网络原因?

        截图:http://ww4.sinaimg.cn/large/a15b4afegy1fcgn1i2k98j20x40cf40j

        Reply
        1. @友人C

          对了,网络环境是4G 移动,没有开代理,DIYGOD 博客的播放器我这边也没办法播放的

          Reply
          1. @友人C

            看来确实是北京移动这边的网络问题,换成wifi后,可以正常加载了

            Reply
  7. Techxiu

    用上啦,能增加自动播放就更好了:)

    Reply
    1. @Techxiu

      自动播放当然可以,详细可以看看github上的使用说明。

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

      Reply
      1. Techxiu
        @大袋鼠

        可以了,感谢!

        Reply
  8. 开始也用这插件,不过修改来修改去总有一点小瑕疵,干脆就用 audio 标签,然后音乐文章不预加载了。

    Reply
    1. @痞子鱼

      瑕疵好像就是和Pjax有点兼容问题,已经改好了。

      Reply
  9. 看文章看到那个事例想着这也是我需要的,读到评论惊了,是不是看到了什么不该看到的东西。一定是打开方式不对,我要刷新一下。

    Reply
    1. @smartsun

      哈哈哈,评论太下流了。
      这个插件有wordpress版。

      Reply
  10. 哇,DIYgod好棒!嫁我!

    Reply
    1. @DIYgod的女粉

      小心,DIYGod他草粉。

      Reply
      1. @大袋鼠

        真的么?那可以艹我么?好想被DIYgod艹呀!

        Reply
        1. @DIYgod的女粉

          你好,请不要发表色情言论。

          Reply