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

支付宝打赏

文章二维码

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

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://qqdie.com/archives/typecho-yoduplayer.html (转载时请注明本文出处及文章链接)

typecho插件播放器instantclick
发表新评论
已有 102 条评论
  1. Rst.WL
    Rst.WL
    回复

    小白过来顶顶

  2. 蒋旭
    蒋旭
    回复

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

    1. Jrotty
      Jrotty本文作者
      回复

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

      1. 蒋旭
        蒋旭
        回复

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

        1. Jrotty
          Jrotty本文作者
          回复

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

          1. 蒋旭
            蒋旭
            回复

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

  3. Sakura
    Sakura
    回复

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

    1. Jrotty
      Jrotty本文作者
      回复

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

      1. Sakura
        Sakura
        回复

        @Jrotty 原来如此...

  4. Sakura
    Sakura
    回复

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

  5. yyyy
    yyyy
    回复

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

  6. TsriGero
    TsriGero
    回复

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

    1. TsriGero
      TsriGero
      回复

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

      1. Jrotty
        Jrotty本文作者
        回复

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


前篇 后篇