导语:
修改发表于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歌曲播放器(一)横版一行歌词》代码方法:
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文件·
请选择你想添加的收藏夹