论坛 › 欢乐水吧 › 爱你无罪（Live 合唱版）

清茶煮雪 发表于 2025-5-7 16:54

爱你无罪（Live 合唱版）

<style>
#papa{margin: 130px -300px;
        width: 1286px;
        height: 720px;
        background:#800000 url('https://file.uhsea.com/2505/037aae00e8e657be9b1070ba4b7e26335Z.jpg') no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}
#ppm{position: absolute; width: 100%; height: 100%; opacity:1; z-index: 2;
background:url(https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif)no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 2;bottom: 0;background:url(https://pic1.imgdb.cn/item/67564af4d0e0a243d4e015f6.png)no-repeat center/100% 100%;mix-blend-mode: difference;
}
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;   
top:0px; left:0px;
animation: rod 2s linear infinite var(--state);}
@keyframes rod{        0% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #ff0000 100%); }
25% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #800000 100%); }
50% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #000080 100%); }
75% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #995918 100%); }
                100%{ background:radial-gradient(circle farthest-corner at center center, transparent 22%, #97349E 100%); }
}

#bfq{   
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:60%;background:#0000;
transform:scale(.6);
   left: 0%;z-index: 20;}
#cp{   
      position:absolute;
      width: 240px;border-radius: 50%;
      height:240px;animation: rotating 6s infinite linear var(--state);
      top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   cursor: pointer;
   left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url('https://img3.kuwo.cn/star/albumcover/500/10/94/2896435496.jpg') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
      top:6%; left:45%;z-index: 2;
      width: 150px;background: url('https://pic1.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/85%;
      height: 300px;
      cursor: pointer;
}

.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}


#containe{width: 600px;
    height: 570px;list-style:none;
    overflow: hidden;
   position: relative;
left: 52%;
    z-index: 6;
    top: 6%;
    }
.lrcList{font: normal 20px 'FZYaoti', sans-serif;
    line-height: 50px;
      
    color: #fff; overflow: hidden;
    text-align: center;
    transition:all 0.2s;/* 过渡动画。实现歌词上下移动的动画 */
}
.lrcList li{list-style-type: none;
   display: block;
    transition:all 0.2s;
    height: 50px;
    opacity: 1;
}
.lrcList .current{
    transform: scale(1.4);
    color: #aaf650;
   font-weight: 650;
    opacity: 1;
}


#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 86%;font:300 3.2em 华文隶书;color:#000;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 0.8px 0 0)drop-shadow(#fff 0 0.8px 0)drop-shadow(#fff -0.8px 0 0) drop-shadow(#fff 0 -0.8px0);z-index: 6;display: none;}
#geci::before{position: absolute;content: attr(data-geci);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); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
.hide{display: none;}
.klokgcbtn,.dhgcbtn{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none; z-index: 6;
cursor: pointer;margin: 20px 5px;left: 10%;
}
</style>

<divid="papa">
<div id="dh" ></div>
<button class="klokgcbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
<button class="dhgcbtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<div id="ppm"></div>
<div id="ppcm" ></div>
<div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>

<divid="containe">
<ul class="lrcList" id="lrcList">
            <li class="current"></li>
      </ul>
</div>


<div id="geci"></div>

<audioid="audio"   src="https://aod.cos.tx.xmcdn.com/storages/1514-audiofreehighqps/65/2F/GMCoOR4IjYjpACAAAAI6d0T0.mp3" autoplay loop></audio>
</div>

<script>
letlrc = `爱你无罪（Live 合唱版）
演唱：恋特特
作词：小酒
作曲：孙毅然
编曲：毅然音乐
混音：毅然音乐
和声：黄文文
合唱团：毅然音乐合唱团
统筹：李艳萍
制作人：孙毅然
「未经著作权人许可. 不得翻唱翻录或使用」
假如爱过的人没有伤悲
怎会有人深夜买醉
如果孤独时能有你陪
又怎会想你时流泪
明知谁是你心里第一位
却不曾有一丝丝后悔
想全心全意在你身边守卫
用一生证明爱你无罪
不怕爱你一路心会碎
不怕最终陌路爱成灰
风雨陪你面对 许你余生相随
就算眼泪会崩溃
不怕爱你一路心会碎
不管你身边的她是谁
感情没有错对 你比谁都珍贵
爱换伤痕也无悔
明知谁是你心里第一位
却不曾有一丝丝后悔
想全心全意在你身边守卫
用一生证明爱你无罪
不怕爱你一路心会碎
不怕最终陌路爱成灰
风雨陪你面对 许你余生相随
就算眼泪会崩溃
不怕爱你一路心会碎
不管你身边的她是谁
感情没有错对 你比谁都珍贵
爱换伤痕也无悔`;

