东篱闲人 发表于 2024-6-15 18:52

【东篱音画】莫惜花前醉

<style>
#tz { margin: 30px 0 30px calc(30% - 700px); width: 1400px; height: 800px; background: url('https://pic.imgdb.cn/item/666d6e33d9c307b7e90e2330.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=1998366658" 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 = [['0.00','作词 : 孙英男'],
        ['1.00','作曲 : 贰叁伍'],
        ['2.00','编曲 : Fsy_小诺'],
        ['3.00','制作人 : 李醒缘'],
        ['4.00','配唱制作人 : 王于陞'],
        ['5.00','吉他 : 大牛'],
        ['6.00','和声 : 张铭轩'],
        ['7.00','和声编写 : 李醒缘/张铭轩'],
        ['8.00','录音师 : 阿游@Music Bravo'],
        ['9.00','混音师 : 王艺翔'],
        ['10.00','母带工程师 : 王艺翔'],
        ['11.00','录音棚 : Music Bravo Studio/Beijing'],
        ['12.00','封面设计 : 葵末神'],
        ['13.00','企划统筹 : 王雪彤/文滢丽'],
        ['14.00','出品 : 大象有风'],
        ['22.73','檐下雨 伴春日冷风吹'],
        ['28.09','西厢里 烛灯照亮心碎'],
        ['33.21','又是梦魇几回 辗转不能寐'],
        ['38.29','眸中泪 相思又为谁'],
        ['43.48','宣纸上 寥寥几笔晨辉'],
        ['48.62','思念长 旧忆惹人伤悲'],
        ['53.78','如今誓约成灰 洒落春江水'],
        ['58.95','却仍盼 情缘续一杯'],
        ['63.71','劝君 莫惜花前醉 莫等雁雀飞'],
        ['66.91','你仍不归'],
        ['69.20','可知 月下我心碎 常将往事追 不悔'],
        ['74.26','半生情雕刻成碑 等不来相会'],
        ['79.46','回首望 只剩物是人非'],
        ['84.17','待君 莫惜花前醉 愿天公作美'],
        ['87.54','你自南归'],
        ['89.66','长亭 盛开满蔷薇 拥簇着红梅 摇坠'],
        ['94.95','夜半与你相依偎 谈前尘是非'],
        ['100.08','街巷尾 故事百转迂回'],
        ['125.87','宣纸上 寥寥几笔晨辉'],
        ['130.84','思念长 旧忆惹人伤悲'],
        ['136.05','如今誓约成灰 洒落春江水'],
        ['141.18','却仍盼 情缘续一杯'],
        ['145.81','劝君 莫惜花前醉 莫等雁雀飞'],
        ['149.16','你仍不归'],
        ['151.39','可知 月下我心碎 常将往事追 不悔'],
        ['156.59','半生情雕刻成碑 等不来相会'],
        ['161.67','回首望 只剩物是人非'],
        ['166.55','待君 莫惜花前醉 愿天公作美'],
        ['169.69','你自南归'],
        ['171.89','长亭 盛开满蔷薇 拥簇着红梅 摇坠'],
        ['177.06','夜半与你相依偎 谈前尘是非'],
        ['182.21','街巷尾 故事百转迂回']
];
</script>

马黑黑 发表于 2024-6-15 19:39

莫惜花前醉，今年花谢，明年花谢，白了人头

马黑黑 发表于 2024-6-15 19:39

{:4_199:}

东篱闲人 发表于 2024-6-15 20:52

马黑黑 发表于 2024-6-15 19:39
莫惜花前醉，今年花谢，明年花谢，白了人头

时光似水，谁也难留。。。。{:5_103:}

马黑黑 发表于 2024-6-15 22:25

东篱闲人 发表于 2024-6-15 20:52
时光似水，谁也难留。。。。

好伤感的样纸{:4_170:}

红影 发表于 2024-6-15 23:01

画面漂亮，移动歌词的颜色调配也好棒。东篱大哥的音画越做越漂亮呢{:4_199:}

红影 发表于 2024-6-15 23:02

莫惜花前醉，那就使劲醉吧{:4_187:}

东篱闲人 发表于 2024-6-16 10:42

马黑黑 发表于 2024-6-15 22:25
好伤感的样纸

嗯嗯嗯。。。{:4_189:}

东篱闲人 发表于 2024-6-16 10:42

红影 发表于 2024-6-15 23:02
莫惜花前醉，那就使劲醉吧

喝。。。{:4_176:}

马黑黑 发表于 2024-6-16 10:45

东篱闲人 发表于 2024-6-16 10:42
嗯嗯嗯。。。

同情一下下

红影 发表于 2024-6-16 14:02

东篱闲人 发表于 2024-6-16 10:42
喝。。。

有酒无花啊{:4_173:}

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

红影 发表于 2024-6-16 14:02
有酒无花啊

画里不有花嘛。。。{:4_189:}

红影 发表于 2024-6-16 22:22

东篱闲人 发表于 2024-6-16 14:14
画里不有花嘛。。。

看着画喝酒啊{:4_173:}

东篱闲人 发表于 2024-6-17 11:42

红影 发表于 2024-6-16 22:22
看着画喝酒啊

{:4_181:}

红影 发表于 2024-6-17 18:48

东篱闲人 发表于 2024-6-17 11:42


这不是画饼充饥么{:4_173:}

东篱闲人 发表于 2024-6-17 20:03

红影 发表于 2024-6-17 18:48
这不是画饼充饥么

比吃花强。。。。。。

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

东篱闲人 发表于 2024-6-17 20:03
比吃花强。。。。。。

用花佐酒，又不是吃{:4_173:}

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

红影 发表于 2024-6-17 22:46
用花佐酒，又不是吃

云南有个鲜花饼，老难吃了。。

红影 发表于 2024-6-18 20:19

东篱闲人 发表于 2024-6-18 09:09
云南有个鲜花饼，老难吃了。。

真的么，我想不起来是否吃过{:4_173:}

梦江南 发表于 2024-6-20 08:37

欣赏老师的精美音画制作！问好！{:4_187:}
页: [1]
查看完整版本: 【东篱音画】莫惜花前醉