暮光博客

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

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]

网易云音乐解析示例

[单曲]

SAKURA - Error happens ╥﹏╥

作词 : 水野良樹

作曲 : 水野良樹

编曲 : 島田昌典

さくら ひらひら 舞い降りて落ちて

揺れる 想いのたけを 抱きしめた

君と 春に 願いし あの夢は

今も見えているよ

さくら舞い散る

電車から 見えたのは

いつかのおもかげ

ふたりで通った 春の大橋

卒業の ときが来て

君は故郷(まち)を出た

色づく川辺に あの日を探すの

それぞれの道を選び

ふたりは春を終えた

咲き誇る未来(みらい)は

あたしを焦らせて

小田急線の窓に

今年もさくらが映る

君の声が この胸に

聞こえてくるよ

さくら ひらひら 舞い降りて落ちて

揺れる 想いのたけを 抱きしめた

君と 春に 願いし あの夢は

今も見えているよ

さくら舞い散る

書きかけた 手紙には

「元気でいるよ」と

小さな嘘は 見透かされるね

めぐりゆく この街も

春を受け入れて

今年もあの花が つぼみをひらく

君がいない日々を超えて

あたしも大人になっていく

こうやって全て忘れていくのかな

「本当に好きだったんだ」

さくらに手を伸ばす

この想いが 今春に つつまれていくよ

さくら ひらひら 舞い降りて落ちて

揺れる 想いのたけを 抱き寄せた

君が くれし 強き あの言葉は

今も 胸に残る

さくら舞いゆく

さくら ひらひら 舞い降りて落ちて

揺れる 想いのたけを 抱きしめた

遠き 春に 夢見し あの日々は

空に消えていくよ

さくら ひらひら 舞い降りて落ちて

春のその向こうへと歩き出す

君と 春に 誓いし この夢を

強く 胸に抱いて

さくら舞い散る

- 00:00 / 00:00
  1. 1 SAKURA いきものがかり

更多用法请参考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
△