网易博客素材、教程、代码基地

请引用的朋友，不要删除链接，谢谢合作

日志

关于我

佳人素材教程基地

和阳光的人在一起,心里就不会晦暗,和快乐的人在一起,嘴角就常带微笑,和进取的人在一起,行动就不会落后,和大方的人在一起,处事就不小气,和睿智的人在一起,遇事就不迷茫,和聪明的人在一起,做事就变机敏。——借人之智,完善自己。学最好的别人,做最好的自己。

文章分类

【制作实例中的花草播放器 (1)】

2012-01-17 15:34:08| 分类：【博客教程】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

本文转载自金钥匙《【制作实例中的花草播放器 (1)】》

金钥匙博客

【制作实例中的花草播放器】

金钥匙的日志里，制作相关的代码，纯属个人的爱好，高手请不要见笑；初学者可学习。本博本着互助互学的宗旨，向广大朋友们学习，取长补短的宗旨，欢迎大家前来加入。如有朋友喜欢，那将是本博的荣幸，网上的资源是共享的，请正常引用.

金钥匙博客和您共创美好家园!

↓使用说明请阅读↓

制作实例中的花草播放器(2)

制作实例中的花草播放器(3)

制作实例中的花草播放器(4)

制作实例中的花草播放器(5)

要下载保存播放器，请将光标指向该播放器示意图中的全屏，点鼠标右键，选目标另存为。

001 全屏

002 全屏

003 全屏

004 全屏

005 全屏

006 全屏

007 全屏

008 全屏

009 全屏

010 全屏

011 全屏

012 全屏

013 全屏

014 全屏

015 全屏

016 全屏

017 全屏

018 全屏

019 全屏

020 全屏
欢迎您使用
花草播放器
（鼠标指向播放器，显示按钮）

这些播放器可以播放多首歌曲、配有同步歌词、歌曲清单；提供了歌曲主网址和备用网址；具有按钮、进度条、时间显示在不使用时可以隐藏起来的特点。

通用代码

<EMBED src=http://yanyileo.vip125.flashyc.com/swf/huacaobfq/播放器序列号.swf width=300 height=165 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" FLASHVARS="mp3=歌曲地址&mp3n=歌曲名称&lrc=同步歌词&mp3b=备用歌曲网址&s=是否自动播放"></EMBED>

代码说明

1. 选择你喜欢的播放器：上面示意图中的数字即为播放器序列号。用数字替换通用代码中的播放器序列号。

2. 选择你喜欢的音乐：音乐必须是MP3格式的，即以.mp3为结尾的歌曲地址。用选中的音乐网址替换通用代码中的歌曲地址

3. 一首歌曲：mp3=歌曲网址

4. 多首歌曲：mp3=歌曲网址1|歌曲网址2|......|歌曲网址n 多首歌曲时网址之间用竖线字符分隔。

5. 歌曲名称

6. 一首歌曲：mp3n=歌曲名称

7. 多首歌曲：mp3n=歌曲名称1|歌曲名称2|......|歌曲名称n 多首歌曲时名称之间用竖线字符分隔，并与“歌曲网址”一一对应。

8. 同步歌词

9. 一首歌曲：lrc=LRC歌词

10. 多首歌曲：lrc=LRC歌词1|......|LRC歌词n 多首歌曲时LRC歌词之间用英文竖线字符分隔。并且与MP3网址一一对应。如果对应的MP3网址不用歌词，则直接用“|”代替LRC歌词。

11. 同步歌词是可选择的参数，如果不选择这个参数，播放器就默认为不需要同步歌词。

12. 备用歌曲网址

13. 备用歌曲网址即当主地址（歌曲地址）失效时，播放器自动启用备用的歌曲网址。

14. 一首歌曲：mp3b=备用歌曲网址

15. 多首歌曲：mp3b=备用歌曲网址1|备用歌曲网址2|......|备用歌曲网址n 多首歌曲时网址之间用竖线字符分隔。

16. 备用歌曲网址是可选择的参数，如果不选择这个参数，播放器就默认为不需要备用歌曲网址。

17. 是否自动播放

18. s=1 设置自动播放

19. 是否自动播放是可选择的参数，如果不选择这个参数，播放器就默认为手动播放。

使用实例

1、准备工作

选择使用012播放器

歌曲一

歌曲名称：茉莉花

主mp3网址：http://online.jjtvu.cn/club/forum/files/261.mp3

备用mp3网址：http://fs1.shtyle.fm/dynimg/fshr/EF/96/53843695_gk101.mp3

lrc歌词：
[offset:0]
[02:39.79][02:08.66][01:05.03][00:33.78]好一朵茉莉花
[00:42.02]满园花草
[00:46.19]香也香不过她
[03:11.23][02:57.07][02:25.77][01:21.07][00:50.29]我有心采一朵戴
[00:55.76]又怕看花的人儿骂
[01:13.24]茉莉花开
[01:17.35]雪也白不过她
[01:26.36]又怕旁人笑话
[01:39.11]
[02:48.03][02:16.97]满园花开
[02:52.14][02:21.02]比也比不过她
[03:16.21][03:02.24][02:31.00]又怕来年不发芽
[03:37.92]

歌曲二
歌曲名称：听妈妈讲那过去的事情

主mp3网址：http://www.xq16x.com/uploadfile/20081121151197055.MP3

备用mp3网址：http://fs1.shtyle.fm/dynimg/fshr/9B/97/53843867_gk103.mp3

lrc歌词：无

2、参数填写

mp3=http://online.jjtvu.cn/club/forum/files/261.mp3|http://www.xq16x.com/uploadfile/20081121151197055.MP3