function parseLRC(LRC){
    let lines = LRC.split('\n'); // 把歌词转为数组
    let LRCArr = [];// 歌词数组
    // 遍历数组
    lines.forEach(item => {
       let parts = item.split("]"); //
      let timer =parts.slice(1).trim();//
      let obj = {
            time: parseTime(timer),
            word: parts.trim()==""?"":parts
      }
      // console.info( obj );
      LRCArr.push(obj);   
    });
    return LRCArr;
}
function parseTime(timer){
   let t = timer.split(":");
   let result = Number(t)*60 + Number(t);
   return result ;
}
function findIndex(){
    // 播放器当前时间
    let index = -1;
    let curTime = doms.audio.currentTime;
    for(let i=0; i<=LRCData.length-1 ; i++){
      if( curTime < LRCData.time ){
            index = i - 1;
            returnindex;
      }
    }
    // 找遍了，都没有歌词，说明播放完毕里，显示最后一句歌词。
    index = LRCData.length-1
    return index;
}

function createLrcList(lrc){
    // 避免多次操作 DOM。创建一个 DOM 片段，它不会显示，但是可以集中处理 DOM。
    let frag = document.createDocumentFragment();
    doms.lrcList.innerHTML = "";
    lrc.forEach(item=>{
      let li = document.createElement("li");
      li.innerHTML = item.word ;
      frag.appendChild(li);
    });
    doms.lrcList.appendChild(frag);
}

/*
设置歌词 ul 的偏移量
*/
function setOffset(index){
    let dis =-1*( index * liH + liH/2- conH/2 );// 位移距离
    doms.lrcList.style.transform = `translateY(${dis}px)`;
    console.info( dis );
}
/*
设置歌词高亮
*/
function setLight(index){
    let ul = doms.lrcList;
    let lis = ul.children;
    let cur = document.querySelector(".current");
    if( cur ){ // 如果存在
      cur.classList.remove("current");
    }
    lis.classList.add("current");
}


let doms = {
    audio:document.querySelector("audio"),
    lrcList:document.querySelector("#lrcList"),
    container:document.querySelector("#containe")
}
let LRCData = parseLRC(lrc);
createLrcList(LRCData);// 创造歌词 li
let conH = doms.container.clientHeight;// 容器高度
let liH = doms.lrcList.children.clientHeight;// li 高度
// 初始化歌词位置，让第一句歌词在歌词区中间
doms.lrcList.style.transform = `translateY(${-1*( liH/2- conH/2)}px)`;

doms.audio.addEventListener("timeupdate",function(){
    let index = findIndex();
    setLight(index);// 歌词位移
    setOffset(index); // 歌词高亮
});
function btn1() {
            
            document.getElementById('geci').style.display = 'block';
            document.getElementById('containe').style.display = 'none';
      }

      function btn2() {
         document.getElementById('geci').style.display = 'none';
            document.getElementById('containe').style.display = 'block';
      }

let mState = () => audio.paused ? (papa.style.setProperty('--state', 'paused'),ppcm.style.opacity= '1',ppm.style.opacity = '0'): (papa.style.setProperty('--state', 'running'),ppcm.style.opacity = '0',ppm.style.opacity = '1');
audio.addEventListener('play', () => mState());
audio.addEventListener('pause', () => mState());
cp.onclick =cz.onclick = () => audio.paused ? (audio.play(),cz.classList.remove('purple')) : (audio.pause(),cz.classList.add('purple'));

</script>
<script>
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function 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));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (audio.currentTime - lrcAr);
      showLrc(time);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}

audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>

清茶煮雪 发表于 2025-5-7 16:55

谢谢亚伦老师的代码{:4_180:}

清茶煮雪 发表于 2025-5-7 16:56

为什么我测试的时候能过看见动效和滚动的歌词，发出来就看不到呢？{:4_203:}

红影 发表于 2025-5-7 17:31

