东篱闲人 发表于 2024-6-17 21:22

【东篱音画】多情只有春庭月


<style>
#tz { margin: 30px 0 30px calc(50% - 700px); width: 1400px; height: 750px; background: url('https://pic.imgdb.cn/item/66700997d9c307b7e94951a2.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#lrc { position: absolute; left: 120px; top: 650px; font: normal 25px sans-serif; white-space: nowrap; color:maroon; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }


#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=31654110" autoplay loop></audio>
      <video class="vid" src="https://img.tukuppt.com/video_show/2916847/00/17/67/5ecc844c234cf.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 = [['1.59','多情只有春庭月,犹为离人照落花。'],
        ['3.30','原曲：小旭游戏音乐醉逍遥'],
        ['5.31','填词：长歌红影乱'],
        ['7.46','演唱/和声：云の泣'],
        ['29.93','山中日月如何计'],
        ['40.42','流年几点琴声里'],
        ['47.36','微雨轻轻叩檐角低'],
        ['54.01','伴又一夜孤寂'],
        ['59.96','浮世缥缈 知音难觅'],
        ['67.68','云烟过眼忘悲喜'],
        ['73.56','风华难抵 日影飞去'],
        ['81.36','留不下一丝痕迹'],
        ['87.22','岁月蹉跎 颠沛流离 何枝可依'],
        ['95.12','说相忘怎前尘难洗'],
        ['101.27','红尘三千 蓬山万里 有缘相遇'],
        ['108.86','若相遇先道别离'],
        ['140.99','相思一夜都老去'],
        ['150.30','旧事如雾挽不起'],
        ['157.01','梦里也寻不到踪迹'],
        ['163.88','魂魄可曾相依'],
        ['169.68','千年流转 花又一季'],
        ['177.33','故人故影结心底'],
        ['183.79','拼尽余生 去寻回忆'],
        ['191.35','却寻不回一个你'],
        ['197.30','指掌纠缠 百年约誓 彼此心意'],
        ['205.15','曾温柔岁月洪荒里'],
        ['211.04','月也多情 不忍常见 死别生离'],
        ['218.84','何留我独对朝夕'],
        ['224.91','红尘三千 蓬山万里 有幸相遇'],
        ['232.24','幸相遇温存过回忆'],
        ['238.50','千年流转 云烟过眼 日影飞去'],
        ['246.09','爱恨一晃终无迹']
];
</script>

马黑黑 发表于 2024-6-17 21:36

本帖最后由 马黑黑 于 2024-6-17 21:37 编辑

离人东去，月照花落。

东篱闲人 发表于 2024-6-17 21:37

马黑黑 发表于 2024-6-17 21:36
离人东区，月照花落。

落花流水春去也。。。{:5_106:}

马黑黑 发表于 2024-6-17 21:38

东篱闲人 发表于 2024-6-17 21:37
落花流水春去也。。。

俺打错了一个字，东去，不是东区。俺不是故意的

东篱闲人 发表于 2024-6-17 21:44

马黑黑 发表于 2024-6-17 21:38
俺打错了一个字，东去，不是东区。俺不是故意的

没事，那都不是事。。。

马黑黑 发表于 2024-6-17 21:54

东篱闲人 发表于 2024-6-17 21:44
没事，那都不是事。。。

蟹蟹

红影 发表于 2024-6-17 22:09

视频选得好，和图图里的梅花相映成趣，歌词做得好，字体设计也好。
欣赏东篱大哥好帖{:4_199:}

东篱闲人 发表于 2024-6-17 22:26

红影 发表于 2024-6-17 22:09
视频选得好，和图图里的梅花相映成趣，歌词做得好，字体设计也好。
欣赏东篱大哥好帖

啥也别说了，喝水吧。。。{:4_180:}

红影 发表于 2024-6-17 22:59

东篱闲人 发表于 2024-6-17 22:26
啥也别说了，喝水吧。。。

一起一起，别客气{:4_180:}

朝云暮雨 发表于 2024-6-18 01:18

这姑娘的表情不对，既是离人，还笑的介开心的。{:4_203:}

东篱闲人 发表于 2024-6-18 09:12

朝云暮雨 发表于 2024-6-18 01:18
这姑娘的表情不对，既是离人，还笑的介开心的。

费了挺大劲才离的能不高兴？{:4_172:}

红影 发表于 2024-6-18 13:28

看到这歌曲的填词：长歌红影乱，看得笑{:4_173:}
页: [1]
查看完整版本: 【东篱音画】多情只有春庭月