亚伦影音工作室 发表于 2026-6-8 19:20

望你【音乐歌词来自雨季工作室】

本帖最后由 亚伦影音工作室 于 2026-7-19 10:30 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin: 10px -300px ; width: 1186px;z-index:12345; height: 620px;background:url(https://pic1.imgdb.cn/item/6a26a6bb3c9809430d363e5f.png)no-repeat center/cover; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; z-index: 10000; display: grid; place-items: center; overflow:hidden;border-radius: 0px 0px;--state: paused; }
#dh{ width: 100%; height: 100%; position: absolute;
z-index: -1;-webkit-mask-image: radial-gradient(farthest-corner at 5% -35%, black 55%, transparent 70%);
top:0px; left:-200px;animation: rod 20s linear infinite var(--state);}
@keyframes rod{0% {opacity: 0;}
50% {opacity:1 ;}
100% {opacity: 0;}
}
#source{width: 100% ;}
main {
position: relative;
overflow: hidden;
width: 100%;
min-height: 100%;
perspective: 340px;
}


/* star field */
#stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;border-radius: 50%;
box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fff,
    145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
    212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
    308px 126px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
    671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
    1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
    311px -475px #fff, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
    -790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
    -1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
    -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
    -1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
    36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
    1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
    624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
    410px 455px #ebebeb, 497px -129px #cccccc, 416px -370px whitesmoke,
    977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
    -1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
    -437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
    -925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
    993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
    -170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
    -1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
    1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
    1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
    1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
    -997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
    -468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
    823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
    94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
    1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
    1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
    205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
    649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
    -1405px 397px #cfcfcf, 30px -81px #e6e6e6;
animation: fly 3s linear infinite var(--state);
transform-style: preserve-3d;
}
#stars:before,
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 3s linear infinite var(--state);
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 3s linear infinite var(--state);
}
@keyframes fly {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.5;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0;
}
to {
    opacity: 0.5;
}
}

#lrcWrap {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0px;
      top: 420px;
      text-align: center;
      font-weight:100;font-size:3.5em;
font-family:"ZCOOL QingKe HuangYou";
      letter-spacing: 8px;
      white-space: nowrap;animation: cover 6s infiniteforwards var(--state);
         }
#lrcWrap span{opacity:1;text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000;}


@keyframes cover{0% {
          opacity: 1; transform: scale(0);
          
        }
        50% {
          opacity: 1;
          transform: scale(1);
        }
        70% {
          opacity: 1;
          transform: scale(1);
        }
       
        100% {
          opacity: 1; transform: scale(1);
          
        }
       
}


#player {position:absolute;border-radius: 0%;
   text-align: center;
       width: 500px;bottom: 20px;
            margin: 0 auto;
      }
      #controls {   
            margin-top: 90px;
      }
       #bnt{left: -40px; position:absolute; bottom: 0px;top:80px;border: 0px solid #ff3300; width:40px;overflow: hidden;cursor: pointer; }

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px}

.progress {display: flex;align-items: center;
      justify-content: space-between;width: 500px;
      position: relative;bottom: 0px;
   left: 0px;height:30px;border-radius: 0px;
    }

    .progress-bar {bottom: 0px;
      position:relative;
      width: 100%;
      height: 3px;
      background-color: #ccc;
   left: 0px;border-radius: 20px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 3px;border-radius: 20px;
      width: 94%;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 8px;margin: -2px -2px;
      height: 8px;border-radius: 50px;
      background-color: #ff0000;
    }
.start{color: #ccc; font: 400 12px sans-serif; margin: 0 10px;}
.end{color: #ccc; font: 400 12px sans-serif;margin: 0 10px;}

#btnMute{filter:invert(0%);
   position:relative;
      width: 20px;   
      height: 20px;
      z-index: 1;
   right: 0px;
      cursor: pointer;
    }


#volwrap { position:relative; width: 40px; height: 30px;place-items: center;border-radius: 20px;transform:rotate(-90deg);right: 20px;bottom: 20px;}
            input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
input::-webkit-slider-runnable-track {
    height: 2px;border-radius: 20px;
    background: #ccc;
}
input::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 4 10 4 0 / 0px 0px 0 2000px;
}
#volwrap:hover #volume { opacity:1;}
      #btnMute:hover ~ #volwrap > #volume {opacity:1; }
#volume { position: absolute; width: 70px; height: 4px;opacity:0;}
#loopbnt{
      position:relative;
      width: 18px;filter:invert(100%);
      height: 14px;background:#0000;
      bottom: 23px;border-radius: 0px;
   left: 47%;
      cursor: pointer;
    }

