火力光波的博客

火一般的热情光一样的速度

日志

关于我

火力光波

文章分类

一行逐字变色歌词MP3播放

2014-06-04 09:21:58| 分类： MP3播放器 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

这里介绍制作一款有趣的MP3播放器，我们只要点击歌名(或歌词)，就可打开或暂停歌曲播放，播放时同步显示歌词，此外什么也看不见。播放器可放在博客的任何位置，还可与图片、动画叠加在一起，适用于音画中的音乐播放器。

一、博客添加代码
<DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px"><EMBED height=80 type=application/x-shockwave-flash width=690 src=http://dashan.gotoip1.com/bfq/zjmp3bfq.swf WMODE="transparent" FLASHVARS="参数列表" QUALITY="high"></DIV>
其中：
(1) 定位代码： <DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px">...</DIV>，可将“播放器”安置在任意位置(祥情)。
(2) 播放器地址：src=http://dashan.gotoip1.com/bfq/zjmp3bfq.swf (歌词逐字变色)
(3) 参数列表： FLASHVARS="mp3=MP3网址&mp3b=MP3备份网址&mp3n=音乐名称&s=是否自动播放&lrc=LRC歌词&gcdq=歌词对齐方式&gczt=字体&gczh=字号&gcct=粗体&gcxt=斜体&gcxhx=下划线&gcys=歌词颜色&gcys1=歌词发光颜色&gcydys=逐字变色&gcydys1=逐字变色发光颜色"

二、参数列表说明
mp3=MP3网址。mp3=MP3网址1|MP3网址2|......|MP3网址n。多首歌曲时MP3网址之间用竖线字符分隔。
mp3b=MP3备份网址。mp3b=MP3备份网址1|MP3备份网址2|...|MP3备份网址n。
   多首歌曲时MP3备份网址之间用竖线字符分隔。并与“MP3网址”一一对应。
   备用网址的作用：当主网址（MP3网址）失效时，播放器用备用网址替换主地址。
mp3n=音乐名称。n=音乐名称1|音乐名称2|......|音乐名称n 。
   多首歌曲时音乐名称之间用竖线字符分隔。并且与MP3网址一一对应。
   不选此参数，默认无音乐名称。建议选用此参数。
s=音乐是否自动播放。s=1 自动播放。不选此参数，默认音乐手动播放。
lrc=LRC歌词。lrc=LRC歌词1|......|LRC歌词n。
   多首歌曲时LRC歌词之间用英文竖线字符分隔。并且与MP3网址一一对应。
   如果对应的MP3网址不用歌词，则直接用“|”代替LRC歌词。
   不选用此参数，默认不显示歌词。最好要选用此参数。
gcdq=歌词对齐方式。不选此参数，默认居中。gcdq=left 左对齐，gcdq=right 右对齐。
gczt=字体。不选用此参数，默认黑体。
gczh=字号。字号（数字）越大字就越大，最好选择40号以下。不选用此参数，默认20号。
gcct=是否粗体。gcct=1 为粗体。不选此参数，默认不是粗体。
gcxt=是否斜体。gcxt=1 为斜体。不选此参数，默认不是斜体。
gcxhx=是否下划线。gcxhx=1 为下划线。不选此参数，默认不是下划线。
gcys=歌词颜色。gcys=颜色编码，是6位16进制数字。不选此参数，默认000000，黑色。
gcys1=歌词发光颜色。gcys1=颜色编码，是6位16进制数字。不选此参数，默认无滤镜—发光。
gcydys=逐字变色。gcydys=颜色编码，是6位16进制数字。不选此参数，默认与gcys相同颜色即无逐字变色。
gcydys1=逐字变色发光颜色。 gcys1=颜色编码，是6位16进制数字。不选此参数，默认无滤镜—发光

三、实例代码演示

实例1，显示在日志顶部的代码：
<DIV align="center"><EMBED height="80"allowNetworking="internal"flashvars="mp3=http://www.shhuguo.com/zone/1123.mp3&mp3b=http://mp3.9ku.com/mp3/36/35219.mp3&mp3n=点击这里播放《浪花一朵朵》&lrc=
[00:00.00]欢迎您光临火力光波博客！
[00:13.41]《浪花一朵朵》啦~
[01:29.73][01:36.07][02:59.37][03:05.66]啦~~~~~~
[00:25.85][01:55.67]我要你陪着我
[00:28.27][01:58.09]看着那海龟水中游
[00:32.13][02:02.01]慢慢地趴在沙滩上
[00:34.87][02:04.75]数着浪花一朵朵
[00:38.04][02:07.86]你不要害怕
[00:41.22][02:11.10]你不会寂寞
[00:44.76][02:14.64]我会一直陪在你的左右
[00:47.87][02:17.69]让你乐悠悠
[00:52.85][02:22.54]日子一天一天过
[00:54.96][02:24.85]我们会慢慢长大
[00:58.88][02:28.76]我不管你懂不懂我在唱什么
[01:05.17][02:35.05]我知道有一天
[01:07.83][02:37.53]你一定会爱上我
[01:11.75][02:41.33]因为我觉得我真的很不错
[01:17.22][02:46.81]时光匆匆匆匆流走也也也不回头
[01:21.14][02:50.66]美女变成老太婆
[01:23.50][02:53.09]唉哟那那那个时候
[01:25.87][02:55.45]我我我我也会已经是个糟老头
[01:33.71][03:03.35]我们一起手牵手
[01:39.99][03:09.57]数着浪花一朵朵
[03:19.96]谢谢欣赏
[03:22.96]
&gcys=444444&gcydys=ff0000" width="690" allowScriptAccess="never"

