导语：
修改发表于2022年12月06号 20点 阅读 10360 评论8 点赞46 ©著作权归作者所有
手机浏览点击音乐播放按钮开始播放
上例为一款H5歌曲播放器（横版一行歌词）与背景组合成的音画。手机可视听
获取《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，获取网址。
播放器在讲述中播放代码
讲述使用style标签（定位）和iframe 标签（播放），使播放器安置在所需位置并播放。代码如下：
1.style标签＜style type="text/css"＞.lrc {z-index: 200;POSITION: relative; WIDTH: 960px;TOP: 80px; LEFT: 0px}＜/style＞
调整TOP和LEFT的值，设置播放器位置。
2.iframe 标签＜div class="lrc"＞＜iframe frameborder="0" height="600" marginheight="0" marginwidth="0" scrolling="no" src="http://dashan.link/html/yhhp.html" width="960"＞＜/iframe＞＜/div＞
注意：引用代码时必须将全角字符＜和＞更换为半角字符<和>
等46人点赞
请选择你想添加的收藏夹
