烟雨江南

东篱闲人 发表于 2024-6-14 21:51

本帖最后由东篱闲人于 2024-6-14 22:24 编辑 <br /><br /><style>
#tz { margin: 30px 0 30px calc(40% - 700px); width: 1400px; height: 800px; background: url('https://pic.imgdb.cn/item/666c512cd9c307b7e94a97c3.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#lrc { position: absolute; left: 120px; top: 715px; font: normal 20px sans-serif; white-space: nowrap; color: darkgreen; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
#player { position: absolute;top: 680px; left: calc(58% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: green; --prg: 0%; --btnSize: 50px;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://pic.imgdb.cn/item/666c48a7d9c307b7e9370e89.png') no-repeat center/cover; filter: hue-rotate(180deg); animation: rot 6s linear infinite var(--state);}
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }
</style>

<div id="tz">
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=321939" autoplay loop></audio>
   <video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
   <div id="lrc">烟雨江南</div>
   <div id="player" data-time="00:00 00:00"></div>
</div>

<script>
var vids = document.querySelectorAll('.vid');
var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));

var lrcKey = 0;

var showLrc = () => {
   if(lrcKey >= lrcAr.length) return false;
   lrc.innerText = lrcAr;
   lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
   lrcKey ++;
};

var mState = () => {
   tz.style.setProperty('--state',['running','paused'][+aud.paused]);
   if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};

var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');

aud.onplaying = aud.onpause = () => mState();

aud.onseeked = () => {
   for(var j = 0; j < lrcAr.length; j ++) {
            if(aud.currentTime < lrcAr) {
                     lrcKey = j - 1;
                     if(lrcKey < 0) lrcKey = 0;
                     break;
            }
   }
};

aud.ontimeupdate = () => {
   player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
   player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
   if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr) showLrc();
}

player.onclick = (e) => {
   if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
   if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
}

player.onmousemove = (e) => {
   if(e.offsetY < 0) {
            if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
                     player.title = aud.paused ? '播放' : '暂停';
                     player.style.cursor = 'pointer';
            }
   }else{
            player.title = '调节进度';
            player.style.cursor = 'pointer';
   }
};

var lrcAr = [['22.44','在江南绵绵的雨季里'],
['27.49','飘洒着濛濛的细雨'],
['32.58','如烟的杨柳在雨中沐浴'],
['38.43','杨柳缠绵雨的情意'],
['42.97','在青石铺就的街巷里'],
['48.30','流淌着道道的雨溪'],
['53.50','淡淡的炊烟在雨中升起'],
['59.80','夜雨沉醉春的旋律'],
['63.57','江南的雨柔柔的江南雨'],
['69.00','你用温情滋润着爱的春意'],
['74.40','江南的雨江南的秀丽'],
['79.72','一江春水梦幻迷离'],
['84.90','江南的雨柔柔的江南雨'],
['89.46','你用温情滋润着爱的春意'],
['94.67','江南的雨江南的秀丽'],
['100.22','一江春水梦幻迷离'],
['125.75','在江南绵绵的雨季里'],
['130.64','飘洒着濛濛的细雨'],
['136.69','如烟的杨柳在雨中沐浴'],
['141.79','杨柳缠绵雨的情意'],
['147.09','在青石铺就的街巷里'],
['151.63','流淌着道道的雨溪'],
['156.57','淡淡的炊烟在雨中升起'],
['162.44','夜雨沉醉春的旋律'],
['166.99','江南的雨柔柔的江南雨'],
['171.93','你用温情滋润着爱的春意'],
['178.59','江南的雨江南的秀丽'],
['183.57','一江春水梦幻迷离'],
['187.48','江南的雨柔柔的江南雨'],
['192.58','你用温情滋润着爱的春意'],
['198.50','江南的雨江南的秀丽'],
['203.67','一江春水梦幻迷离'],
['208.26','江南的雨江南的秀丽'],
['214.70','一江春水梦幻迷离']
];
</script>

马黑黑 发表于 2024-6-14 22:44

{:4_199:}

起个网名好难 发表于 2024-6-14 22:50

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

樵歌发表于 2024-6-15 06:47

赞！{:4_199:}

红影发表于 2024-6-15 08:20

这很完美，不但底图制作精美，还有漂亮的播放器和进度条，还给移动歌词设置了专用区域。
欣赏东篱大哥好帖{:4_199:}

梦油发表于 2024-6-15 08:59

水乡情景一览无余。

梦江南 发表于 2024-6-15 10:03

欣赏老师的精美音画！{:4_199:}

东篱闲人 发表于 2024-6-15 10:11

梦江南发表于 2024-6-15 10:03
欣赏老师的精美音画！

{:5_108:}

东篱闲人 发表于 2024-6-15 10:11

马黑黑发表于 2024-6-14 22:44

{:4_191:}

东篱闲人 发表于 2024-6-15 10:11

起个网名好难发表于 2024-6-14 22:50

{:4_176:}

东篱闲人 发表于 2024-6-15 10:12

樵歌发表于 2024-6-15 06:47
赞！

{:4_191:}

东篱闲人 发表于 2024-6-15 10:12

红影发表于 2024-6-15 08:20
这很完美，不但底图制作精美，还有漂亮的播放器和进度条，还给移动歌词设置了专用区域。
欣赏东篱大哥好帖 ...

{:4_180:}

东篱闲人 发表于 2024-6-15 10:12

梦油发表于 2024-6-15 08:59
水乡情景一览无余。

{:4_176:}

东篱闲人 发表于 2024-6-15 10:12

梦江南发表于 2024-6-15 10:03
欣赏老师的精美音画！

{:4_176:}

红影发表于 2024-6-15 10:53

东篱闲人发表于 2024-6-15 10:12

谢谢香茶{:4_187:}

梦油发表于 2024-6-15 10:57

东篱闲人发表于 2024-6-15 10:12

{:4_180:}

马黑黑 发表于 2024-6-15 11:13

东篱闲人发表于 2024-6-15 10:11

{:4_180:}

小辣椒 发表于 2024-6-15 12:54

老头真的很厉害的，什么都难不到他，太佩服了{:4_178:}

老谟深虑 发表于 2024-6-16 12:41

欣赏老师的精美音画，点赞！收藏学习。

东篱闲人 发表于 2024-6-16 13:35

老谟深虑发表于 2024-6-16 12:41
欣赏老师的精美音画，点赞！收藏学习。

老谟喝酒。。。{:4_176:}

页: [1] 2

花潮论坛's Archiver

烟雨江南