« 上一篇下一篇 »

为Z-Blog添加Flash Mp3 Player播放器的方法

  1)折腾了两天,总算为野猪尖www.ZhaoNiuPai.com/Blog/  ,基于Z-Blog1.8)加了个Flash Mp3 Player播放器。可能有不少ZBlogger和照牛排一样,对程序和代码不甚了解,但又想给自己的博客加个播放器。在此,分享一下我为ZBlog博客添加MP3播放器的过程和方法。高手请无视本文,想知道播放器调用方法的新手,请直接看第5点。

  2)最初,照牛排曾尝试狼的旋律为ZBlog开发的zExobud MP 1.3 beta,但我的技术实在太差,搞了两个多小时也没整出那个播放器界面。貌似少一个名为“exobud.asp”的文件,即使添加歌曲并重建文件和索引也没见这文件的踪影,最后只好放弃。

  3)继续在ZBlog论坛站内搜索,坛友Mr.SKin几天前发过Dewplayer。这个播放器好像是法国人开发的,结合Mr.SKin博客的源代码,终于为野猪尖成功添加一个MINI版的MP3播放器。但,貌似只能放一首歌,我不知道如何弄播放列表,放弃。

  4)坛友yangkui在06年发过Flash MP3 Player,可惜,他没详述使用方法。我根据线索,搜“<mp3config>”,在强剑辉博客发现这篇文章,他介绍了Flash Mp3 Player。我从中找到了Flash Mp3 Player的老窝:Charles,依旧是可惜,因为这是一个WordPress插件(王三表老师的不许联想用的应该就是这个插件),不是ZBlog的。强剑辉同学介绍的Flash Mp3 Player的调用方法,也不是针对ZBlog的。这么优秀、精致的MP3播放器,要是弄个ZBlog插件出来,该多好?

  5)翻了强剑辉同学的几篇博文,屡次实验,照牛排初步摸清了在Z-Blog1.8中使用Flash Mp3 Player的方法。Flash Mp3 Player虽是国人为WordPress开发的插件(基于JW Player),但压缩包里的三个文件,也能用在Z-Blog中。下面,我讲一下把Flash Mp3 Player放入Z-Blog侧边栏的具体方法:

  第一步、下载最新版的Flash Mp3 Player V10.1.3。解压,得到“player”目录(里面有两个文件夹:configs和playlists,一个文件:player.swf),这正是我们需要的。通过FTP软件,把player目录上传到你的网站空间的任意位置(为便于管理,建议放到PLUGIN插件目录下)。

  第二步、若要把播放器放在首页侧边栏,请在Z-Blog管理后台编辑模板文件default.html(此文件的位置在文件管理-THEMES/default/TEMPLATE/default.html,具体取决于你的主题位置),在<div id="divSidebar">的后面加入如下代码:

<div class="function" id="MyMusic">
<h3>几首老歌</h3>
<center>
<embed src="http://www.zhaoniupai.com/blog/PLUGIN/player/player.swf" width="177" height="281" type="application/x-shockwave-flash" wmode="transparent" flashvars="config=http://www.zhaoniupai.com/blog/PLUGIN/player/configs/config.xml&file=http://www.zhaoniupai.com/blog/PLUGIN/player/playlists/playlist.xml"></embed>
</center>
</div>

  上面代码中的src后面是Flash Mp3 Player播放器文件的地址,config后面是配置文件的地址(照牛排一开始按照强剑辉同学的代码,写成了configxml=,结果搞了半天也无法调整Flash Mp3 Player播放器的外观),file后面是播放列表文件。

  刷新一下你的博客首页,是否已经看到如下播放器界面:

为Z-Blog加个播放器Flash Mp3 Player

  当然,你现在调用的是野猪尖www.ZhaoNiuPai.com/Blog/)博客上的播放器文件。要定制自己喜欢的歌曲和播放器背景,你还需几步。

  第三步、修改播放器的配置文件config.xml。config.xml文件放在你刚刚上传的player目录下的configs目录里,用来设置播放器的背景等等。Flash Mp3 Player具有很强的可定制性,下面我具体解释一下怎么来改。config.xml的全部代码如下:

