醉美水芙蓉 发表于 2026-5-23 22:34:47

相思满城

<meta charset="utf-8">
<style type="text/css">
#papa{left:-12%; top: 10%; width:1186px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; position: relative;background: #000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9ac99531761554b1cc74dac9a2a36615_preview.webp) no-repeat center/cover;}
#tu{position: absolute;top:0%; left:0%;
      width: 100%;background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9ac99531761554b1cc74dac9a2a36615_preview.webp) no-repeat center/cover;
      height: 100%;animation: round 6s linear infinite; height: 100%;}

@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(0deg);
opacity:1}

100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}

#bnt{left: 0px;bottom: 6px;position:absolute; z-index: 140;border: 0px solid #ff3300; width:50px;   height: 50px;border-radius: 0%;cursor: pointer;}
#pic{position:absolute;top:25px; left:28px;background:#eee;
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:#eee; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom:14px; cursor: pointer;right:1%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
#sjd {left: 4%;z-index: 8;width: 70%; height: 25px; transform:scale(1);bottom: 12px; position: absolute; align-items: center;}
#percentage{margin:0px 35px;position: relative;border-radius: 20px;width: 85%; height: 5px;border-radius: 20px;}
#duration{margin: 0px 0px;color: #eee;font: 400 14px sans-serif;position: absolute;}
#currentTime{margin: 0px -20px;color: #eee;font: 400 14px sans-serif;position: absolute;}
#yink {left: 70%;bottom: 4px;width: 40%;height: 50px;z-index: 8; transform:scale(.8);
             position: absolute;overflow: hidden; align-items: center; background:#0000; border-radius: 10px;}
#jingtai{opacity:0;position: absolute;bottom: 8px; left:10px;}
#volumeSlider{margin: 20px 42px;
             position: absolute;z-index: 40;
         width: 55%; height: 5px;border-radius: 20px;}
input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #aaa;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff0000;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#ff0000,#ff0000) 0 fill / 4 10 4 0 / 0px 0px 0 2000px;}
#loopbnt{   z-index: 91;
      position:absolute;
      width: 25px;
      height: 20px;background:#0000;
      bottom: 18px;border-radius: 0px;
   left: 71%;filter:invert(100%)hue-rotate(100deg);
      cursor: pointer;
    }
#swithimg{margin: 12px 10px;filter:invert(0%)hue-rotate(0deg);z-index: 41;
             position: absolute;}
#marquee{position: absolute;width:90%;
          top: 0%;z-index: 21;
            left: 5%;
            
            list-style-type: none;
            height: 100px;
            }
#lrc{left: 10%;top: 80%;}#lrcc {left: 90%;transform: translate(-102%);top: 87%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.8em 华文新魏;color: #222222;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);z-index: 15;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);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);}}
</style>
<div id="papa">
<div id="tu"></div>
<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="sjd">
    <span id="duration"></span> <input type="range" min="0" max6="100" step="0.01" value="0" onchange="seek(this.value)"id="percentage"><span id="currentTime"></span>
</div>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
<div id="yink">
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif" height="30" width="30" id="swithimg">
<img src="https://pic1.imgdb.cn/item/6a03d08fc05e72d917209191.png" height="30" width="30" id="jingtai">
<inputtype="range" min="0" max="1" step="0.1" value="0.9" id="volumeSlider">
</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<marquee id="marquee" direction="left" behavior="alternate"scrollamount="8"hspace=20 vspace=20loop="-80" onMouseOver="this.stop()"onMouseOut="this.start()"><font face="heiti" size="4" color="#eee">《相思满城》</font> </marquee>

</div>

<audio src="https://www.joy127.com/url/151333.mp3" id="aud"autoplay ></audio>

<script>
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
var aud= document.getElementById("aud");
   function muteAudio() {
            aud.muted= true;
      }
   function unmuteAudio() {
            aud.muted= false;
      }
   window.onload = function(){
      var swithimg = document.getElementById("swithimg");
      var mm = true;
      swithimg.onclick= function(){
            if (mm == true) { muteAudio();volumeSlider.value=0;
                swithimg.src="https://pic1.imgdb.cn/item/6a03d08fc05e72d917209191.png";
                return mm=false;
            }else{unmuteAudio(); volumeSlider.value=0.8;
                swithimg.src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";
                return mm=true;
            }   
      };      
    };
class AudioPlayer {
      constructor(audioElement) {
      this.audio = audioElement;
      }
   getTime() {
      const currentTime = this.audio.currentTime; // 当前时长
      const duration = this.audio.duration; // 总时长
      const percentage = duration ? (currentTime / duration) * 100 : 0;
      return {
          currentTime: currentTime,
          duration: duration,
          percentage: percentage
      };
      }
    }
let audio = document.getElementById('aud');
    let player = new AudioPlayer(audio);
// 回显播放时间
    function updateTime() {
      const time = player.getTime();
      document.getElementById('currentTime').innerHTML = formatTime(time.currentTime);
      document.getElementById('duration').innerHTML = formatTime(time.duration);
      document.querySelector('input').value = time.percentage;
    }
// 格式化播放时间
    function formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
// 步进器控制播放进度
    function seek(percentage) {
      const duration = player.getTime().duration;
      player.audio.currentTime = duration * (percentage / 100);
    }
   setInterval(updateTime, 1000);
// 按钮全控


   bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',swithimg.style.opacity= '1',jingtai.style.opacity = '0',marquee.start()) : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',swithimg.style.opacity= '0',jingtai.style.opacity = '1',marquee.stop());

mState = () => aud.paused ? ('paused') : ('running');
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
//全屏
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}

</script>


<span id="lrcStr" style="visibility: hidden;">
相思满城（悄悄地去了有你的城市）（对唱版）
演唱：寂寞阿图/阿图表妹
作词：廖伟志
作曲：廖伟志
原版编曲：阿水@谈柒柒工作室
监制：秦朗
发行：北京诗序文化
LRC编辑：醉美水芙蓉
我悄悄地去了有你的城市
只为了能解我潦草的相思
没有找你
没有联系
只是吹了吹你吹过的风
用一场流浪慰藉我破碎的梦
任零碎的晚风吹乱我头发
和没长出几簇绿叶的枝桠
不能再见
不盼偶遇
只是走了走你走过的路
那是我不能言说慌乱的痛
你的城市离我不远
可以想来就来
可是我们走了那么远
不能想见就见
此行没有其他的目的
只为一场相思
仰望星辰孤影的枯寂
冷暖自知
我悄悄地去了有你的城市
只为了能解我潦草的相思
没有找你
没有联系
只是吹了吹你吹过的风
用一场流浪慰藉我破碎的梦
你的城市离我不远
可以想来就来
可是我们走了那么远
不能想见就见
此行没有其他的目的
只为一场相思
仰望星辰孤影的枯寂
冷暖自知
此行无目的
只为解相思
曾与你同行
已成往事
晚风轻扬起
叶落一念起
望归春来迟
无绝期
此行无目的
只为解相思
曾与你同行
已成往事
晚风轻扬起
叶落一念起
望归春来迟
无绝期
谢谢欣赏！
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let 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)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      let calcRule = ;
      for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                              for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

klxf 发表于 2026-5-23 23:07:31

漂亮~谢谢友友精彩分享

醉美水芙蓉 发表于 2026-5-24 10:10:00

klxf 发表于 2026-5-23 23:07
漂亮~谢谢友友精彩分享

谢谢友友光临！
页: [1]
查看完整版本: 相思满城