论坛 › 欢乐水吧 › 手心有你(DJ 版) 词曲 唱：马健涛

亚伦影音工作室 发表于 2025-4-21 09:10

手心有你(DJ 版) 词曲 唱：马健涛

本帖最后由 亚伦影音工作室 于 2025-5-11 15:33 编辑 <br /><br /><style>
#bj{position: relative;width: 1286px;height: 720px;MARGIN-LEFT:-300px;margin-top:0px;;overflow:hidden;background:url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp)no-repeat center / cover;border-radius: 0px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #227700; --state:paused;}

#papa{position: absolute;width: 100%;height: 100%;MARGIN-LEFT:0px;margin-top:0px;background:url(https://pic1.imgdb.cn/item/6805ae0458cb8da5c8ba9e15.webp)no-repeat center / cover;}

#tu{position: absolute;top:-20%; left:40%;
        width: 100%;
        height: 100%;animation: round 10s linear infinite var(--state); }
#tu img{width: 40%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);transform: rotateY(180deg);
        }

@keyframes round{
0% {
-webkit-transform:rotate(0deg)scale(3)translate(-100%,50%);
opacity:0}

30% {
-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);
opacity:1}
80% {
-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(3)translate(-20%,-50%);
opacity:0}
}

#tuu{position: absolute;top:-20%; left:10%;
        width: 100%;
        height: 100%;animation: roud 10s linear infinite var(--state); }
#tuu img{width: 40%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
        }

@keyframes roud{
0% {
-webkit-transform:rotate(0)scale(3)translate(100%,-50%);
opacity:0}

30% {
-webkit-transform:rotate(0)scale(1)translate(40%,0%);
opacity:1}
80% {
-webkit-transform:rotate(0deg)scale(1)translate(40%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(3)translate(100%,50%);
opacity:0}
}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 70%;font:300 2.8em 华文隶书;color:#227700;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);z-index: 6;display: none;cursor: pointer;}
#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); } }
#mplayer { position: absolute; text-align: center; top: 95%;transform: translate(-50%); left: 50%;z-index: 60;color:#ffffff;}
.hide{display: none;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 400px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {position: relative;width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state);margin: -90px 0px;border-radius: 50px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 4px #227700;}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#world,#zs,#bjqh{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 66%;
}



</style>

<style>
#dhgc{position:absolute;width: 540px;
    height: 450px;z-index: 6;
   border: 0px solid white;cursor: pointer;
    overflow: hidden;margin: 8% 10px;
}

.lrc {position:absolute;width: 100%;
    height: 100%;
   border: 0px solid white;
    margin: 0px 0px;
}

.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0}
.lrc #ul li {
font:300 1.2em 微软雅黑;
    color: #ccc;
   
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;
    height: 50px;
    line-height: 35px;
}

.lrc #ulli.active{   font:450 1.6em 微软雅黑;
    color: #fff;
text-align: center; filter:drop-shadow(#000 1px 1px 0px);
}
</style>


<div id="bj">
<div id="papa"></div>
<div id="tu">
<img src="https://pic1.imgdb.cn/item/6805ada658cb8da5c8ba9deb.webp" alt="">
</div>
<div id="tuu">
<img src="https://pic1.imgdb.cn/item/6805adc658cb8da5c8ba9dfd.webp" alt="">
</div>
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://img1.kuwo.cn/star/albumcover/500/s4s92/84/1990683531.jpg" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
      <audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w9/audio/b2/69/63/67de1f26637fc541b8a39812e378e692/audio.mp3" loop autoplay crossOrigin="anonymous"></audio>
   <div id="geci"></div>
<div id="dhgc"><div class="lrc" >
      <ul id="ul">
      </ul>
    </div>

</div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
    <button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="world" onclick="btn3()"title="播放器模式">播放器隐藏</button>
<button id="bjqh" onclick="btn4()"title="背景模式">背景TWO</button>
<buttonid="zs"onclick="btnClick()"title="屏展模式" >屏展模式</button>
<div id="全屏"></div><div id="退出" ></div>
</div>
<script>
let lrc = `手心有你(DJ 版)
词曲：马健涛
编曲：马健涛
htnl动画设计：亚伦
演唱：马健涛
出品：亚伦影音
歌词制作：亚伦
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
谢谢你一直的包容我
没有丢下我
谢谢你一直的爱着我
原谅我的过错
感谢上苍把你赐给我
温暖了我心窝
当我哭泣难过的时候
你会紧紧抱着我
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
谢谢你一直的包容我
没有丢下我
谢谢你一直的爱着我
原谅我的过错
感谢上苍把你赐给我
温暖了我心窝
当我哭泣难过的时候
你会紧紧抱着我
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
我要把你捧在我手心
`;
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>
<script>
var mseek = false;
var mState = () => audio.paused ?
( btnplay.style.setProperty('--state', 'paused'), bj.style.setProperty('--state', 'paused'),btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'),bj.style.setProperty('--state', 'running'),btnplay.title = '点击暂停' );

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;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());
</script>