mp3n=茉莉花|听妈妈讲那过去的事情

lrc=[offset:0]
[02:39.79][02:08.66][01:05.03][00:33.78]好一朵茉莉花
[00:42.02]满园花草
[00:46.19]香也香不过她
[03:11.23][02:57.07][02:25.77][01:21.07][00:50.29]我有心采一朵戴
[00:55.76]又怕看花的人儿骂
[01:13.24]茉莉花开
[01:17.35]雪也白不过她
[01:26.36]又怕旁人笑话
[01:39.11]
[02:48.03][02:16.97]满园花开
[02:52.14][02:21.02]比也比不过她
[03:16.21][03:02.24][02:31.00]又怕来年不发芽
[03:37.92]

修改通用代码

代码复制如下:

3、修改通用代码

<EMBED src=http://yanyileo.vip125.flashyc.com/swf/huacaobfq/012.swf width=300 height=165 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" FLASHVARS="mp3=http://online.jjtvu.cn/club/forum/files/261.mp3|http://www.xq16x.com/uploadfile/20081121151197055.MP3&mp3n=茉莉花|听妈妈讲那过去的事情&lrc=[offset:0]
[02:39.79][02:08.66][01:05.03][00:33.78]好一朵茉莉花
[00:42.02]满园花草
[00:46.19]香也香不过她
[03:11.23][02:57.07][02:25.77][01:21.07][00:50.29]我有心采一朵戴
[00:55.76]又怕看花的人儿骂
[01:13.24]茉莉花开
[01:17.35]雪也白不过她
[01:26.36]又怕旁人笑话
[01:39.11]
[02:48.03][02:16.97]满园花开
[02:52.14][02:21.02]比也比不过她
[03:16.21][03:02.24][02:31.00]又怕来年不发芽
[03:37.92] &mp3b=http://fs1.shtyle.fm/dynimg/fshr/EF/96/53843695_gk101.mp3|http://fs1.shtyle.fm/dynimg/fshr/9B/97/53843867_gk103.mp3&s=1"></EMBED>

4、实例效果

金钥匙欢迎朋友们光临!

金钥匙博客特此声明:
如果你喜欢此日志，请点击日志右下方的（推送或引用），或者左下方的（分享）。
让大家分享或引用，也算是对我的支持，谢谢！
※尊重他人劳动，崇尚网络公德。
本博作品欢迎收藏！支持转载！抵制抄袭！严禁剽窃！
引用日志及代码请保留原创字样!
※请朋友尊重朋友的劳动所成果，此筐架请你不要删，希望互相尊重!
如果你想得到别人的尊重，
那么你首先要学会怎样去尊重别人, 别人同样也会尊重你!

金钥匙再次声明：
不欢迎“复制者”--请文明上网。
您可以在网络找教程，素材，请别复制制作好的博文内容！
请别复制博文，复制专辑，修改专辑链接地址！
您复制--粘贴--也许需要几分钟，
可您知道编辑一篇教程需要多长时间吗？
可您知道编辑一篇图片“文章’需要多长时间吗？
您又知道制作“代码效果”一篇教程需要多长时间吗？
还是一句话：尊重他人劳动，崇尚网络公德。
严禁抄袭他人作品、严禁剽窃他人成果！
光看不留意见的，我将不视为博友！请文明上网！
金钥匙谢谢您的光临，并请留下宝贵意见！

感谢朋友	钥匙小语	博客禁忌	博客现象	自我介绍	建博语感
开博心感	钥匙咀嚼	博友概念	钥匙玉言	关于版权	设计事项
关于钥匙	钥匙建议	金钥匙为你服务--问题专区		公告宣言	告知心语
坦荡的心	加友看法	人品有多美，空间就有多美		我的搏客	网聊必须
空间邀请	遇上网友	缘聚屏前感谢朋友		逛博有感	博客随感
博友之歌	不宜交往	查看关于本博的更多信息		博客空间	致我网友

评论这张

转发至微博

阅读(177)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087067083086087066083085085065072087088068087087087066082086',
              blogTitle:'【制作实例中的花草播放器 (1)】',
              blogAbstract:'   <P align=\"center\" \> </P\>  <P align=\"center\" \>  <TABLE height=\"10\" cellSpacing=\"1\" borderColorDark=\"#666666\" cellPadding=\"0\" width=\"750\" bgColor=\"#000000\" borderColorLight=\"#777777\" border=\"6\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE height=\"10\" cellSpacing=\"1\" borderColorDark=\"#666666\" cellPadding=\"0\" width=\"750\" borderColorLight=\"#777777\" border=\"5\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE style=\"BORDER-RIGHT: #777777 3px dotted; BORDER-TOP: #777777 3px dotted; BORDER-LEFT: #777777 3px dotted; BORDER-BOTTOM: #777777 3px dotted;\"  height=\"10\" cellSpacing=\"0\" borderColorDark=\"#666666\" cellPadding=\"0\" width=\"750\" borderColorLight=\"#777777\" border=\"0\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE height=\"10\" cellSpacing=\"1\" borderColorDark=\"#666666\" cellPadding=\"0\" width=\"750\" borderColorLight=\"#777777\" border=\"5\" \>  </TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></P\>',
              blogTag:'',
              blogUrl:'blog/static/19731116020120173348905',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:0,
              publishTime:1326785648905,
              permalink:'blog/static/19731116020120173348905',
              commentCount:0,
              mainCommentCount:0,
              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/19731116020120173348905">${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 - 订阅此博客

网易博客素材、教程、代码基地

导航

日志

【制作实例中的花草播放器 (1)】

历史上的今天

最近读者

热度

评论

页脚