在博客侧栏添加flash mp3 player

2009/09/19 Add 78 comments |

  自从我建博开始就陆续有帅哥来问:whisperer同学,你主页的音乐播放器怎么弄的哇?我每次都会说用flash-mp3-player插件...bla bla bla...也不知道有人回去设置满意过没。mp3player是一个很不错的网络播放器,在百度空间的时候我就已经用上了,转战到WordPress之后,幸运地发现了一个不错的插件依然可以实现。今天我就较详细的介绍一下,我是如何在WordPress的侧栏放置一个flash mp3 player。

  首先自我批评一下,很多情况下,我喜欢鱼胜过渔,不管是别人给还是给别人,这样不好,不好……

  我用的 Charles 做的 flash-mp3-player 插件,这个插件最新版本是10.0.7,如果你喜欢,可以用这个版本。我用的是9.3.31。这个两个版本差别巨大。

1、安装flash-mp3-player插件

普通插件的安装方法,此处省略XX字。

启用插件。

2、配置播放器和添加播放列表

进入WordPress的管理页面,“设置”一栏中,应该有一个“Flash Mp3 Player”。下面就是一些选项了,很好理解,也很好配置。

Player Properties:

Show upper panel, yes or no?  是否显示头部的面板,建议填yes

Show play list, yes or no?  是否显示播放列表,建议填yes

Auto start, yes or no?  是否自动播放,可填参数yesnorandom5。分别是自动播放(第一首开始按顺序播放)、不自动播放、自动随机播放、自动从5首开始播放,当然了,第几首开始你来决定。注意一下后台这个播放列表的序号0其实是第一首。

播放列表编辑很方便,支持从后台直接编辑。这也是我选用插件而不是直接嵌入flash的原因之一。如果你不怕麻烦,可以去编辑那个 playlist.xml ,位置在 /wp-content/fmp_my_playlist/ 下。仅支持mp3格式的音乐。

3、在sidebar调用flash mp3 player

方法一:在WordPress的后台widget里,有一个flash mp3 player的widget,添加到侧栏就可以了。填写一下mp3player.swf的宽度和高度。设置播放器标题(最好把标题留空,美观嘛)。

这个方法的缺点是在每个页面都会有播放器,很明显没有必要。我用的是下面的方法二,只在首页显示播放器。

方法二:直接在sidebar.php里调用。在你的sidebar.php中合适的位置添加以下代码:

<?php if (is_home()) : ?>
    <div class="widget widget_flash_mp3player">
        <ul>
     <?php widget_flash_mp3player(array()); ?>       
        </ul>
    </div>
<?php endif; ?>

所谓合适的位置,除了你想要显示播放器的位置外,还有,要确保你在用后台其他widget时依然可以正常显示播放器。比如在iNove主题中,你需要把上面代码放到 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('north_sidebar') ) 以外的部分。

4、调整css

对外观要求比较高的同学用在style.css里调整一下就可以了。

比如,调整位置,隐藏标题:

.widget_flash_mp3player {
line-height:0 !important;
padding-left:0 !important;
}
.widget_flash_mp3player h3{
display:none;
}

5、定制播放器外观

这个插件自带的 mp3player.swf (作者不是Charles)既窄又长还丑。我们可以自己设计一下这个播放器,更改配色,宽度,高度等等。下面我提供3种不同的款式,包含源文件提供下载。只要会一点点flash就可以修改,相信同学们都展示自己的个性来。设计好之后覆盖原来的mp3player.swf即可。

 

这仅仅是我目前是用的方法,并不代表是唯一或者最好的,如果你有更好的方法,请告诉我一下。另外我还是刚刚接触WordPress、php、js等等,有错误的地方很正常,恳请指正。  

最后做一个小小调查,关于是否自动播放的问题。昨天有N个同学让我关闭自动播放,在第N+1个同学要求的时候,我给关了。

[poll id="4"]

相关下载

 flash-mp3-player.zip

 3种样式的mp3player及其源文件.zip

