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

亚伦影音工作室 发表于 2025-5-3 13:59

爱你无罪（Live 合唱版）

本帖最后由 亚伦影音工作室 于 2025-5-30 09:57 编辑 <br /><br /> <style>
#papa{margin: 10px -300px;
        width: 1286px;
        height: 720px;
        background:#800000 url('https://pic1.imgdb.cn/item/681f73b158cb8da5c8eb85ed.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-3 14:06

漂亮的制作，两种歌词方式及背景图的设置都很漂亮，播放器也很有特色。
欣赏亚伦老师好帖{:4_199:}

梦油 发表于 2025-5-3 14:10

欣赏佳作，问候亚伦。

老谟深虑 发表于 2025-5-3 18:45

         欣赏老师的精美音画，点赞！

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

欣赏亚伦老师好帖！漂亮的制作，歌词效果和背景图变色设置都很漂亮，播放器也很有特色。{:4_199:}

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

喜欢这首歌，借代码套用一个，这里说声谢谢老师{:4_187:}

小辣椒 发表于 2025-5-8 21:44

就这个刚才菲儿套用的，我前面没有注意，现在是亚纶和小辣椒同屏了，喜欢的歌曲都不错的了{:4_170:}

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