亚伦影音工作室 发表于 2025-3-23 21:28

还魂伞 - 刀郎

本帖最后由 亚伦影音工作室 于 2025-3-23 21:28 编辑 <br /><br /><style>
#papa { margin: 30px 0 30px calc(50% - 693px); background:#000;}
.pa {
    width: 1286px;
    height: 720px;
    display: grid;
    place-items: center;
    background: #eee;
    box-shadow: 2px 2px 10px #000;
    z-index: 1;
    position: relative;
    margin: 20px auto;
}

.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){animation-play-state: paused;}

#lrcDiv {
        --hlcolor:#880000;
        position: absolute;
       top: 78%; width: 80%;
        text-shadow: -1px 0px 1px #fff, 1px 0px 1px #fff, 0px -1px 1px #fff, 0px 1px 1px #fff;
        height: 200px;
        overflow: hidden;
        font:normal 0px/50px '微软雅黑', sans-serif;
        text-align: center;;
        color:#000089;font-weight:900;
        background: none;
        padding: 0;
}

#lrcDiv > p {
        flex: 1;
        margin: 0;
        padding: 0;
        max-height: 50px;
        transition: .75s;
}
#lrcDiv > p.hlight {
        color: var(--hlcolor);
        font-size: 38px;
        font-weight:900;
}

#mplayer {
        --track: silver;
        --prog: gold;
        --percent: 0;
        display: flex;
        gap: 10px; bottom: 10px; width: 40%;
        flex-direction: column;
        align-items: center;

        background: none;
        color: white;
        padding: 10px;
        position: absolute;
}

#btns-area {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
}

#btn-play {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: relative;
}

#btn-play:hover::after {
        opacity: .7;
        filter:alpha(opacity=50);
}

#btn-play::after {
        position: absolute;
        content:'';
        width: 100%;
        height: 100%;
        background: var(--prog);
        clip-path: var(--clip);
}

#progDiv {
        width: 100%;
        height: 10px;
        background: linear-gradient(to right, var(--prog) var(--percent), var(--track) var(--percent), var(--track) 0) no-repeat 0 50% / 100% 2px;
        cursor: pointer;
}

.play {
        --clip: polygon(10% 0, 100% 50%, 10% 100%);
}

.pause {
        --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}
#fsbtn { top: 20px;position: absolute;cursor: pointer;font:normal 22px/0px '微软雅黑', sans-serif;color:#64A600; }
</style>
<div id="papa" class="pa">

<div id="testImg">
<video class="vid" src="https://img-baofun.zhhainiao.com/fs/scene/preview_video/38affc2c69d68be013e1ef0873f7b224_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ab3c4dcdf625245d97ace90a0f262001_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/6257f7d9e32fca15af95a1a49c2ec7cf_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/4cec2d439cad710ff84649c3b6564656_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/a4aabaaedd7ae793f3eebb15162223a6_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/2045e401ec399fb8adcfc1d0b8dcccac_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/2a5fb0d2248e88e4bbed35e774bb0f34_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/cace93f6820fcc80186455959f0dbef9_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/3cdef2360a0d8b338f0ddfdf91cc8140_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/dbc784cc95fd43c9ea2048b48acfeffa_preview.mp4" loop muted autoplay=""></video>
</div>

        <audio src="https://s2.ananas.chaoxing.com/sv-w9/audio/57/b5/81/dc588b8e3e72acf0b8212cd1beaf20ee/audio.mp3" autoplay loop></audio>
<div id="lrcDiv"></div>
                <div id="mplayer">
                        <div id="btns-area"title="Alt+X">
                                <div id="time1">00:00</div>
                                <div id="btn-play" class="pause"></div>
                                <div id="time2">00:00</div>
                        </div>
                        <div id="progDiv"></div>
                </div>
                <div id="fsbtn" title="F11">进入全屏</div>
</div>


<script type="module">
export function hcplay(pa, lrctext, showLines = 3) {
        if (pa instanceof Element === false || !lrctext) return;

        pa.innerHTML += ``;

        const mplayer = document.querySelector('#mplayer');
        const aud = document.querySelector('audio');
        const lrcDiv = document.querySelector('#lrcDiv');
        const progDiv = document.querySelector('#progDiv');
        const btnPlay = document.querySelector('#btn-play');
       

        let lrcAr = [], isFScreen = false, fsTimer;

        const lineHeight = 50;
        lrcDiv.style.height = lineHeight * showLines + 'px';
       
        const getLrcAr = (text) => {
                const ar = text.trim().split(/[\r\n]+/g);
                var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        let result = item.match(reg);
                        let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                        lrcAr.push(.trim()]);
                        let p = document.createElement('p');
                        p.innerText = result.trim();
                        lrcDiv.appendChild(p);
                });
                lrcAr.sort((a, b) => a - b);
        };

        const updatePlayerDatas = () => {
                const percent = (aud.currentTime / aud.duration) * 100;
                time1.innerText = formatTime(aud.currentTime);
                time2.innerText = formatTime(aud.duration);
                mplayer.style.setProperty('--percent', percent + '%');
                for (let i = 0; i < lrcAr.length; i ++) {
                        const lrc = {time: lrcAr, text: lrcAr};
                        const next = i < lrcAr.length - 1 ? lrcAr : null;
                        const p = lrcDiv.children;
                        const scrollPos = p.offsetTop - (Math.ceil(showLines / 2) * lineHeight) + lineHeight;
                        if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
                                p.classList.add('hlight');
                                lrcDiv.scroll({left: 0, top: scrollPos, behavior: 'smooth'});
                        } else {
                                p.classList.remove('hlight');
                        }
                }
        };

        const formatTime = (seconds) => {
                const mins = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        };

        const mState = () => {
                if (aud.paused) {
                        btnPlay.className = 'play';
                        btnPlay.title = '点击播放(Alt+X)';
                        playvids(false);
                        pa.style.setProperty('--state', 'paused');
                } else {
                        btnPlay.className = 'pause';
                        btnPlay.title = '点击暂停(Alt+X)';
                        playvids(true);
                        pa.style.setProperty('--state', 'running');
                }
        };

