注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

 
 
 

日志

 
 

【转载】音画组件制作(9)播放器:多曲一行歌词逐字变色  

2015-08-23 14:37:06|  分类: 音画欣赏 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  这是一款制作“可播放多首歌曲透明播放器”的工具,播放器由歌曲列表、控制按钮、逐字变色同步歌词组成,可自由安排其位置、大小、颜色等。

  操作简要说明:

  准备好要播放歌曲的名称、网址和LRC歌词就可以开始制作了。

  1、确定播放器的尺寸

   播放器是透明的,将播放器覆盖在背景(图片、视频、动画等)上,即可组合成一幅音画。建议将播放器尺寸设置成与欲组合的背景一样尺寸。默认播放器尺寸:880*550,最大尺寸1024*768。

  2、输入或粘贴歌曲信息

    输入或粘贴歌曲信息前先关闭填写说明。

   每首歌曲信息由歌曲名称、歌曲网址、LRC歌词组成。每首歌曲信息之间加一行#ks#

   第一行 歌曲名称

   第二行  歌曲网址(播放器提供备份网址功能,当主网址失效时,自动启用备份网址。备份地址为可选项。当使用备份网址时第二行填写为: 歌曲网址|备份网址

   第三行起  LRC歌词(LRC歌词为可选项,如果没有LRC歌词,第三行就不要填写)

   填写方法示意:

《宁夏》 梁静茹

http://m1.music.126.net/A9XXs1nNJGYIuB4DuBCvVg==/1187472558006622.mp3|http://link.hhtjim.com/baidu/2488564.mp3

[offset:500]

[00:00.00]宁夏—— 梁静茹

[02:00.33][00:59.17][00:23.83]宁静的夏天

......

[02:34.22]你来到宁夏的那一天

[03:17.06]

#ks#

第二首歌曲信息

#ks#

第n首歌曲信息

#ks#

最后一首歌曲信息

   特别提醒:每首歌曲信息之间加一行信息:#ks#

   歌曲信息填写后,如歌曲网址有效立即播放音乐、显示同步歌词。

  3、设置是否自动播放,即打开播放器是自动播放,还是手动播放。默认:自动播放。

  4、设置控制按钮

  首先选择按钮样式:1、图标按钮  2、文字按钮    默认图标按钮。然后设置各元素颜色。“编辑者”请填写你的昵称,在滚动字幕中显示XXX编辑。控制按钮是否定时隐藏,默认为不隐藏。如设置为定时隐藏,鼠标指向播放器画面空白处时,显示控制按钮,当鼠标离开播放器后约十秒,控制按钮就隐藏了。最后退出控制按钮设置。

  退出控制按钮设置后,请将鼠标指向控制按钮组件的空白处,按住鼠标左键,将控制按钮组件拖到你需要的位置。

  5、设置歌曲列表

  根据你的歌曲名称的长度和歌曲数量,确定列表的宽度和高度。当清单背景透明度设置为0时,清单背景颜色无效。列表为透明的。当列表高度小于清单高度是,不显示滚动拖条。如果滚动拖条设置为0也不显示滚动拖条。播放过程中,随时可以点击控制按钮中的列表按钮(三橫线)控制列表显示或关闭。

  退出歌曲列表设置后,请将鼠标指向的空白处,按住鼠标左键,将控制按钮组件拖到你需要的位置。

  6、修改歌词显示参数·

   确定歌词显示方式:居中对齐(默认);左对齐;右对齐。点击该栏中的“三角”按钮,依次确定歌词显示方式。

   .“修改歌词参数”表中均为参数默认值。请仔细修改参数值,使你的播放器歌词显示更具个性。修改后必须按“确定”。

   .确定歌词显示位置:鼠标指向当前歌词位置的空白处,按住鼠标左键,将歌词拖到你需要的位置后放开鼠标。

  7、复制代码

   鼠标经过“⑨生成代码”或“复制”自动生成博客用代码。点击“复制”按钮,自动将生成代码和gif文件的内容复制到你的电脑的“粘贴板”了,打开你电脑的“记事本”,只要做个“粘贴”(或同时按键盘Ctrl和v键)代码和gif文件的内容就粘贴在记事本上。

  8、上传gif文件,取得网址

   ⑴生成gif文件

  将记事本上的“gif文件的内容”复制、粘贴到新的记事本,点击记事本的“文件”→“保存”,出现对话框后,文件名:xxx.gif  保存类型:所有文件  编码:UTF-8

   上传gif文件

  如果你有可上传gif文件的空间,将保存的xxx.gif 上传,取得网址。

  如果你没有可上传gif文件的空间,建议去Hito365云盘(http://yun.365.sh/),免费注册一个空间。文件上传后,鼠标指向文件名,右键,选“分享”→选“创建分享”,“直链地址”栏中的地址即为gif文件地址。

  关于GIF文件详细说明请浏览《播放器制作中的GIF文件

  9、博客代码

  将上传gif文件,取得的网址,替换博客代码中的XXX.gif,此时才是完整的博客代码。你可以上博客,粘贴博客代码。 

  10、在博文中调整播放器的“相对定位”代码。

    <DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px">......</DIV>这是“相对定位”代码。其作用就是将播放器覆盖在背景(图片、视频、动画等)之上。

   TOP: 0px中的0调整为-xx(负的背景高度);LEFT: 0px中的0调整为xx(距离页面左边xx)

   如何使用“相对定位”代码,博客装饰——多种元素组合有详细介绍。

  评论这张
 
阅读(2)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--推荐日志--> t-6"> {lis y} {if !!x}
  • ${fn(x.title,26)|escape}
  • {/if} 上一篇,下一篇\> (gTilDet" s.preBTilblog.163.)p> lass="plefteft e}转载">ass="noul pnt"ofter.coet="_blank" hr${gTilDet" s.preBTilblog.163.tp://bgTilDet" s.preBTilTx.peg" titleue" fcBlogTitle|eault:""|escst-1"> (gTilDet" s.nv cBTilblog.163.)p> lass="plefteft e} cla7">转载">get="_blank" ofter.coet="_blank" hr${gTilDet" s.nv cBTilblog.163.tp://bgTilDet" s.nv cBTilTx.peg" titleue" fcBlogTitle|eault:""|ei> {/if} ass= \> {lise} {if x.visitorName==visitor.u bsrk:N ${x.recommenderNickname|escape} bsrk:N ${x.recommenderNickname|escape} {/if}
    转载bsp;<">aget="_blank" class="fc03 m2a" target="_blank" hidefocus="true" bsrk:"${x 转载 :hi isst-1"sit is==1} js-ay:nt isn">  &nscape} ank" hid ault:""|escTian>
    i> {/if} s="p nalb新闻广告 \>转载h|desp;sass="fc03 noul" target="_blank" class="fc03h|de b:es.nk"_3wg" titles?r= wumiiiiiii.recoon.f40"recsize(h|de b:es.recsrc,240,150,llin" s?r= wumiiiiiii.{x.r07">转载icdth= class="p wumiiiiiii.{x.r07">转载ivotf !!y} mgd ${h|de b:es.titleg" titleb"><')&&sp;san> miiiiiiimiiiiiii <#--sp;san><
      7}{b05"kscape}s=wumiiiiiii ft t a as x} f !ass="fc03 noul" target="_blank" class="fc03 mhk"_3wg" titlesa7">转载bspxtali class="cle {if !doas?·b">
    miiiiiiimiiiiiogTitle|ewumiiiiiii {wumiiiiiii e}转载 c0divget="_blank" class="fc03 m2a" target="_blank" over/recomm/sp;sm/zg.1下载nalb新闻lank">54441ue" r= wmiiiiiii fttttttt i> {/if} s="p 右边模块结构\> tx-e}?r=ar e} t-5"

    被{/list} "bdwb bmiiiifc07">转载ent" bl度< ce}?r=rea>iv> t-5"

    {/if} "bdwb bmiiiifc07">转载ent" bl度< ce}?r=rea>iv> t-5"

    该作者的其他xt-align:lemiiiifc07">转载ent" bl度< ce}?r=rea>iv> t-5"

    "bdwb bmiiiifc07">转载ent" bl度< ce}?r=rea>iv> t-5"

    {/list} "bdwb bmiiiifc07">转载ent" bl度< ce}?r=rea>iv> t-5"

    {/list} "bdwb bmiiiifc07">转载ent" bl度< ce}?r=rea>ie}转载bsp;<">get="_blank" gTilr/recomm">x;te 28pxr.com" target="miiiibr.f6br.fs="ple e}阅 ce} {/if} ass=模块结构\> tx-xtarea na e} 转载ent" b/$tle=s2=locas?r=rea> e} lass="plefte!ce} {/if} tt {litt ${fn(x.titt asss="fc03 m2a" target="_blank mhref="httpivget="_blank" cla7">转载">&> alin63.c.referHomePage}"> > 投票给s="pleftl {v irteropyle= = llin;p> > “${g[=tsFToOpyle=_ sex]}”> > s="pleftl miiiault:""|esciiiitian>

    iiiit-6"isieige!="ext) },“我是${c[sieige]}”> > ault:""|esciiii> > > > li class="clet-5"ta> > > > .b class=tsFTame)} class="pleftleftt-6"siu${x.refhid'scape}s="pleault:""|escTian>
    > {/if}!ce} /ifr/java heip2f s=v wumiiblog.Lb:2 = h\" invogTilr/recomm/ofter.co/gTilmmendBlogPermalink}/?from=blog/"; //xt-a的永久链接,作为xt-a的唯一标识s=v wumiiN\>s = h"; //xt-a标签,以英文逗号分隔 纾"标签1,标签2"s=v wumiiS Ps="ix = h\" invogTilr/recomm/ofter.co/"; //ome"的主页地址,作为ome"的唯一标识s=v wumiiParams = h&num=5& e=3&pf.reco/re"; //num为le=\显 /ifr/java heip2fion.f4blank" get.wumiicomm/ifr/
    e} e} e} e} e} e} e} e} e} las -smif !e} las -foas?s="p!e}iiiitt a 100"status>&> 8ivget="_blank" class="fc03 m2a"yxpr/recomm">我的:#00书ue" r=iiiitt {x.r07">转载p> e}?-b">&> 8ivget="_blank" class="fc03 m2a"gTilr/recomm/ bc/thtrog.1ome"风格ue" r=iiiitt {x.r07">转载p> e}?-b">&> 8ivget="_blank" class="fc03 m2a"gTilr/recomm/nk" href="http://blog">loghome"ue" r=iiiitt {x.r07">转载p> e}?-b">&> 8ivget="_blank" class="fc03 m2a"overflow:hiddenm/zttp://wwoker.co50706_0xta下载ding-l APPue" r=iiiitts="pleft b:2s 10"/>{x x.permRSSasss="fc03 m2a"ofter.coet="_blank" hrrss/c0" src="${li class="clep> e}?-b">转载 {if !">&>ck i ck i-919}?> lass= la7">转载">&> 8i>订阅此ome"ue" b">{ IE 6] !ce}{ IE 6] !ce} layfaul0px gTil-/re-omm layfau !ce} tpl - ii <#--最新萺us:pla>< 转载frl {if !lasc0>ck 1>ck 1-4f > 转载paulteToLofterForm" ss="fc03 m2a"gTilr/recomm/{/iivescapetp:Yoda={/iivescap&&u${x {/if}ii <#--最新萺us:pla>< 转载itm f40"> ss="fca cs="fc03 noul" tar
    ogTian> {/if}ii <#--最新萺us:pla>< 转载itm f40"> ss="fca cs="fc03 noul" tar
    ault:"" > {/if} ce}< s=< heip23_04"> /ifr/java heip2f s="pw sow.N = {tm:{'zan '}, an 'Ids:[], iiii'loca'},loca',,loc2'},loctro:' wuwmi'bgca'},lgca',,lgc1'},lgc1',,lgc2'},lgc2',,lgha'},lgc9'Ids wuwmi' a'}, 3',, 1'}, 4',, 2'}, 5',, 3'}, 6',, 4'}, 7',, 5'}, 9'}};s="pDef= rvName = '12/18/.co7 07:33:42';s="pme|escapeapi = 'blank" apiet="_blank" hr';s="pme|escapemsg = 'blank" apiet="_blank" hrmsg/ /ifr/java heip2fion.f4blank" b1.鹱.126.net/sp;pfc0mr/j/pc.js?v=15 \"c00884f !c heip2 s=iiii< heip23_04"> /ifr/java heip2fion.f4blank" b1.鹱.126.net/sp;pfc0mr/j/m/> /pm.js?v=15 \"c00884f !c heip2 s=ii< heip23on.f4blank" aervyticsr/recomm/ 5ps.jsbtoip1.o/ifr/java heip2f !c heip2 s=ii< heip23t is="/ifr/java heip2f s="pli_ 5ps_nacc=ag:''';neteas0T变蒶er();s="p sp; I(x.v().on.3= 'blank" gTilr/recomm/sp;pfc0m1(x.vs/aervyse.p:'?s=p&t='+sp; Def=().getName();s="p!c heip2 s=< heip2 s=w sow.stANameout(fun/iion(){s="p(fun/iion(i,s,o,g,r,a,m){i['Goo'0'AervyticsObje/i']=r;i[r]=i[r]||fun/iion(){s="p(i[r].q=i[r].q||[])i14sh(eToug:fal)},i[r].l=1*sp; Def=();a=s.c05">eEntro|e(o)Ids:[m=s.getEntro|esByN\>.ref(o)[0];a.async=1;a.on.fg;m.plasntN e.in${xtB" hre(a,m)s="p})(w sow,dhreg:fa,' heip2',,//overrk:'0'-aervyticsromm/aervyticsrjs',,ga');s=s="pga('c05">e', 'UA-692049re-1', '" io');s="pga('soup', 'pfc0view');s=},300);s=s=s=s=!c heip2 s=s=s=! heip2toip1.o/ifr/java heip2f s="pliw sow.stANameout(fun/iion(){s= wuJ.ft;dSheip2('blank" music.ph.126.net/ph.js?0 1');s= wus= wuJ.NewUDefaByDWR(me|escapeeEntro|e(' heip2');s=iiii heip2.async3= 1;s=iiii heip2.on.3= 'blank" g1.鹱.126.net/sp;regy:hi/ s/js/gTil_aswlf_V3_1.js';s="p dhreg:fa.body.m/zoupChild( heip2);s=iiii },300);s=s=!c heip2 s="pli< heip23t is="/ifr/java heip2fion.f4/sp;pfc0mprei c e/prett .jsb !c heip2 s=