195400 发表于 2022-9-20 13:21

错爱 --- 庄心妍

<style type="text/css">
@import "http://cesholl.cn3v.work/sstyle/lrcPlayerY.min.css";
.wddiv {
        position:relative;margin:100px 16px 32px -100px;
        width:90vw; height:60vw; overflow:hidden; display:grid;place-items:center;
        background:url(http://pan.yinhuabbs.cn/view.php/90f62cb5d685078826471b73679305f2.jpeg)0 0 / 100% 100%
}

/*光碟动画*/
.mCtrl        {
        /** 控制光盘显示的缺省设置：
        width:90px;height:90px;         光盘大小
        bottom:30px;right:30px;         光盘位置
        background-image:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png); 光盘图片        **/
       
        width:50px;height:50px;left:80px;
}
.lrcShow        {
        /** LRC歌词显示的缺省设置：
        font:bold 3em sans-serif;         字体设置
        background-image:linear-gradient(-90deg,darkblue,yellow);歌词前景，背景色
        bottom:20px;left:20%;        显示位置        **/

        font:bold 3em 微软雅黑; font-size:3.5em;left:25%;
}
.lrcShow::before {color:blue;}
</style>

<div class="wddiv" ><div style="width:100%;height:100%;background-color:#fcc;opacity:0.7;"></div>
        <divclass="lrcShow" data-lrc=''></div>
        <divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
document.write('<script src="http://cesholl.cn3v.work/scripts/lrcPlayerY.packed.js" type="text/javascript"><\/script>');
</script>

<script type="text/javascript">
var lrc = `
错爱 - 庄心妍 (Ada Zhuang)
词：林华勇
曲：林华勇
编曲：林华勇
普普通通我只想普普通通
去谈一场恋爱
简简单单就这么简简单单
为何你做不到
你不在乎你从来都不在乎
我快乐和难受
从今以后你是你我是
没有任何的关系
我终于明白相爱并不容易
你给我的是失恋多一次
我放过你等于放过自己
就当是我爱错你
我终于明白幸福是回不去
爱情不能勉强这个道理
我不稀罕有你的回忆
我的心再痛也是最后一次
------------------------------
普普通通我只想普普通通
去谈一场恋爱
简简单单就这么简简单单
为何你做不到
你不在乎你从来都不在乎
不在乎
我快乐和难受
从今以后你是你我是我
没有任何的关系
我终于明白终于明白
相爱并不容易
你给我的你给我的
是失恋多一次
我放过你等于放过自己
就当是我爱错你
我终于明白我终于明白
幸福是回不去
爱情不能爱情不能
勉强这个道理
我不稀罕有你的回忆
我的心再痛再痛
也是最后一次
我终于明白相爱并不容易
你给我的是失恋多一次
我放过你等于放过自己
就当是我爱错你
我终于明白
我终于明白
幸福是回不去
爱情不能爱情不能
勉强这个道理
我不稀罕有你的回忆
我的心再痛心再痛
也是最后一次

`;
var opts = {
lrcTxt:lrc,
//lrcShowID:'sLRC',
audioCtrl:'mDisk',
audioURL:'http://url.amp3a.com/kuwo.php/3971732.mp3'
};
new lrcPlayerY(opts);
</script>

195400 发表于 2022-9-20 13:24

画面、歌曲都很普通，主要是试验LRC歌词同步显示。

蓝魔 发表于 2022-9-20 23:19

欣赏一下，谢谢。

195400 发表于 2022-9-21 11:00

蓝魔 发表于 2022-9-20 23:19
欣赏一下，谢谢。

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

红枫 发表于 2022-9-21 11:58

不在家，无电脑，仅手机观赏，原码不得查看！

非常开心 发表于 2022-9-21 12:51

欣赏楼主的新作，点赞多谢分享！

195400 发表于 2022-9-21 12:52

红枫 发表于 2022-9-21 11:58
不在家，无电脑，仅手机观赏，原码不得查看！

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

195400 发表于 2022-9-21 12:53

非常开心 发表于 2022-9-21 12:51
欣赏楼主的新作，点赞多谢分享！

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

寒冬残荷 发表于 2022-9-23 07:43

欣赏老师的新作！点赞！厉害，LRC歌词制作出Ok歌词效果！

195400 发表于 2022-9-23 07:48

寒冬残荷 发表于 2022-9-23 07:43
欣赏老师的新作！点赞！厉害，LRC歌词制作出Ok歌词效果！

借鉴别人的代码改制的。

有个“花潮论坛”值得去看看，有不少好的代码。只是必须注册否则连看都不行。
页: [1] 2
查看完整版本: 错爱 --- 庄心妍