论坛 › 音乐沙龙 › 《千年老妖》崔伟立

亦是金 发表于 2025-10-17 19:00

《千年老妖》崔伟立

本帖最后由 亦是金 于 2025-12-6 17:32 编辑 <br /><br /><div style="position: absolute; margin-left: -350px;margin-top: 50px;width:100%;">
<style>
#bj{
        position: relative;
        width: 1286px;
        height: 720px;
        MARGIN-LEFT:0px;
        margin-top:0px;;
        overflow:hidden;
        background:#337700 url()no-repeat center /         cover;
        border-radius: 22px;
        border: thick double#88abfa;
        --state:paused;
}

#vid{
        width: 100%;
        height: 100%;
        position:absolute;
        top:0%;
        left:0%;
        object-fit: cover;
        pointer-events: none;
}

#vid1{
        width: 100%;
        height: 100%;
        position:absolute;
        top:0%;
        left:0%;
       
        pointer-events: none;
mix-blend-mode: screen;
}

         /*频谱*/
#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%); }
}





#tu{
        position: absolute;
        top: 5%;
        left: 30%;
        width: 80%;
        opacity:0;
        animation: round 56s linear infinite var(--state);
        height: 100%;
}

#tu img{
        width: 75%;
        -webkit-mask-image: radial-gradient(black 35% ,transparent 75%);
}

@keyframes round{
0%{-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);opacity:0}
5% {-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);opacity:1}
10% {-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);opacity:1}
15% {-webkit-transform:rotate(0deg)scale(2)translate(-50%,50%);opacity:0}
}

#tu:nth-child(7) {animation-delay: 48s;}
#tu:nth-child(6) {animation-delay: 40s;}
#tu:nth-child(5) {animation-delay: 32s;}
#tu:nth-child(4) {animation-delay: 24s;}
#tu:nth-child(3) {animation-delay: 16s;}
#tu:nth-child(2) {animation-delay: 8s;}
#tu:nth-child(1) {animation-delay: 0s;}

#geci{
        --motion:cover2;
        --tt:2s;
       
        --bg: linear-gradient(40deg, #fa4354, #fa4354, #7718f8, #18f5f8, #f5f818, #f87718) 50%/200px60px;
        position:absolute;
        left: 50%;
        transform: translate(-50%);
        top: 75%;
        font:300 3.2em 华文隶书;
        color:#055306;/*#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;
       
        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;
       

}
@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: 97%;
        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: 600px;
        height: 2px;
        accent-color: darkgreen;
        outline: none;
        cursor: pointer;
}

#btnplay {
        position: relative;
        width: 80px;
        height: 80px;
        cursor: pointer;
        animation: rotating 6s infinite linear var(--state);
        margin: -90px 0px;
        border-radius: 50px;
        box-shadow:;
}
@keyframes rotating { to { transform: rotate(360deg); } }

#zs{
        border-radius: 4px;
        position: relative;
        color:#fff;
        background:#0000;
        box-shadow:0px 0px 0px 1px #fff;
        padding: 4px 8px;
        font-size: 18px;
        border: none;
        cursor: pointer;
        margin: 8px 5px;
        left: 90%;
}

</style>

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

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

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

.lrc #ul li {
        font:300 1.2em 华文新魏;
        color: #a6f9f2;
        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 2.6em 华文新魏;
        color: #fff000;
        text-align: center;
        filter:drop-shadow(#000 1px 1px 0px);
}
</style>


<div id="bj">
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/14/23/V-142392-B364F8D6.mp4" loop muted autoplay=""></video>

<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/12/68/V-126813-9655CF1F.mp4" loop muted autoplay=""></video>

<div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022892_1528581994260.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022860_1528581996906.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022870_1528581999863.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022912_1528582002467.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022922_1528582007233.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022904_1528582012250.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022932_1528582014346.jpg" alt=""></div>

</div>







<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://www.emojiall.com/images/60/skype/1f496.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>



<canvas id='canv' width="1286" height="250"></canvas>



      <audio id="audio" src="https://s2.cldisk.com/sv-w9/audio/51/c1/40/ab5f608b2dfdcdcef4e838fb2ed4b09d/audio.mp3?at_=1760696534755&ak_=d360d9094742e6460b7533521e9eac0d&ad_=1b5326744a8ef443ea334113d507123d" loop autoplay crossOrigin="anonymous"></audio>
   <div id="geci"></div>
<div id="dhgc"><div class="lrc" >

<ul id="ul"></ul>
      
    </div>
</div>


<buttonid="zs" onclick="btnClick()"title="点击全屏" >全屏观赏</button>
<div id="全屏"></div><div id="退出" ></div>
</div>


<div style="position: relative;width: 500px;height: 50px;top:-710px;LEFT: 50px;z-index: 88;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#f638ef;"><span style="font-family:微软简中圆;"><span style="font-size:32px;">《 千 年 老 妖 》</span></span></span></p></div>

<div style="position: relative;width: 500px;height: 50px;top:-745px;LEFT: 320px;z-index: 99;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#386df6;"><span style="font-family:微软简中圆;"><span style="font-size:20px;"> 演唱 : 崔伟立</span></span></span></p></div>

