QQ爹の博客 QQ爹の博客

YoduPlayer背景音乐播放器发布

in Typecho read (5010) 文章转载请注明来源!

YoduPlayer

YoduBGM之后的另一款支持instantclick的背景音乐播放器。

特点

0,支持自定义播放器css。
1,支持使用pjax或者instantclick的模板。
2,歌单设置内置了网易云音乐解析
3,可设置自动播放,手机端自动隐藏等
4,无JQ,要求浏览器ie9+
5,有上一曲,下一曲,暂停/播放,封面显示等功能,封面播放时会旋转。
6,针对typecho的Yodu主题模板特殊优化,根据期多皮肤自动变色适应皮肤等。

小问题

1,与yodubgm应该会有冲突,建议他俩之间只是用一个。
2,与其他的模板样式上可能会遇到冲突。
3,歌曲虽然可以解析网易云音乐,但不保证不会出现部分音乐无法播放的可能性。

背景

因为前天有人吐槽YoduBGM太过简洁,于是昨天中午重写了个样式,js代码部分抄自己之前写的yodubgm的代码,音乐播放时间格式化借鉴与Qplayer,其余的都是现写的,边百度边写233。本来没想做成插件,想内置到模板里,但是貌似不利于传播,于是刚刚封装进了插件。

测试

目前没怎么测试,只是在我自己的模板上简单的跑了一下,没什么问题各项功能正常。

截图

默认这样

点击后这样

下载地址

https://github.com/jrotty/YoduPlayer

更新记录

2017,07,27
修正进度条定位问题,版本号1.3.0。

2017,07,25

解决部分模板的字体冲突问题

2017,07.10
重新加入修复版的网易音乐获取api,版本号1.2.0。

2017,06.12
支持显示音乐播放进度条,删除已经失效的网易云api,版本号 1.1.0。

2017.04.16
修复上下曲切换播放封面不旋转问题,修复列表播放不循环问题,版本号1.0.1。

2017.04.15
加入自定义css,加入yodu主题模板定制化方案,版本号为1.0.0

2017.04.14晚
修正css使其兼容更多模板,版本号为0.6.0

2017.04.14
上传第一个版本,版本号为0.5.0

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

typecho插件播放器instantclick
最后由Jrotty修改于2017-07-27 06:50
发表新评论
已有 67 条评论
  1. sa
    saWindows 10谷歌浏览器 回复

    启用插件时报 Server Error

    1. Jrotty
      Jrotty本文作者Linux谷歌浏览器 回复

      @sa 解压后得到的文件夹重命名删掉-master

    2. sa
      saWindows 10谷歌浏览器 回复

      @sa 可以了,文件夹改下名可以了,谢谢。

  2. 大郎
    大郎Windows 7谷歌浏览器 回复

    请问能自动播放么?

    1. Jrotty
      Jrotty本文作者Linux谷歌浏览器 回复

      @大郎 可以的

  3. taru
    taruWindows 10谷歌浏览器 回复

    请问 有没有wp移植版 -v-

    1. taru
      taruWindows 10谷歌浏览器 回复

      @taru 好的,我知道用哪个了 打扰

  4. 长辞
    长辞Windows XP谷歌浏览器 回复

    完美兼容,希望能添加随机播放的

  5. Sakura
    SakuraWindows 7谷歌浏览器 回复

    你这的播放器的进度条错位了。。。

    1. Jrotty
      Jrotty本文作者Linux谷歌浏览器 回复

      @Sakura 我记得我修复过这个bug了呀

      1. Sakura
        SakuraWindows 7谷歌浏览器 回复

        @Jrotty 然而一播放还是出现错位的进度条。。。233

        1. Jrotty
          Jrotty本文作者Linux谷歌浏览器 回复

          @Sakura 我这看不错位啊

          1. Sakura
            SakuraWindows 8IE浏览器 回复

            @Jrotty 我这看到进度条那块地方:jindu {width: 0%; 有条删除线2333

  6. Sakura
    SakuraWindows 7谷歌浏览器 回复

    这个播放器chromium下是不是要专门设置下什么。。。

    1. Jrotty
      Jrotty本文作者Android NUC浏览器 回复

      @Sakura chromium没测试过,我通常都是chrom的

      1. Sakura
        SakuraWindows Vista谷歌浏览器 回复

        @Jrotty 找到解决办法了,2333

        1. Jrotty
          Jrotty本文作者Linux谷歌浏览器 回复

          @Sakura 求dalao教教我

前篇 后篇
雷姆
拉姆
音乐加载中...
0:00