<script>
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
    audio: document.querySelector("#audio"),
    ul: document.querySelector("#ul"),
    container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
    var lrcData = lrcArr.split(']');
    var lrcTime = lrcData.substring(1);
    var obj = {
      time: parseTime(lrcTime),
      word: lrcData
    }
    result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
    lrcTimeArr = lrcTime.split(":")
    return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
    let Time = doms.audio.currentTime;
    for (let i = 0; i < result.length; i++) {
      if (result.time > Time) {
            return i - 1;
      }
    }
}
// 创建歌词列表
function createElements() {
    let frag = document.createDocumentFragment(); // 文档片段
    for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
    let index = getIndex();
    // 计算滚动距离
    let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
    if (offset < minOffset) {
      offset = minOffset;
    };
    if (offset > maxOffset) {
      offset = maxOffset;
    };
    // 滚动
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 清除之前的active
    let li = doms.ul.querySelector(".active")
    if (li) {
      li.classList.remove("active");
    }
    // 为当前所唱到的歌词添加active
    li = doms.ul.children;
    if (li) {
      li.classList.add("active");
    }
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>


<script>
      function btn1() {
         document.getElementById('geci').style.display = 'block';
            document.getElementById('dhgc').style.display = 'none';
      }

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

function btn3(){
                        var img=document.getElementById("mplayer");

                        if(document.getElementById("world").innerHTML=="播放器隐藏"){
                                mplayer.className="hide";
                                document.getElementById("world").innerHTML="显示播放器";
                        }else{
                                mplayer.className="";
                                document.getElementById("world").innerHTML="播放器隐藏";
                        }
                }

   function btn4(){
                        var img=document.getElementById("papa");

                        if(document.getElementById("bjqh").innerHTML=="背景TWO"){
                                papa.className="hide";
                                document.getElementById("bjqh").innerHTML="背景ONE";
                        }else{
                                papa.className="";
                                document.getElementById("bjqh").innerHTML="背景TWO";
                        }
                }

function btnClick() {
            var zs= document.getElementById("zs");
            if (this.isFullscreen()) {
            全屏.style.opacity= '1'; 退出.style.opacity = '0';
                zs.style.cursor="ne-resize";
                exitFullScreen();
            } else {
         全屏.style.opacity= '0'; 退出.style.opacity = '1';
            zs.style.cursor="se-resize";
zs.style.visibility='visible';
                        if (zs.requestFullscreen) {
               bj.requestFullscreen();
                } else if (zs.webkitRequestFullScreen) {
                   zs.webkitRequestFullScreen();
                } else if (zs.mozRequestFullScreen) {
                bj.mozRequestFullScreen();
                } else if ( zs.msRequestFullscreen) {
                  zs.msRequestFullscreen();
                }

            }
      }
      // 退出全屏
      function exitFullScreen() {
            let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
            if (exitFullScreen) {
                exitFullScreen.call(document);
            }
      }
      // 判断是否全屏
      function isFullscreen() {
            return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      }
        </script>

清茶煮雪 发表于 2025-4-21 09:20

{:4_178:}听歌快乐

清茶煮雪 发表于 2025-4-21 09:20

“手心有你”这歌曲也太煽情啦{:4_189:}

清茶煮雪 发表于 2025-4-21 09:21

节奏挺好，提神呢{:4_205:}

清茶煮雪 发表于 2025-4-21 09:22

谢谢老师分享佳作 问好点赞{:4_187:}

老谟深虑 发表于 2025-4-21 11:15

         欣赏老师的新作品，背景变换很有意思。

红影 发表于 2025-4-21 13:36

这个不但能变换歌词显示方式，可以隐藏播放器，还是换背景呢。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-4-21 13:37

两个人物的进入和移除的设计也很漂亮。
这制作功能真齐全{:4_199:}

红影 发表于 2025-4-21 13:38

帖子没完全居中能，若能居中就更好了{:4_204:}

查看完整版本: 手心有你(DJ 版) 词曲 唱：马健涛