远方的海
远方的海,WordPress,免费
2014 Aug 29 03 : 22

WordPress插入音乐播放器(插件和非插件两种方法)

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

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

插件实现音乐播放器

在此首先给大家推荐一款业内良心插件:本站使用的插件也就是他了.

演示一下本站的播放器效果,也是该有的都有,简洁大方不解释。Hermit播放器支持虾米音乐和网易云音乐,你可以直接在文章中插入来自虾米或者网易云音乐的歌曲到文章中。以下为演示:(样式为远方的海优化版,如果你也喜欢本站的样式可以参考:美化Hermit播放器代码

[hermit auto=”0″ loop=”1″ unexpand=”0″]songlist#:1771783975,1770691266,1771115301[/hermit]

然后又到了本洁癖患者出场的时间了,接下来介绍一个非插件短代码添加音乐播放器的方法。

下载播放器

下载mp3播放器,放在当前主题的目录下:点击下载

添加代码

在模板函数functions.php结尾处插入以下代码:(宽度和高度分别是400*30,这个可以根据你的需求更改~)

//mp3播放器
function mp3player($atts, $content=null){
extract(shortcode_atts(array("auto"=>'0'),$atts));
return '<embed src="'.get_bloginfo("template_url").'/mp3player.swf?url='.$content.'&amp;autoplay='.$auto.'" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" width="400" height="30">';
}
add_shortcode('mp3','mp3player');

调用和补充

调用

使用/调用方法:文章中插入音乐使用时:如下调用:

[mp3 auto="1"]歌曲的链接,如http://www.xyz.com/xxx.mp3[/mp3]

auto值:0不自动播放,1自动播放。也可以不加如下,默认不自动播放:

[mp3]歌曲的链接,如http://www.xyz.com/xxx.mp3[/mp3]

补充

如何获取一个mp3的url链接呢,推荐大家使用网盘或者云空间。也可以自己上传到自己的媒体库里面(这个可能比较费流量)。当然Sven给大家推荐七牛免费云空间了。

关于七牛的使用,还有两篇文章可以给大家参考。

  1. WordPress 使用七牛加速网站之初级篇
  2. WordPress 非插件七牛CDN全站加速

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress

您可能也会喜欢

发表回复

Post Comment


  1. 路人甲 :

    博主,请问怎么在首页添加Hermit啊,怎么添加直接出来就是一个空白的80*80的空白,没获取到封面么?我在文章里添加一次,首页添加的就出来了,但是在别的日志里,又是空白的,求解答,谢谢博主

    2016-3-27
  2. flyer :

    地址无效了!~~

    2016-1-16
  3. QiYuanSu.cn :

    Hermit很好看,很方便用,但是只能在文章内调用,我想在主页上添加一个不自动播放的播放器,该用什么插件呢

    2015-11-27
  4. 枫先生 :

    这个插件不错,用上了!

    2015-4-2
  5. emllykitty :

    :o 博主,按照你给的方法,没有效果啊

    2014-11-25
    • Sven水神 :

      有按照

      [mp3 auto="1"]歌曲的链接,如http://www.xyz.com/xxx.mp3[/mp3]

      的格式调用吗~或者直接和本站一样用hermit插件好了。

      2014-11-26
      • emllykitty :

        已经安装好插件了,谢谢~

        2014-11-26
  6. MR'H BLOG :

    不错

    2014-10-25
    • Sven水神 :

      谢谢支持~引用代码的时候按照CC BY-NC-SA 3.0 CN协议希望加个出处啦!

      2014-10-26
  7. 智享互联 :

    试试去,博主多发点wordpress神作!

    2014-9-19
    • 远方的海水神 :

      好滴!!一直在努力…

      2014-9-19
  8. 凉拌炒蛋炒饭 :

    audio标签

    2014-9-11
    • 远方的海水神 :

      audio标签确实是个好方法。而且还是html5呢。

      2014-9-12
  9. 凉拌炒蛋炒饭 :

    挖个坟,标签也能直接插入音乐,需要支持HTML5的浏览器

    2014-9-11
  10. 三兔博客 :

    中秋节快乐! 欢迎回访

    2014-9-6
    • 远方的海水神 :

      同乐喔!已经回访贵站~~

      2014-9-11
  11. tianma630 :

    不错 我也在用

    2014-9-2
  12. :

    不错不错<(。_。)>

    2014-8-30
    • 远方的海水神 :

      ☆⌒(*^-゜)v

      2014-8-31
  13. BigCat :

    凉拌蛋炒饭是谁 我这突然显示以他的身份回复 可怕

    2014-8-29
    • xnces :

      我也遇到过!也是这个用户

      2014-8-29
      • 远方的海水神 :

        额,页面缓存的问题。。。

        2014-8-31
      • 凉拌炒蛋炒饭 :

        是我囧rz博主一回复我就收到邮件简直蛋疼

        2014-9-11