首页 > Wordpress开发 > 给你的 Wordpress 加一个音乐播放器

给你的 Wordpress 加一个音乐播放器

2007年9月14日

  中华人民共和国二零零七年九月十四日,就是PPku的小F贴出功夫网之歌的第三天,我注册了一个帐号,独自在蓝色理想徘徊,遇见某君,前来问我到,”小弟可曾为大家写了一点什么没有?“ 我说”没有“。他就正告我,”你小子你还是写一点罢;否则GFW会很爱看你的文章。”

  这我是知道的,凡我所编辑的博文,大概是因为往往瞎扯淡的缘故吧,流量一向就甚为寥落,然而在这样的生活艰难中,毅然查看每一个字符的就有它。我也早觉得有写一点东西的必要了, 正因为与GFW毫不相干,对于我们,才大抵只能如此而已。倘使我能够相信GFW真的有那么混蛋,连技术文章都不放过的话,那自然可以释然与网络,——但是,现在,却只能如此而已。。。

  以上是一如既往的废话,下面是正题:

  今天朋友问,我博客上的音乐播放器是怎么集成进去的,于是写出来晒一下。首先,这是一套免费的、开源的音乐播放器,但由于小F兄常年混迹于网络,早已忘记是从哪里抓过来的,于是拿出自己整合以后的播放器代码,也能让你的修改更快一些。

  这款播放器主要由三个文件组成:Flash播放器文件(.swf) 播放列表文件(.xml) 以及F**kIE虚框的程序文件(.js)

  由于作者并没有将它写成WP的插件,所以目前只能以Wedget形式集成在博客的侧边栏里。集成的原理很简单,就是将swf放在页面上,并且能够让他读到xml播放列表文件。看到这里,你也许认为小F在说废话,直接把三个文件给我,放在博客里面集成一下不就搞定吗?没错,但由于这款播放器不是插件,音乐播放列表无法在后台编辑,所以这篇文章的重点在于播放列表的改造上。

首先在/wp-content/plugin目录下建立文件夹,比如ppkuPlayer,然后将这三个文件转移到此文件夹下。再将.xml文件另存为.php文件,并将内容修改为如下所示:

  1. <?php
  2. /*
  3. Plugin Name: 多媒体播放器 - 歌曲列表
  4. Plugin URI: http://blog.ppku.com/
  5. Description: .
  6. Version: 1.0
  7. Author: Freddy Deng
  8. Author URI: http://blog.ppku.com/
  9. */
  10. header("Content-type: text/xml; charset=utf-8");
  11. echo <<< EOT
  12. <?xml version="1.0" encoding="utf-8"?>
  13. <playlist version="1" xmlns="http://xspf.org/ns/0/">
  14.     <trackList>
  15.         <track>
  16.             <title>孤单的冲动</title>
  17.             <creator>于娜</creator>
  18.             <location>http://play8.tom.com/uploadfile/???.mp3</location>
  19.         </track>
  20.         <track>
  21.             <title>Change the world</title>
  22.             <creator>Eric Clapton</creator>
  23.             <location>/wp-content/uploads/???.mp3</location>
  24.         </track>
  25.         <track>
  26.             <title>Hurricane</title>
  27.             <creator>Eric Benet</creator>
  28.             <location>/wp-plus/audios/???.mp3</location>
  29.         </track>
  30.         <track>
  31.             <title>Crazy little thing called love</title>
  32.             <creator>Queen</creator>
  33.             <location>/wp-plus/videos/???.flv</location>
  34.         </track>
  35.         <track>
  36.             <title>我爱台妹</title>
  37.             <creator>MC. HotDog</creator>
  38.             <location>http://home.jses.tpc.edu.tw/???.mp3</location>
  39.         </track>
  40.     </trackList>
  41. </playlist>
  42. EOT;
  43. ?>

注意到”echo <<< EOT“ 这句了吗?这个方法相当相当的有用,我现在在Musikr! CMS的开发中也经常会用到,这方面的内容有时间在写。接下来就是在你的侧边栏中加入如下代码:

  1. <embed src="/wp-content/plugins/ppkuPlayer/mediaplayer.swf" width="190" height="230" allowfullscreen="true" allowscriptaccess="always" flashvars="&displayheight=120&file=/wp-content/plugins/ppkuPlayer/playlist.php&height=230&width=190&lightcolor=0x9999FF&autoscroll=true&autostart=false&repeat=true" />