</style>
<div id="papa">
<audio id="audio" src="http://music.163.com/song/media/outer/url?id=3382240629" autoplay loop></audio>
<divid="lrcWrap"></div>
<div id="dh"><img   id="source" src="https://pic1.imgdb.cn/item/6a224c386cb4776548547bc8.gif"></div>

<main>
<div id="stars"></div>
</main>
   <div id="player">
<div id="controls">
            <div id="bnt">
<div id="pic"></div>
<div id="picc"></div>
</div>

</div>

<div class="progress">
      <span class="end">00:00</span>

      <div class="progress-bar">
      <div class="now"></div>
      </div>
   <span class="start">00:00</span>

<img id="btnMute" onClick="pc()"src="https://pic1.imgdb.cn/item/6a1bfcba6aa5b6be4f5c83ac.png" title="静音" alt="" />
      <div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
</div>
<span>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
</span>
</div>
</div>
<script>
const audio = document.getElementById('audio');
const xmhy = `望你\n作词：吴国清\n作曲：夏富东\n演唱：王思雨\n编曲：张可\n吉他：吴余涛\n小提琴：丁铌\nLRC歌词编辑：明月工作室\n我多想亲吻那天上的星辰\n因为那就是你灵动的眼睛\n就算今生不能与你相爱\n你仍是我眼中最美的风景\n望啊望天上的星辰\n闪啊闪是你的眼睛\n梦中有你给我一片柔情\n我要打马走进你的心门\n★★今夜星辰是你最好的陪伴★★\n我多想拥抱那风中的彩云\n因为那就是你飘逸的身影\n就算今生不能与你同行\n我也要成为守护你的绿荫\n望啊望风中的彩云\n飘啊飘是你的身影\n在心上刻下你那深深的烙印\n我要驰骋天涯把你追寻\n望啊望风中的彩云\n飘啊飘是你的身影\n在心上刻下你那深深的烙印\n我要驰骋天涯把你追寻\n我要驰骋天涯把你追寻\n把你追寻\n-- 谢谢欣赏 --`;

function parseLrc(lrcText) {
    const list = [];
    const lines = lrcText.split('\n');
    const reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.+)/;
    lines.forEach(line => {
      const m = line.match(reg);
      if (!m) return;
      let min = +m, sec = +m, msStr = m, txt = m.trim();
      let ms = +msStr;
      if (msStr.length === 2) ms *= 10;
      let time = min * 60 + sec + ms / 1000;
      if(!txt || /Music|End|编辑/.test(txt)) return;
      list.push({time, text: txt});
    });
    return list;
}

function randomColor(){
    const colors = ['#ff4444','#ffbb33','#00C851','#0099cc','#aa66cc','#ff8800','#ff33cc'];
    return colors;
}

const lrcList = parseLrc(xmhy);
let timerList = [];
let currLineIdx = -1;

function renderLine(text){
    lrcWrap.innerHTML = '';
    [...text].forEach(char => {
      const span = document.createElement('span');
       span.textContent = char;
      span.style.color = randomColor();
      lrcWrap.appendChild(span);
    });
}

function clearAllTimer(){
    timerList.forEach(t => clearTimeout(t));
    timerList = [];
}

function buildTimeAxis(){
    clearAllTimer();
    const now = audio.currentTime;

    for(let i=0; i<lrcList.length; i++){
      const curr = lrcList;
      const next = lrcList || {time: audio.duration};
      const lineDur = next.time - curr.time;
      const chars = [...curr.text];

      if(next.time < now) continue;

      if(curr.time <= now && next.time > now){
            renderLine(curr.text);
            currLineIdx = i;
            const progress = Math.max(0, Math.min(1, (now - curr.time)/lineDur));
            const activeCnt = Math.floor(progress * chars.length);
            const spans = lrcWrap.querySelectorAll('span');
            spans.forEach((s,idx)=>{
                if(idx <= activeCnt) s.classList.add('active');
            });
      }

      const lineDelay = (curr.time - now) * 1000;
      if(lineDelay >= 0){
            timerList.push(setTimeout(()=>{
                renderLine(curr.text);
                currLineIdx = i;
            }, lineDelay));
      }

      chars.forEach((char, idx)=>{
            const charTime = curr.time + (idx / chars.length) * lineDur;
            const charDelay = (charTime - now) * 1000;
            if(charDelay >= 0){
                timerList.push(setTimeout(()=>{
                  const spans = lrcWrap.querySelectorAll('span');
                  if(spans) spans.classList.add('active');
                }, charDelay));
            }
      });
    }
}
audio.addEventListener('pause', () => {
    clearAllTimer();
    document.body.classList.add('animation-paused');
});
audio.addEventListener('play', () => {
    buildTimeAxis();
    document.body.classList.remove('animation-paused');
});
audio.addEventListener('seeked', buildTimeAxis);
audio.addEventListener('timeupdate', ()=>{
if(Math.abs(audio.currentTime - (lrcList?.time||0)) > 0.3){
      buildTimeAxis();
    }
});
</script>
<script>

