好看的Hermit播放器插件

作者: xuzizi 分类: wordpress,软件分享 发布时间: 2016-04-15 22:39

说到音乐应该是每个博客都不可缺少的,在Wordpress文章或者日记中插入音乐是算基本需求了。本文介绍在wordpress添加音乐播放器的hermit插件,所添加的播放器不但支持html5,也可以自适应。

Hermit播放器插件实现音乐播放器

Hermit音乐播放器插件支持网易云音乐,虾米音乐和本地音乐,你可以直接在文章中插入来自虾米或者网易云音乐的歌曲到文章中。先来看看Hermit音乐播放器插件的效果吧!

00:00/00:00

 

整站Ajax的播放设置

可以在javascript中设置音乐是否打断播放,当然ajax效果是不打断播放的。

if( window.hermitjs !== undefined ){
hermitjs.reload(0) //默认方式, 会打断播放状态
hermitjs.reload(1) //不会打断播放,音乐会继续播放
}

简单的使用介绍

在撰写文章的时候,就可以点击添加音乐的按钮来输入音乐地址。输入好了,点击插入音乐即可自动完成操作,发布文章的时候也就有了音乐。

添加多个音乐,则回车空行如下图,以网易云音乐为例子:
WordPress Hermit音乐播放器插件支持Ajax防刷新不中断

以上,喜欢音乐分享的朋友可以去试试啦!

优化样式

如果你也想和我一样,给封面图片加上唱片旋转效果,可以参考本站的css代码:

@-webkit-keyframes rotate{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotate{
from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(360deg)}
}
@-ms-keyframes rotate{
from{-ms-transform:rotate(0deg)}
to{-ms-transform:rotate(360deg)}
}
@-o-keyframes rotate{
from{-o-transform:rotate(0deg)}
to{-o-transform:rotate(360deg)}
}
.hermit-cover-image{
border-radius:99%;
animation: 9.8s linear 0s normal none infinite rotate;
-webkit-animation:9.8s linear 0s normal none infinite rotate;
}

把以上代码放在主题的style.css中即可,这样Hermit插件即使更新了样式也会保存下来。

4条评论
  • 759515363

    2016年4月16日 下午3:02

    我又来了,您高兴吗?!

  • 946184267

    2016年4月16日 下午3:16

    我又来了,您高兴吗?!

  • 滕绍武博客

    2016年4月24日 上午3:57

    不好看

  • Madballon

    2017年9月21日 上午10:29

    最近也在看这个插件,感觉很好用。不过有一个问题,就是一些有版权保护的歌曲在这里好像是播放不了的,不知道楼主有没有注意过这个问题啊?

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注