YoduPlayer背景音乐播放器发布 - QQ爹博客
QQ爹博客 QQ爹博客

YoduPlayer背景音乐播放器发布

in Typecho 文章转载请注明来源!

YoduPlayer

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

特点

0,支持自定义播放器css。
1,支持使用pjax或者instantclick的模板。
2,内置多种播放器皮肤,可自由选择
3,可设置自动播放,手机端自动隐藏等
4,无JQ[早期打包版本无需jq],要求浏览器ie9+
5,有上一曲,下一曲,暂停/播放,封面显示等功能,封面播放时会旋转。
6,针对typecho的Yodu主题模板字体方面做过处理,减少多余字体加载,2.2.2之前的版本支持针对模板变色功能,2.2.2版本之后需要根据需求手动选择播放器皮肤。
7,歌曲列表功能支持,正在播放的歌曲在列表中标注支持。

小问题

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

背景

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

测试

有部分模板可能会出现错位等现象……

截图

yoduplayer演示.gif

下载地址

https://github.com/jrotty/YoduPlayer

更新记录

2018,05,28
默认音量调低至18%,默认本地歌曲,多皮肤机制公开手动选择,不在支持yodu模板自动变色功能,请手动选择皮肤,版本号2.2.2
2018,02,25
新增随机播放功能,简单优化,yodu定制皮肤会根据模板自动勾选
2017,12,10
封面图404时,自动将内置图片补上去假装图没挂,播放器外面点击关闭抽屉,优化yodu模板的定制皮肤,版本号1.8.0
2017,12,06
增加默认音乐与封面图【当音乐列表为空时默认填充】(内置音乐只要非盈利性质则不涉及版权问题),版本号1.7.5
2017,10,09
歌曲列表正在播放的歌曲加入样式标注,发布测试版1.7.3
2017,10,08
加入了歌曲列表功能,发布测试版1.7.0
2017,10,01
修复部分浏览器抽屉失效问题,增强浏览器兼容性
2017,09,27
部分浏览器进度条错位问题修复
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
发表新评论
  • ]
已有 101 条评论
  1. 蒋旭
    蒋旭 7Chrome 63
    回复

    提个小意见哈,网易云音乐不好解析了,所以我弄了服务器动态解析,但是播放器里都是写死的javascript$(document).ready(*** 省略***);所以,播放不了,有较大问题。我现在自改的就是这种情况(播放列表都没啦,我用的ajax获取,所以博主去可以试试,要点击播放按钮才有)希望博主视情况、酌情、考虑解决啊。(我改不下去了。。。)

    1. Jrotty
      Jrotty本文作者 10Chrome 67
      回复

      @蒋旭 其实你可以写一个基于你的音乐api的js,用来生成这个插件所需要的格式,然后将这个格式传给插件就行了

      1. 蒋旭
        蒋旭 7Chrome 63
        回复

        @Jrotty 不是的,看一下我的网页源代码:view-source:https://www.jiangxu.site/ 第33行开始,是自改的播放器代码。因为ajax获取有延时,而且网页主线程上ajax不能用阻塞性的同步加载,但是你的播放器又是 $(document).ready所以播放器的列表和首个音乐都获取不到了。我对你的播放器不好改,希望酌情更改一下。

        1. Jrotty
          Jrotty本文作者 10Chrome 67
          回复

          @蒋旭 其实你可以将api的那个json添加到歌曲设置那里,然后js代码中加一条解析json的代码,这样就不用大改,也不用ajax获取了

          1. 蒋旭
            蒋旭 10Chrome 67
            回复

            @Jrotty 怎么解析呢?JSON.parse()只能把json字符串解析成js数组。我还是要异步获取api的内容啊。而且最重要的是,之所以弄api,就是因为api里的所以信息都是动态获取的,不是固定不变的啊。插件自带的获取来的静态信息用不了才换成api动态解析的啊。

  2. Sakura
    SakuraEdge 13
    回复

    Jrotty大佬,我看了下播放器的Plugin.php里有个地方有点疑惑,这段options()->skin && 'purple'==Helper上面三个配色是这么写的,下面几个配色则带了.css扩展名...?options()->skin && 'hei.css'==Helper

    1. Jrotty
      Jrotty本文作者 10Chrome 66
      回复

      @Sakura 我模板那几个css没写名字,直接用的文件名(带后缀)

      1. Sakura
        SakuraEdge 13
        回复

        @Jrotty 原来如此...

  3. Sakura
    SakuraEdge 13
    回复

    巨佬,这个播放器有没有办法支持多域名?我试着按模板的改法改了改然后报错,现在只能在模板里把两个域名都引用一下。。。一按F12全是x。。。

  4. yyyy
    yyyy XPChrome 55
    回复

    为啥我用了之后 点击完全没用 没反应

  5. TsriGero
    TsriGero MChrome 62
    回复

    和截图一样,但BGM全是同一首《聋的传人》

    1. TsriGero
      TsriGeroChrome 62
      回复

      @TsriGero 是我设置的不对还是我设置的不对

      1. Jrotty
        Jrotty本文作者 10Chrome 65
        回复

        @TsriGero 把歌曲换成自己本地的音乐链接试试

  6. DDV
    DDV 10Chrome 63
    回复

    今天发现网易云解析失败,四个id类型均不可正常解析,使用的是国内主机,但是原先解析的歌曲可以正常播放。
    最后还是要感谢博主超好用的插件

    1. Jrotty
      Jrotty本文作者 10Chrome 63
      回复

      @DDV 不主要弄解析,播放器的歌曲链接填本地地址也行

前篇 后篇
雷姆
拉姆