const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')

function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

audio.onloadedmetadata = function () {
    end.innerHTML = conversion(audio.duration)
    start.innerHTML = conversion(audio.currentTime)
}

progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + '%'

    audio.currentTime = p * audio.duration
    audio.play()
})

setInterval(() => {
    start.innerHTML = conversion(audio.currentTime)
    now.style.width = audio.currentTime / audio.duration.toFixed(3) * 100 + '%'
}, 1000)


var volume = document.getElementById('volume');
volume.addEventListener('input', function() {
    audio.volume =volume.value;
});

function pc() {
var img = document.getElementById("btnMute");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/6a1bfcba6aa5b6be4f5c83ac.png") {audio.muted= true;
img.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png"; volume.value=0;
} else {audio.muted= false;volume.value=0.8;
img.src = "https://pic1.imgdb.cn/item/6a1bfcba6aa5b6be4f5c83ac.png";}
}

function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {audio.loop =true;audio.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {audio.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}

bnt.onclick = () => audio.paused ? (audio.play(),picc.style.opacity= '0',pic.style.opacity = '1') : (audio.pause(),picc.style.opacity = '1',pic.style.opacity = '0');

(function() {letmState = () => papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
audio.addEventListener('playing',mState,false);
audio.addEventListener('pause',mState,false);
})();
</script>

<script>
const renderGif = function (dom) {
    if (!dom || !dom.src) {
      return;
    }
    // gif图片的url地址
    const src = dom.src;

    // 创建的用来播放gif的canvas元素
    const canvas = document.createElement('canvas');
    const context = canvas.getContext("2d");

    // 一些与GIF播放有关的变量
    let imageDecoder = null;
    let imageIndex = 0;
    let paused = false;

    // 绘制方法
    const renderImage = function (result) {
      context.drawImage(result.image, 0, 0);

      const track = imageDecoder.tracks.selectedTrack;

      // 如果播放结束，从头开始循环
      if (imageDecoder.complete) {
            if (track.frameCount === 1) {
                return;
            }

            if (imageIndex + 1 >= track.frameCount) {
                imageIndex = 0;
            }
      }

      // 绘制下一帧内容
      imageDecoder
            .decode({ frameIndex: ++imageIndex })
            .then((nextResult) => {
                if (paused === false) {
                  setTimeout(() => {
                        renderImage(nextResult);
                  }, result.image.duration / 1200.0);
                } else {
                  canvas.nextResult = nextResult;
                }
            })
            .catch((e) => {
            // imageIndex可能超出的容错处理
            if (e instanceof RangeError) {
                imageIndex = 0;
                imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
            } else {
                throw e;
            }
      });
    };

    // 判断地址能够请求
    fetch(src).then((response) => {
      // 可以请求，进行样式处理
      // 设置canvas尺寸
      canvas.width = dom.naturalWidth;
      canvas.height = dom.naturalHeight;
      // 实际显示尺寸
      canvas.style.width = dom.clientWidth + 'px';
      canvas.style.height = dom.clientHeight + 'px';
      // 隐藏图片，显示画布
      dom.after(canvas);
      dom.style.position = 'absolute';
      dom.style.opacity = '0';

      // 将GIF绘制在canvas上
      imageDecoder = new ImageDecoder({
            data: response.body,
            type: "image/gif"
      });
      // 解析第一帧并绘制
      imageDecoder.decode({
            frameIndex: imageIndex
      }).then(renderImage);
    });

    // 事件绑定处理
dom.addEventListener('ended',function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {aud.pause();
            paused = true;
      }
    });
canvas.addEventListener('ended',function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {
            paused = true;
      }
    });
bnt.addEventListener('click', function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {
          paused = true;
      }
    });
};
   renderGif(source);
</script>

红影 发表于 2026-6-8 20:19

这个彩色的同步歌词做得漂亮。
欣赏亚伦老师精美制作{:4_199:}

红影 发表于 2026-6-8 20:20

这个动图还是能暂停到任意帧的，很赞{:4_187:}

杨帆 发表于 2026-6-8 21:44

效果惊艳。欣赏学习，谢谢亚伦老师精彩制作{:4_190:}
页: [1]
查看完整版本: 望你【音乐歌词来自雨季工作室】