论坛 › 音乐沙龙 › 《与你走过的老路》咚可可

亦是金 发表于 2025-12-2 14:20

《与你走过的老路》咚可可

本帖最后由 亦是金 于 2025-12-5 13:09 编辑 <br /><br /><div style="position: absolute; margin-left: -360px;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: 20%;
        left: 35%;
        width: 85%;
        opacity:0;
        animation: round 64s linear infinite var(--state);
        height: 100%;
}

#tu img{
        width: 85%;
        -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(8) {animation-delay: 56s;}
#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: 80%;
        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: 150px;
        height: 150px;
        left: -450px;
        bottom: 45px;
        cursor: pointer;
        animation: rotating 6s infinite linear var(--state);
        margin: -90px 0px;
        border-radius: 50px;
        box-shadow:;
}
@keyframes rotating {
        0% { transform: rotate(-20deg); }
        25% { transform: rotate(0deg); }
        50% { transform: rotate(20deg); }
        75% { transform: rotate(0deg); }
        100% { transform: rotate(-20deg); }
}

#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/65/31/V-653196-AABB26B1.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="http://img1.oldkids.cn/upload/2022/08/11/photo_0_20220811092144502.jpg" alt=""></div>
<div id="tu"><imgsrc="http://img4.oldkids.cn/upload/2022/08/11/photo_0_20220811092144729.jpg" alt=""></div>
<div id="tu"><imgsrc="http://img2.oldkids.cn/upload/2022/08/11/photo_0_20220811092144726.jpg" alt=""></div>
<div id="tu"><imgsrc="http://img3.oldkids.cn/upload/2022/08/11/photo_0_20220811092143195.jpg" alt=""></div>
<div id="tu"><imgsrc="http://img3.oldkids.cn/upload/2022/08/11/photo_0_20220811092143425.jpg" alt=""></div>
<div id="tu"><imgsrc="http://img4.oldkids.cn/upload/2022/08/11/photo_0_20220811092143222.jpg" alt=""></div>
<div id="tu"><imgsrc="http://img4.oldkids.cn/upload/2022/08/11/photo_0_20220811092143095.jpg" alt=""></div>
<div id="tu"><imgsrc="http://img1.oldkids.cn/upload/2022/08/11/photo_0_20220811092142122.jpg" alt=""></div>

</div>







<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://pic.imgdb.cn/item/652e017cc458853aef6f610b.gif" 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-w8/audio/64/06/55/1173813b72075fc166c110ce893bdfe3/audio.mp3?at_=1763954343953&ak_=90b907dbe4da5e800a67539d8d826e6b&ad_=da1de2860bca747908c79174190e4c38" 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: 360px;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:28px;">亦是金在线音乐</span></span></span></p></div>


<script>
let lrc = `《与你走过的老路》咚可可
词曲：Yie
编曲：包晓牧
演唱：咚可可
歌词编辑：亦是金
。。。。。。
风吹过了屋前的那片田野
白云悄悄跟着我走很远
青石小路弯弯绕过童年
每个笑声都藏在夏日的麦田
外面的世界
灯火太璀璨
越热闹越容易觉得孤单
想起你牵着我的那只手
带我看最简单的天空多暖
我想回到那条老路上慢慢走
再听一听树叶轻轻低声诉说
当我不再迷惘
心会知道哪儿
才是我真正的停靠
我想回到你在门前
等我的时侯
那微笑像春天把寒冷都带走
。。。。。。
哪怕世界再变
你依然是我永远回得去的温柔

-- 谢谢欣赏 --

`;
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:800px;">

红影 发表于 2025-12-2 20:12

好看，这个弹着琴的小人小播和频谱都很美，背景的油菜花和轮播图也都很美。
欣赏亦是金老师好帖{:4_199:}

红影 发表于 2025-12-2 20:15

这个好像没法评分呢{:4_204:}

亦是金 发表于 2025-12-2 20:30

红影 发表于 2025-12-2 20:12
好看，这个弹着琴的小人小播和频谱都很美，背景的油菜花和轮播图也都很美。
欣赏亦是金老师好帖

晚上好！谢谢欣赏点评！{:4_187:}

亦是金 发表于 2025-12-2 20:40

红影 发表于 2025-12-2 20:15
这个好像没法评分呢

这个帖子是套用《要山要海要自由》代码（https://huachaowang.com/forum.php?mod=viewthread&tid=83421），不知道为什么没法评分？{:4_170:}

红影 发表于 2025-12-2 23:43

亦是金 发表于 2025-12-2 20:30
晚上好！谢谢欣赏点评！

不客气啊，问好亦是金老师{:4_187:}

红影 发表于 2025-12-2 23:43

亦是金 发表于 2025-12-2 20:40
这个帖子是套用《要山要海要自由》代码（https://huachaowang.com/forum.php?mod=viewthread&tid=83421） ...

我也不知道，点评分点不动呢{:4_173:}

偶然~ 发表于 2025-12-3 15:29

音画太棒了！

偶然~ 发表于 2025-12-3 15:30

视频唯美

偶然~ 发表于 2025-12-3 15:30

背景歌声动听

偶然~ 发表于 2025-12-3 15:30

制作大气

偶然~ 发表于 2025-12-3 15:30

音画合一，音乐与画面结合完美

偶然~ 发表于 2025-12-3 15:30

玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~ 发表于 2025-12-3 15:30

感谢亦是金带来的精彩，辛苦了！祝你开心幸福、阖家安康！

杨帆 发表于 2025-12-3 16:22

本帖最后由 杨帆 于 2025-12-3 17:31 编辑

我这儿可以评分呀，进度条也挺灵敏呢，欣赏、学习亦是金老师美帖{:4_191:}

查看完整版本: 《与你走过的老路》咚可可