暮光博客

小心你讨厌的东西,因为你很可能被它塑造成某种形状

APlayer Typecho Plugin with HTTPS

折腾 85 条评论

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

更新历史:

  • 2017/09/06 修复了 PHP 5.4 版本以下不支持对象实例化语句链式调用的 BUG
  • 2017/07/28 修复了缓存无法创建的Bug,APlayer版本升级为1.6.0
  • 2017/06/15 使用了Meting云音乐API解析库

介绍

通过简短的代码在文章或页面中插入漂亮的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

Duoshuo2typecho - 多说评论导入Typecho插件
评论区 / 取消回复
选择表情选择表情
  1. 我该怎么解决 pjax 兼容问题,每次进入含有音乐播放的链接时,控制台报函数未找到,如果是用 F5 刷新,则能正常解析,这个该如何解决啊?

    回复
    1. @枋柚

      需要把 APlayer 的初始化函数写到 instantclick 的 change 事件里,我建议不要折腾了,很麻烦。

      回复
  2. 找来找去,还是没有我之前修改的那款稳定,其他的都差不多都不能播放了。 icon_idea.gif

    回复
  3. sss

    sss

    回复
  4. 蛋卷儿

    博主你留的github上最新的那个,好像只有在原版的page才能用啊,套用了模板就加载不出来了,要怎么解决呢? icon_exclaim.gif

    回复
    1. @蛋卷儿

      用这个吧:https://github.com/MoePlayer/APlayer-Typecho
      我发的这个插件我已经不维护了。

      回复
  5. Atlas

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

    回复
    1. @Atlas

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

      回复
      1. @大袋鼠

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

        回复
        1. @Atlas

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

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

    回复
    1. @Waxxh

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

      回复
      1. @大袋鼠

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

        回复
        1. @Waxxh

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

          回复
          1. @大袋鼠

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

            回复
            1. @Waxxh

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

              回复
              1. @大袋鼠

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

                回复
              2. @大袋鼠

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

                回复
  7. 多谢这么好的插件!

    但是,我下载了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

    回复
    1. @友人C

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

      回复
      1. @大袋鼠

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

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

    回复
    1. @沐阳

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

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

      回复
  9. Ryan

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

    回复
    1. @Ryan

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

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

    回复
    1. @John

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

      回复
      1. @大袋鼠

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

        回复
  11. 在不 帮我看看我这个是什么问题 可以吗

    回复
    1. @Sonw

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

      回复
      1. @大袋鼠

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

        回复
        1. @Sonw

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

          回复
          1. @大袋鼠

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

            回复
          2. @大袋鼠

            好的 谢谢

            回复
            1. @Sonw

              留个QQ。

              回复
              1. @大袋鼠

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

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

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

    回复
    1. @染念

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

      回复
      1. @大袋鼠

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

        回复
      2. @大袋鼠

        icon_sad.gif 有没有解决方法

        回复
        1. @染念

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

          回复
  14. 更新个插入贴内的 icon_question.gif

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

    回复
    1. @jrotty

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

      回复
      1. @jrotty

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

        回复
        1. @大袋鼠

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

          回复
          1. @jrotty

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

            回复
            1. @大袋鼠

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

              回复
              1. @jrotty

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

                回复