YoduBGM一款typecho背景音乐插件

YoduBGM 1.6.0

是一款简洁(简陋)风格的背景音乐播放器,需要主题支持pjax技术,否则页面切换歌曲会断掉。

背景音乐播放器那么多了为什么还要开发呢?而且还这么丑?
答:其他的背景音乐播放器只能支持常规的pjax模板,而Yodu模板使用的instantclick技术并没有得到支持,所以为了自己的模板能有个背景音乐播放器,我就自己弄了个。看这插件的名字就知道这个是专门为Yodu模板准备的,当然其他模板也是可以用的。

插件特色
1,这是一款简洁BGM播放器,需要您的主题支持pjax或者instantclick才能保证页面切换依旧播放
2,支持多首歌曲,且默认随机播放
3,可设置是否自动播放(部分手机浏览器不支持)
4,支持网易云音乐调用(不保证api永远有效)
5,当你按照格式只填写一首歌曲时,插件会默认隐藏掉切歌按钮,只保留播放按钮,使其更加简洁
6,插件使用了原生js,所以无需加载jq等js框架
7,整个插件所需要加载的文件不到5kb,可谓是非常小巧了

下载地址:
https://github.com/jrotty/YoduBGM

更新历史

2018年06月29日发布1.6.0版

音乐格式填写方式简化

2018年06月16日发布1.5.0版

1,字体图标文件全部写入了css里,解决特殊情况下的字体跨域问题
2,复活网易云调用功能
3,加了了歌曲数量判断,大于一首歌曲时,切歌按钮才会出来,使其更加简洁人性化
4,js梳理优化,缩减代码,解决部分bug

2018年x月x日发布x版

删除网易云音乐api功能,失效了

2017年07月10日发布0.7.0版

修正网易云音乐api获取歌单失效问题

2017年01月16日发布0.6.0版

与文章内音乐播放器兼容,当文章内有音乐播放器播放时,会自动暂停背景音乐播放器,当切换到没有音乐播放器播放的页面时背景音乐再次继续播放。【仅限使用Audio标签的播放器】

2016年12月25日发布0.5.0版

网易云解析地址全面支持https,优化了javascript代码优化完反而有毛病已改回。

2016年12月11日发布0.4.0版

博主简单学习了下javascript,去除了对jQuery的依赖。

2016年11月30日发布0.3.0版

后台加入移动端显示与否,消除插件可能存在的隐患

2016年11月14日发布0.2.0版

修复0.1.5版instantclick模式下,页面切换歌曲顺序播放变为乱序播放的问题。

2016年11月12日发布0.1.5版

加入播放按钮的交互效果

2016年11月3日首次发布0.1.2版

一款支持同时支持pjax和instantclick技术的背景音乐播放器。

插件预览:

YoduBGM背景音乐播放器插件

Comments (82)

    Generic placeholder image
    安辰 回复

    同楼下,有时候是2个方格,有时候可以,可能没加载出来吧,,那个手机端的播放按钮太靠上了,可以调下来吗?

      Generic placeholder image
      Jrotty 回复

      插件已更新,手机端问题修复,至于不显示图标的问题,解决方法我已经补充到文章上了

    Generic placeholder image
    Frank 回复

    不显示图标播放箭头,就两个白方格

      Generic placeholder image
      Jrotty 回复

      可以调css,下个版本我调下吧

      Generic placeholder image
      Jrotty 回复

      那就奇怪了,你加我QQ吧详聊

      Generic placeholder image
      Jrotty 回复

      你用程序后台绑定的域名访问的吗?

    Generic placeholder image
    风魂 回复

    qwq下载了怎么用?

      Generic placeholder image
      风魂 回复

      好的,谢谢

      Generic placeholder image
      Jrotty 回复

      和正常插件用法一样,可以百度搜typecho插件如何使用

      Generic placeholder image
      落叶大大 回复

      ( ̄3 ̄)这个不是

      Generic placeholder image
      Jrotty 回复

      都说了不要再发纯表情啦,看着很闹心的#[捂脸]

      Generic placeholder image
      Jrotty 回复

      简单吧,以前的我估计是脑抽了

    Generic placeholder image
    Mr.Tcsy 回复

    插件启用不了啊,,,,

      Generic placeholder image
      Jrotty 回复

      不知道原因哈,我测试没问题的,很多人用了也没问题,你看看是不是文件权限问题吧

      Generic placeholder image
      Mr.Tcsy 回复

      嗯那 免费版1.5

      Generic placeholder image
      Jrotty 回复

      是Yodu模板吗,奇怪

      Generic placeholder image
      Mr.Tcsy 回复

      感觉是权限问题、下周在搞搞

      Generic placeholder image
      Mr.Tcsy 回复

      用的你的模版╮( ̄▽ ̄)╭

      Generic placeholder image
      Jrotty 回复
      [狗]不管,可能是你的模板原因吧
    Generic placeholder image
    Zohar 回复

    插件好评,百度网盘差评(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

      Generic placeholder image
      Jrotty 回复

      github比较好哈,但是习惯百度盘了ಥ_ಥ,习惯真可怕

    Generic placeholder image
    落叶大大 回复
    [狗]#[狗]#[狗]多谢多谢,已经用上了
      Generic placeholder image
      Jrotty 回复

      我貌似发现问题,你的文章数量比你的女伴少两篇,所以对不上#[滑之稽]

      Generic placeholder image
      落叶大大 回复

      对啊,你说怎么办吧#[哭]

      Generic placeholder image
      Jrotty 回复

      你的那个博客好厉害,文章左边比右边多一个,群里提问的就是你哈#[笑尿]

    Generic placeholder image
    Doeca 回复
    [狗]又得对主题进行魔改了
    Generic placeholder image
    大袋鼠 回复

    很棒,最近我打算换一下你主题的代码高亮js,但好像那个instantclick不会加载自定义的js,给标签写上data-no-instant也不行。

      Generic placeholder image
      Jrotty 回复

      怎么跟你说呢,我模板默认的就是你说的这个不过版本不是最新的,你需要在load.js中搜索highlight大概是那个位置,默认的是highlight9.4.0的版本换成最新的即可,还有就是style.css中搜hljs,这个位置就是默认的高亮css,比较简陋可以换成你想要的css#[吐舌]

      Generic placeholder image
      Jrotty 回复

      你想用什么代码高亮,我研究下ಥ_ಥ

      Generic placeholder image
      大袋鼠 回复

      如何添加重载函数(╯°口°)╯(┴—┴

      Generic placeholder image
      Jrotty 回复

      我的这个主题吗,我这个主题的代码高亮貌似没加data-no-instant就好使了,其他的代码高亮可能需要添加重载函数

    Generic placeholder image
    音乐视频解析站 回复

    这个很牛逼,好基友