<div style="position: relative;width: 500px;height: 50px;top:-160px;LEFT: 1070px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>


<script>
let lrc = `《千年老妖》崔伟立
词曲：刘海东
编曲：孙培喜
演唱：崔伟立
歌词编辑：亦是金
。。。。。。
没办法一笔勾销
却还要装作清高
有时候越是想要
就越是得不到
说多了便是无聊
没有意义的讨好
是你的虚晃一枪
竟然让我中了招
你开什么玩笑
我是修行了千年的老妖
炼了一副相思的解药
是否可以把你忘掉
你开什么玩笑
你还欠我一个白头偕老
我要让天下人知道
没有什么比你更重要
。。。。。。
没办法一笔勾销
却还要装作清高
有时候越是想要
就越是得不到
说多了便是无聊
没有意义的讨好
是你的虚晃一枪
竟然让我中了招
你开什么玩笑
我是修行了千年的老妖
炼了一副相思的解药
是否可以把你忘掉
你开什么玩笑
你还欠我一个白头偕老
我要让天下人知道
没有什么比你更重要
你开什么玩笑
我是修行了千年的老妖
炼了一副相思的解药
是否可以把你忘掉
你开什么玩笑
你还欠我一个白头偕老
我要让天下人知道
没有什么比你更重要
我要让天下人知道
没有什么比你更重要

-- 谢谢欣赏 --

`;
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 ?
( bj.style.setProperty('--state', 'paused'),btnplay.title = '点击播放' ) :
( 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("#geci")
}
// 将歌词数组转成由对象组成的数组，对象有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);



audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());

cp.onclick =cz.onclick = () => audio.paused ? (audio.play(),vid.play(),vid1.play(),cz.classList.remove('purple')) : (audio.pause(),vid.pause(),vid1.pause(),cz.classList.add('purple'));

</script>


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


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>

<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>

</td></tr></table>
<div style="height:700px;">

红影 发表于 2025-10-17 20:55

这频谱真漂亮，背景及图片轮播也好看，这个制作真好。
欣赏亦是金老师好帖{:4_199:}

红影 发表于 2025-10-17 20:59

这个好像论坛的框有点变形了，可能是代码里的问题吧。

红影 发表于 2025-10-17 21:00

这歌曲有趣，记得以前有个坛友的名字就是千年老妖{:4_173:}

小辣椒 发表于 2025-10-17 21:11

问好前辈，好久不见了，欣赏精彩的制作{:4_199:}

小辣椒 发表于 2025-10-17 21:14

结束代码和以前一样，我以前也是有修改过，论坛还是变形，我不敢给你修改了{:4_173:}

小辣椒 发表于 2025-10-17 21:17

代码运用的很好，加了自己的设想，加了自己的东西，向前辈学习{:4_187:}

杨帆 发表于 2025-10-17 22:10

问好亦是金老师，谢谢精彩分享{:4_191:}

亦是金 发表于 2025-10-18 09:56

红影 发表于 2025-10-17 20:55
这频谱真漂亮，背景及图片轮播也好看，这个制作真好。
欣赏亦是金老师好帖

问好红影管理！谢谢欣赏点评！{:4_187:}

亦是金 发表于 2025-10-18 09:59

小辣椒 发表于 2025-10-17 21:11
问好前辈，好久不见了，欣赏精彩的制作

问好小辣椒！谢谢加精！{:4_187:}

亦是金 发表于 2025-10-18 10:01

小辣椒 发表于 2025-10-17 21:14
结束代码和以前一样，我以前也是有修改过，论坛还是变形，我不敢给你修改了

谢谢修改！{:4_204:}

亦是金 发表于 2025-10-18 10:03

小辣椒 发表于 2025-10-17 21:17
代码运用的很好，加了自己的设想，加了自己的东西，向前辈学习

祝欣赏愉快！祝你身体健康！{:4_187:}

亦是金 发表于 2025-10-18 10:04

杨帆 发表于 2025-10-17 22:10
问好亦是金老师，谢谢精彩分享

谢谢欣赏点赞！{:4_190:}

红影 发表于 2025-10-18 10:17

亦是金 发表于 2025-10-18 09:56
问好红影管理！谢谢欣赏点评！

问好亦是金，周日快乐{:4_187:}

小辣椒 发表于 2025-10-18 14:07

亦是金 发表于 2025-10-18 09:59
问好小辣椒！谢谢加精！

前辈客气了，有自己添加的元素，有自己的设想，就是创新的一种制作，小辣椒现在许多不会，脑子生锈了，只能慢慢玩了

亦是金 发表于 2025-10-18 20:24

小辣椒 发表于 2025-10-18 14:07
前辈客气了，有自己添加的元素，有自己的设想，就是创新的一种制作，小辣椒现在许多不会，脑子生锈了，只 ...

谢谢夸奖，祝你周日愉快！{:4_187:}

亦是金 发表于 2025-10-18 20:24

红影 发表于 2025-10-18 10:17
问好亦是金，周日快乐

周日快乐！{:4_187:}

红影 发表于 2025-10-18 20:45

亦是金 发表于 2025-10-18 20:24
周日快乐！

大家一起快乐{:4_187:}

查看完整版本: 《千年老妖》崔伟立