我这里能听到歌曲，看不到动态和歌词{:4_204:}

梦江南 发表于 2025-5-8 09:24

没看到歌词。

樵歌 发表于 2025-5-8 10:17

手机上能听到歌声，没有动图。请问@小辣椒 帮看看，她是做小动图的砖家{:4_196:}

樵歌 发表于 2025-5-8 10:19

带和声的歌我也喜欢。好像小辣椒以前也发过。

小辣椒 发表于 2025-5-8 20:48

樵歌 发表于 2025-5-8 10:17
手机上能听到歌声，没有动图。请问@小辣椒 帮看看，她是做小动图的砖家

樵哥哥我看了代码，这个播放器我没有做过，但这个音乐连接是我的，我玩过的

小辣椒 发表于 2025-5-8 20:51

菲儿 发表于 2025-5-7 16:56
为什么我测试的时候能过看见动效和滚动的歌词，发出来就看不到呢？


#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 2;bottom: 0;background:url(<a href="https://pic1.imgdb.cn/item/67564af4d0e0a243d4e015f6.png" target="_blank">https://pic1.imgdb.cn/item/67564af4d0e0a243d4e015f6.png</a>)no-repeat center/100% 100%;mix-blend-mode: difference;
}
你是套用亚纶老师的代码吧，这句你有错误

清茶煮雪 发表于 2025-5-9 16:21

小辣椒 发表于 2025-5-8 20:51
你是套用亚纶老师的代码吧，这句你有错误

你帮我修改好了呀，{:4_199:}谢谢亲爱的小辣椒{:4_187:}

清茶煮雪 发表于 2025-5-9 16:23

红影 发表于 2025-5-7 17:31
我这里能听到歌曲，看不到动态和歌词

代码好难学{:4_173:}幸好小辣椒帮我修改好了{:4_199:}

清茶煮雪 发表于 2025-5-9 16:24

樵歌 发表于 2025-5-8 10:17
手机上能听到歌声，没有动图。请问@小辣椒 帮看看，她是做小动图的砖家

谢谢樵歌，{:4_204:}谢谢小辣椒，这下显示出来啦{:4_199:}{:4_205:}

红影 发表于 2025-5-9 20:38

菲儿 发表于 2025-5-9 16:23
代码好难学幸好小辣椒帮我修改好了

嗯嗯，这个制作很漂亮{:4_187:}

樵歌 发表于 2025-5-12 20:36

菲儿 发表于 2025-5-9 16:24
谢谢樵歌，谢谢小辣椒，这下显示出来啦

你谢谢@小辣椒 ，我比她还开森{:4_189:}

樵歌 发表于 2025-5-12 20:38

小辣椒 发表于 2025-5-8 20:48
樵哥哥我看了代码，这个播放器我没有做过，但这个音乐连接是我的，我玩过的

樵哥哥就知道你是这方面的砖家，一定能解决{:4_189:}

小辣椒 发表于 2025-5-12 21:06

菲儿 发表于 2025-5-9 16:21
你帮我修改好了呀，谢谢亲爱的小辣椒

啊~~菲儿不客气{:4_171:}

小辣椒 发表于 2025-5-12 21:09

菲儿 发表于 2025-5-9 16:24
谢谢樵歌，谢谢小辣椒，这下显示出来啦


https://www.bohann.net/data/attachment/forum/202505/05/152349tc8krwpt8knwztpc.jpg

菲儿 你图片连接失效了

小辣椒 发表于 2025-5-12 21:09

樵歌 发表于 2025-5-12 20:38
樵哥哥就知道你是这方面的砖家，一定能解决

樵哥哥高看我了，小辣椒还有许多不会的

樵歌 发表于 2025-5-13 08:13

小辣椒 发表于 2025-5-12 21:09
樵哥哥高看我了，小辣椒还有许多不会的

反正我不会的你都会{:4_189:}

清茶煮雪 发表于 2025-5-13 10:11

小辣椒 发表于 2025-5-12 21:09
菲儿 你图片连接失效了

谢谢小辣椒 http://bohan.nuxmax.com/data/attachment/forum/202505/05/152349tc8krwpt8knwztpc.jpg，我从新换了这个链接，我这里能看见了，不知你们能看见吗

查看完整版本: 爱你无罪（Live 合唱版）