以后需要添加新歌曲的时候,只需要在Wordpress的后台–>插件–>编辑插件里面,修改【多媒体播放器 – 歌曲列表】就可以了。

OK,这个世界不再清净。。。

文件下载地址:【点击这里】

Wordpress开发 , , , ,

  1. 2009年10月6日17:23 | #1

    博主你好,我想请问个问题,就是你那个 边听边看 的按钮效果是怎么做出来?能不能教教我啊?blog.tives.com.cn这个我网址,希望以后能和你多交流这方面的技术哈 :arrow:

    • 2009年10月13日21:18 | #2

      hi tives,抱歉这么久才给你回复,十一这段时间几乎没有上网,呵呵。
      “边听边看”这个功能是用一个DIV嵌套8box的播放器实现的,默认将此DIV隐藏,需要点击链接后将DIV动画效果显示出来就可以了。js部分我用的jQuery框架。

  2. 2009年10月15日23:58 | #3

    :roll: 我是wp新手额,貌似很复杂啊,看来我还得多学习学习才行。。。不过还是要谢谢你告诉我方法啊! :razz:

  3. 2009年10月17日00:53 | #4

    freddy兄,谢谢你给我的代码,我已经把他加入模版了,效果很好啊, :grin: 再次谢谢你分享代码!有空去看下哈,我稍微改动了下展开的位置。

  4. 2009年10月19日16:07 | #5

    呵呵,我去看了你的博客,你改的更有创意啊,还有个滑动。建议把开关那个链接改成个显眼一点的图片,那样看起来应该会更明显 :grin:

  5. 2009年10月21日19:12 | #6

    汗,我这浏览器不能直接回复。。。freddy大哥,那个滑动其实我没改过的,我就改了下浏览器连接地址和网页存放的位置,那个效果我也不知道咋出来的 :roll: 不过你的那个建议还是很好的,可惜我不在家,等回到家了再弄哈,估计还得好几天才能回来了 :cry:

  6. 2009年10月21日19:13 | #7

    说错了。。是改了播放器连接地址 :!:

  7. 沙漠风暴
    2009年12月8日22:27 | #8

    压缩包怎么还需要密码啊?

  8. 沙漠风暴
    2009年12月8日22:59 | #9

    我用的Ubuntu,所以看不见提示,转到windows上就能看见密码提示了。。。

  9. 沙漠风暴
    2009年12月8日23:54 | #10

    在linux下中文歌名显示方块,有解决方案吗?

  10. 沙漠风暴
    2009年12月9日09:50 | #11

    问一下你右边“标签关注”怎么弄的?能共享么?

  11. 2009年12月29日15:40 | #12

    怎么不给个演示图,不过我还是觉得用插件版方便些,方便管理,XML太麻烦了.

  12. 2009年12月29日18:28 | #13

    晕晕,没演示效果看看吗?

  13. 2010年3月24日21:36 | #14

    巨鲸音乐Widget不错哦。

  14. 2010年3月24日21:59 | #15

    哎,巨鲸Widget能够添加的音乐太少了,我一般只放纯音乐。

  15. 2010年3月24日22:59 | #16

    Parse error: syntax error, unexpected $end
    用了您的方法,启用插件时出现了这个错误。请问怎么解决?

  16. 2010年3月24日23:12 | #17

    Parse error: syntax error, unexpected T_SL in /home/hfydorg1/public_html/blog/wp-content/plugins/ppkuPlayer/playlist.php on line 11
    我用EnEditor看,最后两行不是代码状态呀,黑色的。代码状态不是非黑色的么。
    问题大概出在 这里吧。

  17. 2010年3月24日23:13 | #18

    出在第11、12行?不好意思,在你这里貌似有刷的嫌疑,哈哈。

评论分页
  1. 2008年3月12日02:27 | #1
  2. 2008年4月8日08:54 | #2
  3. 2009年1月8日17:03 | #3
  4. 2010年1月20日19:30 | #4
  5. 2010年7月22日01:13 | #5