无忧女 的个人主页 注册

【转载】H5歌曲播放器(一)横版一行歌词

导语:

修改
字体调整: | |

发表于2022年12月08号 04点 阅读 7606 评论0 点赞36 ©著作权归作者所有

 

 

 

播放中点击歌词控制音乐播放、暂停 

上例为一款H5歌曲播放器(横版一行歌词)与背景组合成的音画。手机可视听

 

  播放器代码写在一个外部html文件中(http://dashan.link/html/yhhp.html)

  讲述使用定位代码和iframe 标签,使播放器安置在所需位置并播放。代码如下:

<div style="left: 310px;position:absolute;top: 765px;"><iframe frameborder="0" height="600" marginheight="0" marginwidth="0" scrolling="no" src="http://dashan.link/html/yhhp.html" width="960"></iframe></div>

  注意:引用代码时必须将全角字符<和>更换为半角字符<和>

 

  获取《H5歌曲播放器(一)横版一行歌词》代码方法:

  1、请点击此在浏览器播放该播放器

  2、点鼠标右键选择“查看网页源代码”

  3、点鼠标右键选择“全选”

  4、点鼠标右键选择“复制”

  5、打开电脑的记事本选择“粘贴”

 

  修改歌曲网址和LRC歌词;设置歌词相关参数

  1、将记事本中的歌曲网址,修改为您的歌曲网址

  2、将记事本中的LRC歌词,修改为您的歌曲相对应的LRC歌词

  3、设置歌词相关参数

    gczh:'40px', // 歌词字体大小 默认为16px

    gczt:'楷体', // 歌词字体, 若无此参数 默认为微软雅黑

    gcys:'yellow', // 当前歌词显示颜色 默认为红色

    gcys1:'#ffffff', // 后续歌词显示颜色 默认为灰色

    shys:'#ff0000', // 歌词描边色,若无此参数则无描边

    gcct:true, // 歌词是否加粗

    dqfs:'center', // 歌词显示对齐方式(left center right),若无此参数默认center居中对齐

    showMode:0, // 横排(0)或竖排(1),若无此参数默认横排

    playLoop:true, // 是否循环播放,若无此参数默认播放一次

    gchs: 1 // 显示歌词行(列)数,默认为1行

 

  保存文件并上传

  1、记事本选择”另存为“

  2、确定文件名:xxx.html注意一定要在文件名后面加.html

  3、确定保存类型:选择”所有文件“

  4、编码选择”UTF-8“

  5、点击”保存“,保存。

  6、上传xxx.html,获取网址。

    点击中画论坛  可提供上传html文件·

 

(注:您的设备不支持flash)

本文转载自:http://www.oldkids.cn/blog/view.php?bid=1666338

声明:以上内容仅用户个人行为,不代表本站(老小孩社区)观点,如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】
点赞36 收藏 3 推送到圈子 分享
微信扫二维码分享

等36人点赞

本文作者

无忧女

远离世俗的浮躁,独守孤寂的恬静。

加好友
评论字体大小调节: | |
博主关闭了此篇讲述留言功能。

请选择你想添加的收藏夹

新建收藏夹

收藏夹名称

©2017 老小孩网站版权所有 | 沪ICP备08012383号    举报电话:021-64323922
×
×