quality="high"invokeurls="false"src="http://dashan.gotoip1.com/bfq/zjmp3bfq.swf"type="application/x-shockwave-

flash"wmode="transparent"></DIV>

实例2，与flash动画叠加的代码：
<DIV align="center"><EMBED height="160" allowNetworking="internal" width="550"

allowScriptAccess="never"quality="high"invokeurls="false" src="http://dashan.gotoip1.com/bfq/mp3bfqct.swf?ct=7" type="application/x-shockwave-flash"wmode="transparent"></DIV>
<DIV style="MARGIN-TOP: -40px; MARGIN-LEFT:40px;"><EMBED

height="80"allowNetworking="internal"flashvars="mp3=http://www.shhuguo.com/zone/1123.mp3&mp3b=http://65.ierge.cn/11/172/344067.mp3&mp3n=点此欣赏歌曲《珊瑚颂》&lrc=[offset:500]
[00:00.00]《珊瑚颂》
[00:06.74]---梦之旅合唱组合---
[00:12.57][01:41.76][03:26.14]欢迎您光临火力光波博客！
[00:21.01]一树红花照碧海
[00:29.81]一团火焰出水来
[00:38.46]珊瑚树红春常在
[00:47.48]风波浪里把花开　哎～
[01:28.25][02:49.92][03:12.42]风吹浪打花常开　哎～
[01:01.18][02:22.72]云来遮雾来盖
[02:31.76][01:10.17]云里雾里放光彩
[01:19.16][02:40.77][03:03.35]风吹来浪打来
[03:42.98]谢谢欣赏 &gcys=ffffff&gcys1=000000&gcct=1&gcydys=ff0000" width="690"allowScriptAccess="never"

quality="high"invokeurls="false" src="http://dashan.gotoip1.com/bfq/zjmp3bfq.swf" type="application/x-shockwave-

flash"wmode="transparent"></DIV>
实例3，与flash动画叠加的代码：
<DIV align="center"><EMBED height="160" allowNetworking="internal"

width="550"allowScriptAccess="never"quality="high"invokeurls="false" src="http://dashan.gotoip1.com/bfq/mp3bfqct.swf?ct=6"

type="application/x-shockwave-flash"wmode="transparent"></DIV>
<DIV style="MARGIN-TOP: -40px; MARGIN-LEFT: 0px"align="center"><EMBED src=http://dashan.gotoip1.com/bfq/zjmp3bfq.swf width=690

height=80 type=application/x-shockwave-flash

WMODE="transparent"QUALITY="high"FLASHVARS="mp3=http://65.ierge.cn/7/108/216880.mp3 &mp3n=点击这里欣赏乌兰托娅《套马杆》&lrc=

[offset:500]
[00:00.00]《套马杆》乌兰托娅
[00:10.00]词：刘新圈曲：郭永利
[00:15.00]火力光波与您共欣赏《套马杆》
[00:33.16]给我一片蓝天
[00:36.25]一轮初升的太阳
[00:39.84]给我一片绿草
[00:42.77]绵延向远方
[00:45.54]给我一只雄鹰
[00:48.04]一个威武的汉子
[00:50.85]给我一个套马杆
[00:54.17]攥在他手上
[02:28.42][00:57.02]给我一片白云
[02:30.58][00:59.11]一朵洁白的想象 [02:34.09][01:02.66]给我一阵清风
[02:36.99][01:05.56]吹开百花香
[02:39.83][01:08.40]给我一次邂逅
[02:42.42][01:10.94]在青青的牧场 [02:45.16][01:13.72]给我一个眼神
[02:48.41][01:17.06]热辣滚烫
[03:37.07][02:51.28][01:19.92]套马的汉子你威武雄壮
[03:42.64][02:56.97][01:25.53]飞驰的骏马像疾风一样
[03:48.39][03:02.64][01:31.25]一望无际的原野随你去流浪
[03:53.77][03:08.05][01:36.54]你的心海和大地一样宽广
[03:59.82][03:14.14][01:42.73]套马的汉子你在我心上
[04:05.55][03:19.82][01:48.39]我愿融化在你宽阔的胸膛
[04:11.24][03:25.49][01:54.15]一望无际的原野随你去流浪
[04:16.71][03:30.91][01:59.48]所有的日子像你一样晴朗
[02:05.79]火力光波与您共欣赏《套马杆》
[04:23.88]火力光波谢谢您观赏
&gczh=25&gczt=华文新魏&gcys=444444&gcydys=ff0000&gcydys1=ffffff"></EMBED></DIV>

与flash动画叠加的效果：

来源：彩云归新浪博客、网易博客、网易博客、

返回分类目录

评论这张

转发至微博

阅读(1348)| 评论(5)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087071081083088064081081095071072094081068080083094074085',
              blogTitle:'一行逐字变色歌词MP3播放',
              blogAbstract:' \r\n<DIV align=\"center\"  \></DIV\>',
              blogTag:'歌词,逐字,变色,mp3,播放器',
              blogUrl:'blog/static/8074589120145492158443',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1496288814103,
              publishTime:1401844918443,
              permalink:'blog/static/8074589120145492158443',
              commentCount:5,
              mainCommentCount:5,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/8074589120145492158443">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

火力光波的博客

导航

日志

一行逐字变色歌词MP3播放

历史上的今天

最近读者

热度

评论

页脚