亚伦影音工作室 发表于 2025-4-17 10:12

人间疾苦 马健涛

本帖最后由 亚伦影音工作室 于 2025-8-11 21:01 编辑 <br /><br />    <style>
      #bj {
            position: relative;
            width: 1286px;
            height: 720px;
            margin: 140px -300px;
            overflow: hidden;
            background:radial-gradient(ellipse 100% 100% at 50% 50%, rgba(18, 0, 0, 0) 24%,rgba(0, 7, 250, 0.5) 90%), url(https://pic1.imgdb.cn/item/6862641f58cb8da5c87f852b.jpg) no-repeat center / cover;
      }

.lrc {
            position: absolute;
            top: 20%;
            left: 18%;
            transform: translateX(-50%);
            width: 540px;
            height: 350px;
            overflow: hidden;
      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
         font: 500 20px 'FZYaoti', sans-serif;
            color: #ccc;
            font-weight: 400;
            transition: .3s all ease;
            list-style-type: none;
               text-align: center;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
      }

      .lrc #ul li.active {
            font-size: 25px;
            color: #ff0000;
            text-align: center;
      }
#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 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;}
#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;}
#pa{margin: 520px 5%;position:absolute;width: 200px; height: 150px; overflow: hidden;transform:rotate(0deg)scale(0.6);z-index: 60;}
#bnt{ left:85px;top: 40%;z-index: 6;
position: absolute; cursor: pointer;}
#cndpt{position: absolute; width: 100%; height: 100%;display:block;
align-items: center; }
#enopg{ position: absolute;width: 100%; height: 100%; display:none;
align-items: center; }
.start{color: #fff;position: absolute; top:68px; left: 42px;}
.end{color: #fff;position: absolute;top:68px; right: 42px;}
#prog {position: absolute; display: grid; place-items: center; width: 140px; height: 140px; right: 32px; bottom: 5px;border-radius: 50%;-webkit-mask: radial-gradient( transparent 63%, #000 66%, #000 0);cursor: pointer; z-index: 5;}
#canv {display: block; position: absolute;width:100%;bottom: 0px; left: 0px;z-index:4; animation: sp 1s linear infinite;}
@keyframes sp {
      0% { filter:hue-rotate(360deg)contrast(150%)brightness(80%); }
}
.klokgcbtn, .dhgcbtn,#pabtn{border-radius: 4px;position: relative;
color:#fff;background:#000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 70%;
}
    </style>

    <div id="bj">
<button class="klokgcbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
    <button class="dhgcbtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="pabtn" onclick="btn3()"title="播放器模式">bfq隐藏</button>
<div id="dhgc"><div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>
       <div id="geci"></div>
      <div id="pa">
<span class="end">00:00</span><div id="bnt">
<div id="cndpt" > <svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" />
    </svg></div>
<div id="enopg"><svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M18 12L0 24V0" />
    </svg></div>
</div>
<span class="start">00:00</span>
<div id="prog" title="播放进度条"></div>
</div>
<canvas id='canv' width="1286" height="250"></canvas>
    </div>
    <audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w7/audio/48/b7/73/8fab66981800475f5df16d8ed6da2dcf/audio.mp3" loop autoplay crossOrigin="anonymous"></audio>
    <script>
      let lrc = `人间疾苦
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：亚伦影音工作室
我尝尽了人间的折磨
我受够了不停的奔波
我迷茫在他乡的角落
败给了这世界的浑浊
流浪在地球的角落
除了露宿就是漂泊
微风它轻轻的吹过
大雨作伴我的寂寞
错怪了爱我的人啊
我没资格让你留下
柴米油盐酸甜苦辣
也许我该认了命吧
我落魄的不能再落魄
我失落的不能再失落
我的伤口愈合了又破
我受够了憋屈的生活
我尝尽了人间的折磨
我受够了不停的奔波
我迷茫在他乡的角落
败给了这世界的浑浊
错怪了爱我的人啊
我没资格让你留下
柴米油盐酸甜苦辣
也许我该认了命吧
我落魄的不能再落魄
我失落的不能再失落
我的伤口愈合了又破
我受够了憋屈的生活
我尝尽了人间的折磨
我受够了不停的奔波
我迷茫在他乡的角落
败给了这世界的浑浊
我落魄的不能再落魄
我失落的不能再失落
我的伤口愈合了又破
我受够了憋屈的生活
我尝尽了人间的折磨
我受够了不停的奔波
我迷茫在他乡的角落
败给了这世界的浑浊

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
            

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1263fc=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            ul.children?.classList.add('active');

            const currentLyric = result.word.trim();
            if (!currentLyric) return;
            const nextTime = result?.time || audio.duration;
            const duration = nextTime - result.time;
            const charIndex = duration > 0 ?
                Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
                currentLyric.length;
}

      let rafId;
      audio.addEventListener("timeupdate", () => {
            rafId = requestAnimationFrame(setOffset);
      });
</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>
<script >
bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.display= 'none',cndpt.style.display= 'block') : (audio.pause(),enopg.style.display= 'block',cndpt.style.display='none');
var marquee= document.getElementById('marquee');
const start = document.querySelector('.start')
   const end= document.querySelector('.end')
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)
}
setInterval(() => {
    start.innerHTML = conversion(audio.currentTime)
   
}, 1000)

prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                audio.currentTime = audio.duration * deg / 360;
                }
audio.addEventListener('timeupdate', () => {
               audio.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg, red, red, red ' + audio.currentTime / audio.duration * 100 + '%, #fff 0)';});
                });

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("pa");

                        if(document.getElementById("pabtn").innerHTML=="bfq隐藏"){
                                pa.className="hide";
                                document.getElementById("pabtn").innerHTML="显示bfq";
                        }else{
                                pa.className="";
                                document.getElementById("pabtn").innerHTML="bfq隐藏";
                        }
                }

</script >

<script>
(function () {

        let Act = new AudioContext();

        let audSrc = Act.createMediaElementSource(audio);

        let analyser = Act.createAnalyser();

        audSrc.connect(analyser);

        analyser.connect(Act.destination);

        let ctx = canv.getContext('2d');

        let width = canv.width;

        let height = canv.height;

        let ppColor = ctx.createLinearGradient(250,200,250,0);

        ppColor.addColorStop(0.8, '#fff000');

        ppColor.addColorStop(1, '#00ff00');

        ppColor.addColorStop(0.8, '#fff000');

        let ppNum = 1286;

        let voiceHeight = new Uint8Array(analyser.frequencyBinCount);



        (function draw() {

                analyser.getByteFrequencyData(voiceHeight);

                let step = Math.round(voiceHeight.length / ppNum);

                ctx.clearRect(0, 0, width, height);

                for (let j = 0; j < ppNum; j++) {

                        let audiheighteight = voiceHeight;

                        ctx.fillStyle = ppColor;

                        ctx.fillRect(width / 1+ (j * 3), height, 1, -audiheighteight);

                        ctx.fillRect(width / 1- (j * 3), height, 1, -audiheighteight);

                }

                window.requestAnimationFrame(draw);

        })();
})();
</script>

樵歌 发表于 2025-4-17 14:22

精致的帖子！

红影 发表于 2025-4-17 19:30

漂亮的频谱效果。还有歌词的不同效果切换等互动效果。
这个真漂亮。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2025-4-17 23:16

亚纶这个加了频谱效果，漂亮！{:4_199:}
页: [1]
查看完整版本: 人间疾苦 马健涛