暮光博客

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

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. 折影轻梦

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

    回复
    1. 大袋鼠
      @折影轻梦

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

      回复
      1. 折影轻梦
        @大袋鼠

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

        回复
        1. 大袋鼠
          @折影轻梦

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

          回复
          1. 折影轻梦
            @大袋鼠

            一直都是 Error happens ╥﹏╥

            回复
            1. 大袋鼠
              @折影轻梦

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

              回复
              1. 折影轻梦
                @大袋鼠

                icon_arrow.gif 好像是读写权限的问题？！！？

                回复
  2. Rin

    好像挂掉了 icon_cry.gif icon_cry.gif

    回复
    1. 大袋鼠
      @Rin

      修复了。。

      回复
  3. 钛客志

    博主，支持HTTPS解析指的是解析的地址还是网易的吗？

    回复
    1. 大袋鼠
      @钛客志

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

      回复
  4. 姜辰

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

    回复
    1. 大袋鼠
      @姜辰

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

      回复
      1. 姜辰
        @大袋鼠

        期待变得更好~~

        回复
  5. MoGeek

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

    回复
    1. 大袋鼠
      @MoGeek

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

      回复
  6. Roogle

    羡慕会自己写插件的人

    回复
  7. 友人C

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

    回复
    1. 大袋鼠
      @友人C

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

      回复
  8. 友人C

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

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

    回复
    1. 大袋鼠
      @友人C

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

      回复
      1. 友人C
        @大袋鼠

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

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

        回复
        1. 友人C
          @友人C

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

          回复
          1. 友人C
            @友人C

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

            回复
  9. Techxiu

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

    回复
    1. 大袋鼠
      @Techxiu

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

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

      回复
      1. Techxiu
        @大袋鼠

        可以了，感谢！

        回复
  10. 痞子鱼

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

    回复
    1. 大袋鼠
      @痞子鱼

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

      回复
  11. smartsun

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

    回复
    1. 大袋鼠
      @smartsun

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

      回复
  12. DIYgod的女粉

    哇，DIYgod好棒！嫁我！

    回复
    1. 大袋鼠
      @DIYgod的女粉

      小心，DIYGod他草粉。

      回复
      1. DIYgod的女粉
        @大袋鼠

        真的么？那可以艹我么？好想被DIYgod艹呀！

        回复
        1. 大袋鼠
          @DIYgod的女粉

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

          回复
  1. 1
  2. 2
△