署名-非商业性使用-相同方式共享
  1. nuanya #comment-1406
    2009/10/03 16:28  #51

    我的侧边栏还是无法正常调用 郁闷

  2. whisperer #comment-1407
    2009/10/03 21:32  #52

    @nuanya
    要直接用小工具调用试试也可以啊

  3. 超人 #comment-1723
    2009/10/11 21:38  #53

    测试下我的新头像! :x

  4. whisperer #comment-1725
    2009/10/11 22:16  #54

    @超人
    不还是这个头像么 :twisted:
    不过即使换了在这儿也不能马上显示,我用了缓存,得去手动删除...

  5. whisperer #comment-1726
    2009/10/11 22:30  #55

    @whisperer
    好了 这下更新了

  6. 超人 #comment-1728
    2009/10/11 22:45  #56

    @whisperer
    我也用了缓存.不然这么多插件会慢死! :lol:

  7. 超人 #comment-1729
    2009/10/11 22:45  #57

    @超人
    你评论用的什么效果?有插件没.分享分享~

  8. 超人 #comment-1730
    2009/10/11 23:52  #58

    @超人
    对了.你用的什么静态化插件. 我感觉我这个不是很好用

  9. whisperer #comment-1732
    2009/10/12 00:01  #59

    @超人
    我的用的静态化插件只有WP Widget Cache,头像缓存不是用的插件 代码实现的

    你用的什么插件?

    评论的效果也是代码啊。mg12有过介绍的
    http://www.neoease.com/inove-mouseover-to-show-comment-no/

  10. 超人 #comment-1743
    2009/10/12 01:10  #60

    @whisperer
    我用wp super cache
    头像也需要缓存?

  11. whisperer #comment-1756
    2009/10/12 12:55  #61

    @超人
    因为那个gravatar的网站实在是非常慢哪。所以才用头像缓存。super cache我现在用不着,我用着效果也不怎么好啊,有新评论后不能马上就能看到。

  12. 超人 #comment-1760
    2009/10/12 13:24  #62

    @whisperer
    新评论可以看到的。

  13. 超人 #comment-1761
    2009/10/12 13:30  #63

    @whisperer
    我不是说那个悬浮的。 我是说评论时候无刷新效果。是AJAX 还是JQ ? 用插件还是代码实现? :cry:

  14. whisperer #comment-1762
    2009/10/12 14:22  #64

    @超人
    我用的时候就不行.....我现在也用不着啦。

    @超人
    quick comments啊 用上吧 感觉不用不爽 哈哈。插件那篇有

  15. 左岸读书 #comment-1782
    2009/10/12 19:19  #65

    我也打算弄一个,不知道现在的10.0.8版和这个有什么不同~

  16. whisperer #comment-1783
    2009/10/12 19:28  #66

    @左岸读书
    样式更时尚一些吧 可以显示专辑封面

    不过我对那个不太感冒

  17. 小丑鱼♂ #comment-1812
    2009/10/12 23:00  #67

    我在博客里也使用了音乐播放器……
    使用的是WMP-OBJ V7.x 链接库技术
    支持asf,asx,wma,wmx,wmv,wvx,mp3,wav,mid等9种格式
    呵呵,你可以到我的博客去看看效果。
    这个插件的php版本我没写出来,也没发表……
    这也是一种方法,算不算回答你的问题呢?反正回答你了,嘿嘿……
    PS:我是教育网用户,电信的,经测试你的网站速度很好,哈哈,帮你做了一次小白鼠。
    再PS:给你做了友情链接,呵呵,不错的综合网站。

  18. whisperer #comment-1818
    2009/10/12 23:12  #68

    @小丑鱼♂
    你的网站好酷啊 我,惊 呆 了 :o
    :arrow:

  19. 左岸读书 #comment-1846
    2009/10/13 13:02  #69

    @whisperer
    对了,如你上面的设置为什么出来的flash播放器的width和height都为空呢?

  20. whisperer #comment-1850
    2009/10/13 19:31  #70

    @左岸读书
    应该因为我直接在sidebar.php中调用的吧,我没有用小工具,所以没设置width和height

  21. potter200 #comment-2690
    2010/04/10 02:41  #71

    我调用代码:(一调用页面就显示不出来,只能显示一部分是咋回事?我博客地址:http://www.potter200.net主题是greyzed)

    专属音乐

    谷歌推广

  22. kevic #comment-2858
    2010/07/14 18:46  #72

    老大,你好淫荡,好强大。。。。我回去试试。。

  23. chnmcy #comment-3032
    2010/10/24 21:01  #73

    支持分享
    好东西

  24. 小谭 #comment-12613
    2011/12/05 09:19  #74

    这个播放器确实不错 :lol:

1 2 54
  1. 2009/10/07 18:37 | #1
  2. 2009/10/10 14:14 | #2
  3. 2009/10/15 07:47 | #3
  4. 2011/11/29 16:59 | #4