《我想和你一起去一个地方》蓝兰

亦是金 发表于 2025-6-17 19:39

本帖最后由亦是金于 2025-12-2 12:27 编辑 <br /><br /><style>
#papa {
position: relative;
width: 1300pxpx;
height: 700px;
margin: 40px 0 20px calc(50% - 670px);
border-radius: 22px;
border: thick double#88abfa;

overflow:hidden;

background:url('https://p.cldisk.com/star3/origin/f4696255d8e6d52a727d5c170afcf8f9.png')no-repeat center / cover;
}

.vid{
width: 100%;
height: 100%;
z-index: 1;
position:absolute;
top:0%;
left:0%;
object-fit: cover;
pointer-events: none;
opacity: 0;
animation: round 100s linear infinite;
}    <!--/*背景视频*/
@keyframes round {
0% {opacity: 0;}
4% {opacity: 1;}
10% {opacity: 1;}
15% {opacity: 0;}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6),
.stop .vid:nth-child(7),
.stop .vid:nth-child(8),
.stop .vid:nth-child(9),
.stop .vid:nth-child(10),
      <!--/*背景视频*/

#mb{
width: 100%;
height: 100%;
z-index: 1;
position:absolute;
background: linear-gradient(180deg, rgba(0,0,0,0.008368313145570738) 74%, rgba(0,0,0,0.557387920988708) 93%);
top:0%;
left:0%;
opacity:1;
}

#mboard {
width:100%;
height:200px;
display: flex;
justify-content: center;
align-items:center;
gap: 8px;
position: absolute;
bottom: -60px;
right: 20px;
z-index: 3;
opacity:1;
z-index: 10;
}

#papa:hover #mboard{opacity:1;bottom: -60px;}
#papa:hover #mb{opacity:1;top:0%;}

#mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
#tMsg1, #tMsg2 { width: 45px; font-size: 16px; text-align: center;color: #eee; }

#volwrap {
position: absolute;
width: 100px;
height: 80px;
place-items: center;
border-radius: 20px;
transform:rotate(-90deg);
right: -14px;
bottom: 130px;
}

input {
-webkit-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background-color: transparent;
width: 100%;
}

input::-webkit-slider-runnable-track {
height: 3px;
border-radius: 20px;
background: #eee;
}

input::-webkit-slider-container {
height: 18px;
border-radius: 30px;
overflow: hidden;
}

input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background:#039C09;
border: 1px solid transparent;
margin-top: -4px;
border-image: linear-gradient( #039C09, #039C09) 0 fill / 5 10 5 0 / 0px 0px 0 2000px;
}

#volwrap:hover #volume { opacity:1;}
#btnMute:hover ~ #volwrap > #volume {opacity:1; }
#volume {
position: absolute;
width: 100px;
height: 2px;
opacity:0;
}

#prog {
--track:#eee;
--prog:#ff0000 ;
--prg: 0%;
width: 77%;
height: 5px;
cursor: pointer;
background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px;
border-radius: 20px;
align-items: center;
}

#loopbnt{ z-index: 91;
position:absolute;
width: 25px;
height: 20px;
bottom: 92px;
border-radius: 0px;
right:1%;
filter:invert(0%)hue-rotate(180deg);
cursor: pointer;
}

#fullscreen {
opacity:1;
position: absolute;
width: 25px;
height: 25px;
top:5%;
cursor: pointer;
right: 25px;
z-index: 40;
filter:invert(0%)hue-rotate(180deg);
}

#papa:hover #fullscreen { opacity:1;}

#全屏{
width: 25px;
height: 25px;
position: absolute;
background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}

#退出{
width: 25px;
height: 25px;
position: absolute;
opacity: 0;
background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover;
}

#lrc {
--state: paused;
--motion: cover2;
--tt: 1s;
--bg: linear-gradient(40deg, #fa4354, #fa4354, #7718f8, #18f5f8, #f5f818, #b75004);
position: absolute;
z-index: 16;
left: 50%;
top: 86%;
transform: translate(-50%);
font:300 2.0em/1em 华文楷体;
color: transparent;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}

#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 100%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
clip-path: inset(0 100% 0 0);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
} <!-- /*歌词*/

@keyframes cover1{ to { clip-path: inset(0 0 0 0); transform: scale(2.0) } }
@keyframes cover2 { to { clip-path: inset(0 0 0 0);transform: scale(2.0) } }
</style>

<div id="papa">

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1370612809.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1355219061.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/10/V-681019-541C9333.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/48/V-684880-802FACCC.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/00/00/68/93/51miz_V689333_NWML4eozl.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/69/03/V-690329-7FEFB5E8.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/15/18/V-151809-637CF87A.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/65/86/V-658610-3FC7FB1B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/69/18/V-691883-5EDA4792.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/65/V-686535-A8B3513E.mp4" loop muted autoplay=""></video>

