东篱闲人 发表于 2023-2-15 19:48

【东篱音画】红尘酒馆


<style>
      #papa { left: -280px; width: 1400px; height: 800px; background: #ccc url('https://pic.imgdb.cn/item/63e7850a4757feff33dbc295.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
      #mplayer { position: absolute; width: 1px; height: 1px; left: 20px; top: 20px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
      #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 615px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,85%,40%,.75),hsla(0,70%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
      @keyframes cover1 { from { width: 0; } to { width: 100%; } }
      @keyframes cover2 { from { width: 0; } to { width: 100%; } }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <img src="/data/attachment/forum/202210/02/075010yyxllzknx5yxfx3o.gif" alt="" style="position: absolute; left: 25px; top: 8px; mix-blend-mode: multiply;" />
      <div id="lrc" data-lrc="红尘酒馆">红尘酒馆</div>
      <div id="mplayer"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1885178379.mp3" autoplay= "autoplay"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr =[['0.00', ' 【烟雨草堂音画】',0.95],
['1.00', ' 作曲 : 刘佳',0.95],
['2.00', ' 编曲 : 孙培喜',0.95],
['3.00', ' 图意：东篱闲人',19.50],
['23.53', '是爱也好 是恨也好',7.23],
['31.14', '你都曾是我的 依靠',7.07],
['38.58', '这般相思如酒的味道',7.19],
['46.15', '淡淡离愁怎么能忘掉',7.09],
['53.61', '是聚也好 是散也好',7.13],
['61.12', '或许都是天意 难料',7.08],
['68.57', '身在红尘有多少烦恼',7.23],
['76.18', '悠悠回忆至今在萦绕',6.59],
['83.12', '我走进了红尘酒馆',3.68],
['86.99', '点了一杯爱情的孤单',3.50],
['90.67', '灯光昏暗 泪水在打转',3.46],
['94.31', '你的一切已与我无关',3.78],
['98.29', '我走进了红尘酒馆',3.49],
['101.96', '给你的情诗再不敢看',3.57],
['105.72', '时光漫漫 诉不尽遗憾',3.35],
['109.25', '那句再见让我情已断',4.01],
['113.47', '',14.34],
['128.57', '是聚也好 是散也好',7.15],
['136.10', '或许都是天意 难料',7.12],
['143.59', '身在红尘有多少烦恼',7.15],
['151.12', '悠悠回忆至今在萦绕',6.74],
['158.22', '我走进了红尘酒馆',3.43],
['161.83', '点了一杯爱情的孤单',3.66],
['165.68', '灯光昏暗 泪水在打转',3.46],
['169.32', '你的一切已与我无关',3.67],
['173.18', '我走进了红尘酒馆',3.47],
['176.83', '给你的情诗再不敢看',3.69],
['180.71', '时光漫漫 诉不尽遗憾',3.37],
['184.26', '那句再见让我情已断',3.70],
['188.15', '我走进了红尘酒馆',3.58],
['191.92', '点了一杯爱情的孤单',3.52],
['195.62', '灯光昏暗 泪水在打转',3.50],
['199.30', '你的一切已与我无关',3.68],
['203.17', '我走进了红尘酒馆',3.50],
['206.85', '给你的情诗再不敢看',3.62],
['210.66', '时光漫漫 诉不尽遗憾',3.40],
['214.24', '那句再见让我情已断',5.53],
['220.06', '时光漫漫 诉不尽遗憾',3.44],
['223.68', '那句再见让我情已断',7.32],
['231.39', '',3.71],
['235.29', ' 和声 : 凌菲',4.04],
['239.55', ' 混音 : 王哲',4.04],
['243.80', ' 发行 : 壹歌传媒',4.04],
['248.06', ' 出品人 : 王峰',4.5]

]

;

aud.loop = false;
mplayer.onclick = () => {
      aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};
</script>

墨羽 发表于 2023-2-15 22:52

楼主的音画一直很有特色，水墨国风展现的淋漓尽致！

非常开心 发表于 2023-2-16 08:21

开心到东篱，何时再干杯，现在不喝酒，将来徒伤悲。{:9027:}

蜻蜓 发表于 2023-2-16 09:39

醉酒当歌人生几何

宁静 发表于 2023-2-16 12:53

老头~~太棒了，逐字逐句的歌词同步做的很准了，配上这么美的图图完美{:9022:}

宁静 发表于 2023-2-16 12:54

网易音乐我手机听不到，电脑上来的，

宁静 发表于 2023-2-16 12:55

感谢老头的精彩分享，你最棒{:10_401:}
页: [1]
查看完整版本: 【东篱音画】红尘酒馆