<mp3config>

    <!-- 如果你想让Flash Mp3 Player播放器自动播放和缓冲的话,请更改这里。autostart指自动播放,shuffle指缓冲。两者的取值要么true要么false,比如,用true就会自动播放。 -->
    <autostart>false</autostart>
    <shuffle>true</shuffle>

    <!-- 设置Flash Mp3 Player播放器的循环(重复)播放模式,取值为none或one或all。none指不重放,one指单曲循环,all指全部循环。 -->
    <repeat>all</repeat>

    <!-- 设置Flash Mp3 Player播放器的音量,取值从0到100,数值越大声音就越大,默认是50。 -->
    <volume>50</volume>

    <!-- 设置是否显示歌曲、歌手信息以及播放列表,取值要么true要么false。 -->
    <showdisplay>true</showdisplay>
    <showplaylist>true</showplaylist>


    <!-- 设置播放列表中,歌名右侧链接的打开方式,_blank指在新建的一个IE窗口或FireFox标签中打开,_self指在本窗口或标签中打开,至于_top,照牛排www.ZhaoNiuPai.com)也没搞清楚,貌似和_self差不多,嘿嘿!默认值是_top。 -->
    <linktarget>_top</linktarget>

    <!-- 这里是重点!设置Flash Mp3 Player播放器的颜色外观,要用16进制来表示颜色(从0x000000到0xFFFFFF),backcolor指背景,frontcolor是歌曲名字、进度条和最上面跳动的那个啥的颜色,lightcolor是你把鼠标放到歌曲名字时歌名的颜色。 -->
    <backcolor>0xFFFFFF</backcolor>
    <frontcolor>0x484848</frontcolor>
    <lightcolor>0xFFFFFF</lightcolor>

    <!-- 这里也是重点!设置播放器的背景图片,也就是说换肤,图片格式为JPG的。这里要填图片的绝对地址url ,你可以在ZBlog管理后台的附件管理里上传图片,然后点一下图片名字查看属性,里面就有图片的绝对地址。图片尺寸(象素)取决于你的侧边栏,宽度比侧边栏窄一些为宜。 -->
    <jpgfile>http://www.zhaoniupai.com/blog/upload/MyMusic-QMMX.jpg</jpgfile>

</mp3config>

  第四步、修改播放器的播放列表文件playlist.xml。playlist.xml文件放在你刚刚上传的player目录下的playlists目录里,用来设置播放器的播放列表。下面我具体解释一下怎么来改。playlist.xml的部分代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<playlist>
  <trackList>
    <track>

    <!-- 每添加一首歌,代码都以<track>开始,以</track>结束,annotation处填写歌曲的名字,location处填写歌曲(貌似只支持MP3)的绝对地址(建议用百度的MP3搜索),image是播放这首歌时播放器顶部的专辑图片(图片内容随意,但长宽最好是相等的,照牛排用的图片大多是140x140象素的)。 -->
    <annotation>1.往事</annotation> 
      <location>http://mp3.m.mop.com/201010040526/5f9f09c20b38ea93115cf737689d584d/430/tracks/000/065/720.mp3</location>
      <image>http://www.zhaoniupai.com/blog/upload/MyMusic-YaYa.JPG</image>
    </track>
    <!-- 下面是第二首歌曲的相关信息 -->
    <track>
      <annotation>2.Only Love</annotation>
      <location>http://old.wzhqzx.com/schoolweb/rootufile/virtue/63824901.mp3</location>
      <image>http://www.zhaoniupai.com/blog/upload/MyMusic-Trademark.jpg</image>
    </track>

  </trackList>
</playlist>

  第五步、也是最后一步,改一下第二步里提到的default.html文件,把playlist.xml和config.xml的地址(绿色代码部分)换成你自己的。如果config地址没设好,Flash MP3 Player的界面会是下面这样:

Flash MP3 Player V10.1.3

  6)需要提醒一下,修改playlist.xml和config.xml后,需要清空IE缓存并刷新页面才能看到效果。除了把Flash Mp3 Player播放器放到首页外,栏目页(catalog.html)和文章页(single.html)的侧边栏也是可以调用的,修改方法类似,文章页修改后可能需要文件重建才能看到效果。这个Flash Mp3 Player播放器在IE6、FireFox V3.6.6和Opera V10.62下测试正常,但不防刷,也就是说,正听歌时如果刷新或打开新的页面,歌曲会停止。要防刷,据说要用到iFrame框架。花了4个多小时写这篇文章,好像挺罗嗦挺复杂的,其实就那么几步。写到这,照牛排还是希望有能力的同学搞个插件出来,希望看到Flash Mp3 Player for ZBlog,让我们新手少走弯路。各位有什么不明白的,可以留言,我会尽力答复。

  PS:早在2006年,照牛排就研究过为博客添加音乐的方法,当时研究过embed的语法,详见为你的博客整个小曲

  现在申请Payoneer可获得25美元奖励并立享1.2%全包的费用优惠:当你累积收款1000美元时将一次性获得25美元奖励。请注意,若打开Payoneer官网来注册,是没有上述优惠的,请务必打开【野猪尖的推荐链接】进行注册。Payoneer注册咨询QQ:2822129880

