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

李逵的博客

踏踏实实做事,认认真真做人。

 
 
 

日志

 
 

在线制作播放器【转】  

2016-11-09 19:53:30|  分类: 代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

彩云归 在线制作播放器:(多曲一行歌词滚动)

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

操作简要说明:

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

1、确定播放器的尺寸

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

2、确定一行歌词尺寸和位置

默认一行歌词尺寸:880*80。可将一行歌词的宽度设置成比播放器宽度小,这样歌词不会顶边显示。

确定歌词位置:鼠标指向歌词空白处,按住鼠标左键,将歌词件拖到你需要的位置。

3、输入或粘贴歌曲信息

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

每首歌曲信息由歌曲名称、歌曲网址、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#

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

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

5、设置控制按钮

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

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

6、设置歌曲列表

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

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

7、设置滚动歌词的滚动方向。默认歌词由左向右滚动。·

8、修改歌词显示参数·

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

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

9、复制代码

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

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

⑴生成gif文件

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

⑵上传gif文件

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

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

11、博客代码

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

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

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

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

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

博文原址:http://cygbk.blog.163.com/blog/static/23544411020156981527987/

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

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016