APlayer Typecho Plugin with HTTPS

in 折腾 with 79 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. Atlas

    不解析音乐,怎么办呢?
    获取到的歌曲时长一直是00:00 点播放无任何反应

    Reply
    1. @Atlas

      好久没更新了,用这个吧:https://github.com/MoePlayer/APlayer-Typecho

      Reply
      1. @大袋鼠

        请问您的这个评论系统是什么? icon_eek.gif

        Reply
        1. @Atlas

          博客原生的评论,没有用评论系统。

          Reply
  2. 大大,这版本版启用插件提示http error 500错误怎么办,旧版就正常呢

    Reply
    1. @Waxxh

      这个不太好排查问题,如果能有错误日志给我看看就好了。

      Reply
      1. @大袋鼠

        就是直接提示http error 500 呢,可以找错误日志显示么

        Reply
        1. @Waxxh

          如果你用 nginx 的话,可以在 nginx 错误日志里找找。

          Reply
          1. @大袋鼠

            嗯嗯,找到了,是这个PHP Parse error: syntax error, unexpected T_OBJECT_OPERATOR in /web/usr/plugins/APlayer/Plugin.php on line 531

            Reply
            1. @Waxxh

              那我知道问题了,你的 PHP 版本应该是小于 5.4,和插件有不兼容的地方。
              回头我修复一下,发了修复版本后会邮件通知你。

              Reply
              1. @大袋鼠

                可以正常用了,谢谢大大!有个点小问题,就是aplayer-list{max-height:300px约束不了了,歌曲几十首整列都是 icon_cry.gif

                Reply
              2. @大袋鼠

                嗯,是呢php5.3,多谢大大!

                Reply
  3. 多谢这么好的插件!

    但是,我下载了github上面插件,启用后网站首页显示500错误

    具体错误信息:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'APlayer_Plugin' not found in /www/wwwroot/ihewro.com/var/Typecho/Plugin.php on line 489

    Fatal error: Uncaught TypeError: Argument 1 passed to Typecho_Common::exceptionHandle() must be an instance of Exception, instance of TypeError given in /www/wwwroot/ihewro.com/var/Typecho/Common.php:235 Stack trace: #0 [internal function]: Typecho_Common::exceptionHandle(Object(TypeError)) #1 {main} thrown in /www/wwwroot/ihewro.com/var/Typecho/Common.php on line 235

    不知能否解决呢 icon_redface.gif

    Reply
    1. @友人C

      你翻翻之前的评论,当时貌似是可以正常使用的。
      看报错这次应该不是插件本身的原因… icon_confused.gif

      Reply
      1. @大袋鼠

        我把插件名字由Aplayer改成其他名字,又改回Aplayer,就好了。。。好奇怪 icon_cry.gif icon_cry.gif

        Reply
  4. cache目录可写 加入歌单,网页加载很慢。单曲没事?

    Reply
    1. @沐阳

      因为之前云音乐的API解析出的mp3地址是固定的,所以歌单里的每首歌曲只需要缓存一次(第一次打开比较慢)。
      现在云音乐API解析的MP3地址隔几十分钟就会更换,缓存便失去了意义。单曲还可以接受,若是歌单的歌曲比较多,MP3解析时间会比较长。

      所以,本插件不推荐插入「有很多歌曲的歌单」了。

      Reply
  5. Ryan

    Aplayer 在文章页 pjax 怎么解决呢?DOM 被刷走了。

    Reply
    1. @Ryan

      可以参考我博客的底部JS.

      Reply
  6. 我用了四五个插件都不行。。。把instantclick删了也是Uncaught ReferenceError

    Reply
    1. @John

      咦,理应不应该出现这种问题的啊。。

      Reply
      1. @大袋鼠

        换成cPlayer那个就没问题了,不过解析常常出现403~虽然链接没问题,但点不了播放,暂时弃用了 icon_cry.gif

        Reply
  7. 在不 帮我看看我这个是什么问题 可以吗

    Reply
    1. @Sonw

      播放器能正常显示,歌曲无法播放多半是因为:
      1.缓存时间设置太长,推荐设置为900秒。
      2.缓存目录没有设置读写权限。

      Reply
      1. @大袋鼠

        我已经给了cache目录最大的权限 缓存时间在哪里设置呢 大神

        Reply
        1. @Sonw

          Typecho后台->插件->APlayer的插件设置。
          设置完后将cache目录清空一下。

          Reply
          1. @大袋鼠

            我按你说的操作操作了一遍 但是好像还是有点问题

            Reply
          2. @大袋鼠

            好的 谢谢

            Reply
            1. @Sonw

              留个QQ。

              Reply
              1. @大袋鼠

                刚才一只回复不了 留言过于频繁 540210669 谢谢

                Reply
  8. 大神可以帮我看看我这插件问题出在哪了吗 icon_exclaim.gif

    Reply
  9. icon_razz.gif 3种插件都使用了..插入贴内就直是代码了。。没有显示播放器 icon_surprised.gif

    Reply
    1. @染念

      咦?这就不是插件的问题了吧。

      Reply
      1. @大袋鼠

        [player id='346069,346080,29947420'/] 我是直接这么插入的代码 但是播放不了 这么操作对吗

        Reply
      2. @大袋鼠

        icon_sad.gif 有没有解决方法

        Reply
        1. @染念

          这个我也不知道什么原因。
          按道理讲帖内的播放器代码是一定会被解析的。
          是不是短代码用错了?

          Reply
  10. 更新个插入贴内的 icon_question.gif

    Reply
  11. 奇怪了,同样方法我的模板怎么就卡住了呢,同InstantClick.js icon_sad.gif

    Reply
    1. @jrotty

      测试地址http://beta.qqdie.com/,求助QAQ icon_exclaim.gif

      Reply
      1. @jrotty

        卧槽,我都打不开你那篇文章,你是不是歌单里的歌太多了。。。

        Reply
        1. @大袋鼠

          不是的,就是启用了那个插件,然后点哪都会卡住,明明兼容代码都写的一样就是不好使 icon_razz.gif

          Reply
          1. @jrotty

            一打开浏览器就崩溃了,没办法排查。。。 icon_sad.gif

            Reply
            1. @大袋鼠

              我给播放器js加了个 data-no-instant不会卡死了,不过没有效果 icon_biggrin.gif

              Reply
              1. @jrotty

                这个比较奇怪,但前端确实不是我强项,我的intantclick适配还是DIY给搞的,所以自己琢磨琢磨吧~ icon_cool.gif

                Reply
  12. 为啥我用了新版的就会出错啊 icon_cry.gif 整个文章页都显示不出来了

    Reply
    1. @折影轻梦

      好了修复了,忘记引入meting了。
      另外,开启插件后在后台把缓存时间设置成900秒。 icon_exclaim.gif

      Reply
      1. @大袋鼠

        https://i.chainwon.com/PY.html 还是有毒,顺便求个友链 icon_cry.gif

        Reply
        1. @折影轻梦

          友链已经加好,插件还是有错误吗? icon_rolleyes.gif

          Reply
          1. @大袋鼠

            一直都是 Error happens ╥﹏╥

            Reply
            1. @折影轻梦

              我这儿线下线上都测试了一下,木有问题,你给cache目录设置读写权限了吗? icon_confused.gif 或者把报错详细信息给我看看?

              Reply
              1. @大袋鼠

                icon_arrow.gif 好像是读写权限的问题?!!?

                Reply
  13. Rin

    好像挂掉了 icon_cry.gif icon_cry.gif

    Reply
    1. @Rin

      修复了。。

      Reply
  14. 博主,支持HTTPS解析指的是解析的地址还是网易的吗?

    Reply
    1. @钛客志

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

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

    Reply
    1. @姜辰

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

      Reply
      1. @大袋鼠

        期待变得更好~~

        Reply