约会阳光 发表于 2024-5-8 01:18

素材 + 试贴


诺北 发表于 2024-5-8 13:09

素材不能放在这里哦，这单独一张，帮你转移到水区了

约会阳光 发表于 2024-5-8 14:13

诺北 发表于 2024-5-8 13:09
素材不能放在这里哦，这单独一张，帮你转移到水区了
好的，谢谢！问好诺北管理员~

澜天 发表于 2024-5-8 20:23

一个醒目的同心结
挺喜庆的画面

约会阳光 发表于 2024-5-8 22:02

谢谢鼓励！问好澜天版主

我也在 发表于 2024-5-10 21:37

适合做音画素材。

约会阳光 发表于 2024-5-10 21:50

谢谢鼓励！问好我也在超版，顺祝周末愉快

约会阳光 发表于 2025-4-10 02:12

<style>
#papa {
position: absolute; left: 50%; transform: translateX(-50%);width: clamp(806px, 70vw, 1440px); height: clamp(450px, 75vh, 750px);background: #ddd url('https://pic.imgdb.cn/item/668a84acd9c307b7e9437ddf.jpg ') no-repeat center/cover;

}

.zw {
    height: clamp(450px, 75vh, 750px);
    margin: 30px;
    --state: paused;
    z-index: 1;
}

#lrcDiv {
    writing-mode: vertical-rl;
    --hlcolor: #FF44AA;
    position: absolute;
    top: 1%;
    right: 10%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 145px;
    height: 650px;
    overflow: hidden;
    font: normal 18px/24px 'Microsoft YaHei', sans-serif;
    text-align: center;
    color: #FFBB66;
    background: none;
    z-index: 5;
}

#lrcDiv>p {
    margin: 0;
    padding: 0;
    transition: .95s;
}

#lrcDiv>p.hlight {
    color: var(--hlcolor);
    font-size: 28px;
    font-weight: bold;
}

#mplayer {
    z-index: 5;
    --track: silver;
    --prog: red;
    --percent: 0;
    display: flex;
    left: 300px;
    top: 550px;
    gap: 15px;
    flex-direction: column;
    align-items: center;
    width: 650px;
    background: none;
    color: white;
    padding: 15px;
    position: absolute;
}

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

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

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

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

#progDiv {
    z-index: 5;
    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);
}

.vid {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .8;
    object-fit: cover;
    mask: radial-gradient(transparent 20%, red);
    -webkit-mask: radial-gradient(transparent 20%, red);
    pointer-events: none;
    left: 0px;
    top: 0px;
}
</style>
<div id="papa">
<div id="lrcDiv"></div>
<div id="mplayer">
    <div id="btns-area">
      <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>
<video class="vid " src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" loop muted autoplay=""></video>
<audio src="https://cccimg.com/view.php/d05d8a08510c3c47ab212b4fa6668f52.mp3" autoplay loop></audio>
</div>
<div class="zw"></div>

<script>
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');
      const vids = document.querySelectorAll('video');

       let lrcAr = [], isFScreen = false;
         let lineHeight = 30, showLines = 7;                // 滚动需要的关键参数
                lrcDiv.style.width = 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.textContent = result.trim();
                              lrcDiv.appendChild(p);
                if (!result) return; // 跳过不匹配的行
                });
                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[ i ], text: lrcAr[ i ]};
                        const next = i < lrcAr.length - 1 ? lrcAr : null;aud.currentTime <= aud.duration;
                        const p = lrcDiv.children[ i ];
                        if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
                              p.classList.add('hlight');
                              //lrcDiv.scroll({left: 0, top: p.offsetLeft - lrcDiv.offsetHeight / 2 + 12, behavior: 'smooth'});
                              // 滚动的关键代码，与原来的比较下就知道为什么不动了。
                              lrcDiv.scroll({left: p.offsetLeft - (Math.ceil(showLines / 2) * lineHeight) + lineHeight, top: 0, 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 = '点击播放';
                        playvids(false);
                        papa.style.setProperty('--state', 'paused');
                } else {
                        btnPlay.className = 'pause';
                        btnPlay.title = '点击暂停';
                        playvids(true);
                        papa.style.setProperty('--state', 'running');
                }
      };

    const playvids = (flag) => {
                if(!vids) return;
                vids.forEach(vid => flag ? vid.play() : vid.pause());
      };

       progDiv.addEventListener('click', (e) => {
if (progDiv.offsetWidth === 0 || !aud.duration) return; // 防御性检查
const targetTime = (e.offsetX / progDiv.offsetWidth) * aud.duration;
aud.currentTime = Math.min(targetTime, aud.duration); // 确保不超限
});
       progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));

const lrc = `
时光匆匆如流水（Live 合唱版)-付飞社
词：未子夫
曲：李勇军
编曲：姜凯升
后期：鲁晓锋
和声：凌菲
制作人：李勇军工作室
OP：新创焦桐文化
【曲库专用】
来到人世间受苦又受累
尝尽了人生百般滋味
一路坎坷雨打又风吹
回首这半生我太过狼狈
春去秋来 花开花枯萎
转眼我青丝 已经成了灰
想找个地方 好好醉一回
又害怕醉了没人可依偎
时光匆匆 岁月如流水
往事随风 一去不再回
不知不觉容颜已憔悴
我这辈子遭了太多罪
时光匆匆 岁月如流水
人到了中年 没路可以退
看遍了人间是是与非非
我若心碎 谁给我安慰
谁给我安慰
春去秋来 花开花枯萎
转眼我青丝 已经成了灰
想找个地方 好好醉一回
又害怕醉了没人可依偎
时光匆匆 岁月如流水
往事随风 一去不再回
不知不觉容颜已憔悴
我这辈子遭了太多罪
时光匆匆 岁月如流水
人到了中年 没路可以退
看遍了人间是是与非非
我若心碎 谁给我安慰
谁给我安慰

`;

getLrcAr(lrc);

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

</script>

约会阳光 发表于 2025-4-10 02:15

晕~为何在帖子下部会有无关代码显示呢？
页: [1]
查看完整版本: 素材 + 试贴