const playvids = (flag) => {var image = document.getElementById("testImg");
      const vids = document.querySelectorAll('.vid');
      if(!vids) return;
      vids.forEach(vid => flag ? (vid.play(),image.classList.remove('stop')): (vid.pause(),image.classList.add('stop')));
};
       

        progDiv.addEventListener('click', (e) => aud.currentTime = e.offsetX / progDiv.offsetWidth * aud.duration);
        progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));

        aud.addEventListener('timeupdate', updatePlayerDatas);
        aud.addEventListener('playing', mState);
        aud.addEventListener('pause', mState);
        btnPlay.addEventListener('click', () => aud.paused ? aud.play(): aud.pause());



fsbtn.onclick = () => isFScreen ? document.exitFullscreen() : pa.requestFullscreen();

        pa.addEventListener('mousemove', (e) => {
                clearTimeout(fsTimer);
                fsbtn.style.opacity = mplayer.style.opacity = '1';
                fsTimer = setTimeout(() => {
                        fsbtn.style.opacity = '1';
                }, 1000);
        });

        document.addEventListener('fullscreenchange', () => {
                if (document.fullscreenElement !== null) {
                        isFScreen = true;
                        fsbtn.innerText = '退出全屏';
                } else {
                        isFScreen = false;
                        fsbtn.innerText = '进入全屏';
                }
        });

        document.addEventListener('keydown', e => {
                if(e.altKey && e.key === 'x') btnPlay.click();
                if(e.key === 'F11') {
                        fsbtn.click();
                        e.preventDefault();
                }
        });

        getLrcAr(lrctext);
};
var lrc = `还魂伞 - 刀郎
词Lyrics：刀郎
曲Composer：刀郎
编曲Arrangement：刀郎
制作人Producer：刀郎
音乐统筹Musical Co-ordination：张旖旎Judy
电吉他E-Guitar：梁怀京
琵琶Pipa：王宜云
声乐指导Vocal Coach：王冠
合声编配Backing Vocal Arrangement：张旖旎Judy
合声Backing Vocal：刀郎
录音Recording：张旖旎Judy
混音Mixing：Jeff Fields
母带Mastering：Matt Chowning
录音室Recording Studio：Soundquake Studio/Redbird Studio
OP：刀郎
为何这些女子尽是艳妆娇俏的打扮
看她门环挂着牡丹
不辞上等人的身段
叫大叔若说是笑借一把还魂伞
卖渡人道罗衾难耐对岸那倒春寒
为她有个经意的公子
许她流落在宁波府
尝遍了月老的面目便是良人也辜负
看青灯落尽了长安鱼鼓
道琴亦道了无情呀
只为萍水的邂逅
孤蓬难渡芳徽也难渡
说到底是花娘叹息还是恩怀的洞房
有心人把那昨日的黄粱
裁成了嫁衣裳
待富贵求助于城隍借一件穿身上
秦裘郎总有意配一对
超度杨柳的花黄
为她有个经意的公子
许她流落在宁波府
尝遍了月老的面目便是良人也辜负
看青灯落尽了长安鱼鼓
道琴亦道了无情呀
只为萍水的邂逅
孤蓬难渡芳徽也难渡
只为萍水的邂逅
孤蓬难渡芳徽也难渡
`;
hcplay(papa, lrc, 1);
</script>





梦油 发表于 2025-3-24 09:32

欣赏佳作，问候亚伦。

红影 发表于 2025-3-24 10:27

这些视频轮播真漂亮，歌曲也好听。
这个用了黑黑的代码，还有自己的设计，真漂亮{:4_187:}

红影 发表于 2025-3-24 10:27

欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2025-3-24 23:02

画面效果挺漂亮的，亚纶这个做的漂亮，都是视频背景转换，有时间套用玩一个

小辣椒 发表于 2025-3-24 23:02

感谢亚纶精彩的制作{:4_187:}
页: [1]
查看完整版本: 还魂伞 - 刀郎