Payoneer派安盈

野猪尖的推荐链接http://tracking.payoneer.com/SH33n (此地址要完整地复制,建议直接点击)

【Payoneer申请教程:个人账户企业账户如何用Payoneer派安盈收款

Payoneer派安盈注册与使用指南(包括P卡注册申请、Payoneer官方、手续费、收款、提现和消费):
注册-为何选择Payoneer派安盈? | Payoneer有卡和无卡账户的区别派安盈公司和个人帐户的区别
   Payoneer个人账户注册申请教程P卡公司帐户注册教程地址证明和证件P卡注册被拒绝咋办?
   Payoneer欧元帐户P卡英镑帐户P卡日元帐户P卡加元帐户P卡澳元帐户P卡墨西哥帐户
   P卡电汇账号币种转换如何注销P卡买卖P卡的风险换欧元和澳元帐户换P卡密码及手机号

官方-Payoneer秉承公正、公开、透明服务Payoneer派安盈封号的原因Payoneer官方最新政策汇总
   官方客服联系方式Payoneer官方费用表如何减少Payoneer的手续费?点此降低提现费
   跨境收款服务商拷问:Payoneer派安盈Payoneer客户答疑手册(FAQ)Payoneer手机App
   Payoneer派安盈跨境电商论坛:2019年2018年2017年2016年2015年直播回放

收款-如何用Payoneer派安盈收款跨境电商/外贸收款方式对比P卡收款审核时“待定”要提供啥文件?
   Amazon亚马逊绑定Payoneer卡收款教程绑定之后如何验证账户?亚马逊收款方式对比
   Payoneer可提供亚马逊KYC审核所需银行证明用Payoneer亚马逊店铺管家开子账户和KYC证明
   Payoneer支持从虾皮Shopee收款Tophatter绑定Payoneer派安盈收款
   Payoneer如何从跨境移动电商Wish收款? | Payoneer针对Wish卖家推出提前放款服务
   Payoneer如何从东南亚电商平台Lazada收款如何在Lazada开店入驻和收款波兰Allegro
   Payoneer如何从拉美电商平台Linio收款? | Payoneer绑定非洲电商平台Jumia收款
   Payoneer支持从美国电商平台Newegg收款Payoneer支持从美国Walmart沃尔玛平台收款
   Payoneer支持从法国乐天Priceminister收款法国电商平台CDiscount对接Payoneer收款
   2021年新平台:eBay拉美Mercado Libre德国乐天、Real.de、eMAG、Wayfair、京东印尼
   Joom卖家大会干货大放送苹果开发者绑定Payoneer派安盈收款教程
   从PayPal提现到Payoneer卡教程及费用自助申请子帐户从PayPal提现到Payoneer派安盈的提醒
   如何向Payoneer充值? | 如何使用Payoneer请求付款派安盈请求付款(Billing Service)答疑
   Payoneer外贸e户通B2B收款简介外贸e户通(B2B收款)亚马逊印度站、速卖通和线下B2B收款

其它-从Payoneer卡提现到国内银行账户Payoneer加快提现速度Payoneer已不支持错名提现
    橄榄枝计划(平台入驻)Payoneer免费为卖家提供便捷的VAT缴费方案P卡缴纳VAT答疑
    1688网采:用Payoneer派安盈充值Alipay Business跨境宝如何评价Payoneer派安盈
    订购万事达实体卡P卡) | P卡激活和休眠P卡年费啥时扣? | P卡到期后更换P卡在ATM机取款

Payoneer派安盈


Payoneer派安盈咨询QQ:2822129880,转载请以链接的形式注明本文地址
本文地址:http://www.zhaoniupai.com/blog/archives/694.html