</div>
<div id="mb"> </div>
<div id="mboard">
   <img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
   <span id="tMsg1">00:00</span>
   <span id="prog"></span>
   <span id="tMsg2">00:00</span>
   <img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
   <div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" /> </div>

<div data-lrc="" id="lrc" ></div>
<div id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/ee/06/fb/44e21f09a8023475057870d345d38944/audio.mp3" autoplay ></audio>

<script>

var lastVolume = 1, muted = false;

var imgAr = [
   'https://638183.freep.cn/638183/web/icon/play.svg',
   'https://638183.freep.cn/638183/web/icon/pause.svg',
   'https://638183.freep.cn/638183/web/icon/unmuted.svg',
   'https://638183.freep.cn/638183/web/icon/muted.svg',
];

var setVolume = (val) => Math.min(1, Math.max(0, val));

var setMute = () => {
   if(lastVolume === 0) return;
   muted = !muted;
   muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};

var s2m = (seconds) => {
const secs = Math.floor(seconds || 0);
return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};

var mState = () => {
   btnPlay.src = aud.paused ? imgAr : imgAr;
   btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};

document.addEventListener('keydown', e => {
   if(!e.altKey) return;
   switch (e.keyCode) {
            case 88:
                     btnPlay.click();
                     break;
            case 74:
                     setMute();
                     break;
            case 187: case 107:
                     aud.volume = setVolume(aud.volume + 0.1);
                     lastVolume = aud.volume;
                     break;
            case 189: case 109:
                     aud.volume = setVolume(aud.volume - 0.1);
                     lastVolume = aud.volume;
                     break;
            default:
                     return;
   }
});
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
   prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
   tMsg1.innerText = s2m(aud.currentTime);
   tMsg2.innerText = s2m(aud.duration);
};

aud.onvolumechange = () => {
   btnMute.src = aud.volume === 0 ? imgAr : imgAr;
   volume.value = aud.volume;
}
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
btnPlay.onclick = () => aud.paused ? aud.play():aud.pause();
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'

let fs= true;
fullscreen.onclick = () => {
   fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
   fs = !fs;
}
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `《我想和你一起去一个地方》
词曲 : 王冲
演唱 : 蓝兰
LRC编辑：亦是金
● ● ● ● ● ●
我想和你一起去一个地方
一个地图上都没有的村庄
我弹着吉他为你歌唱
你坐在身旁为我鼓掌
那里有一个不大的房
那里有一个我喜欢的床
那里有一个不灭的月亮
那里有一个你微笑的脸庞
● ● ● ● ● ●
我想和你一起去一个地方
逃离这城市的灯火辉煌
我为你穿上美丽的衣裳
你坐在身旁为我梳妆
那里有一个不大的房
那里有一个我喜欢的床
那里有一个不灭的月亮
那里有一个你微笑的脸庞
那里有一个
火热的胸膛
那里有一个
爱我的心脏
那里有一个
能依靠的肩膀
那里有一个你幸福的模样

-- 谢谢欣赏 --

`;
/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
<script>
(function() {var image = document.getElementById("testImg");
   const vids = document.querySelectorAll('.vid');
   var mState = () => {
      vids.forEach(vid => aud.paused ? (vid.pause(),image.classList.add('stop') ): (vid.play(),image.classList.remove('stop')) );
   };
aud.onplaying = aud.onpause = () => mState();
})();

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

</td></tr></table>

<DIV style="HEIGHT: 50px">

红影发表于 2025-6-17 20:56

漂亮的视频轮播效果，歌词的制作也很有特色。
欣赏亦是金老师好帖{:4_199:}

红影发表于 2025-6-17 20:58

歌曲很温柔很感人{:4_187:}

亦是金 发表于 2025-6-17 21:14

红影发表于 2025-6-17 20:56
漂亮的视频轮播效果，歌词的制作也很有特色。
欣赏亦是金老师好帖

问好红影！谢谢欣赏点赞！{:4_187:}

亦是金 发表于 2025-6-17 21:14

红影发表于 2025-6-17 20:58
歌曲很温柔很感人

祝欣赏愉快！{:4_187:}

红影发表于 2025-6-17 21:41

亦是金发表于 2025-6-17 21:14
问好红影！谢谢欣赏点赞！

这个好像代码里有点小问题，让论坛排版都有点变了呢{:4_173:}

红影发表于 2025-6-17 21:42

亦是金发表于 2025-6-17 21:14
祝欣赏愉快！

嗯嗯，这个制作很美。再赏亦是金老师好帖{:4_187:}

梦江南 发表于 2025-6-18 08:56

欣赏老师精美的音画制作。{:4_187:}

亦是金 发表于 2025-6-18 09:41

梦江南发表于 2025-6-18 08:56
欣赏老师精美的音画制作。

问好梦江南老师！谢谢欣赏！{:4_187:}

页: [1]

花潮论坛's Archiver

《我想和你一起去一个地方》蓝兰