论坛 › 动画音画 › 两个音频连续播放也可点击切换歌曲且计时[独家首作]

亚伦影音工作室 发表于 2026-4-10 10:13

两个音频连续播放也可点击切换歌曲且计时[独家首作]

本帖最后由 亚伦影音工作室 于 2026-4-13 16:40 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{position: relative;margin: 30px -300px;width:1186px;height: 700px;overflow: hidden;z-index: 10000;box-shadow: 3px 3px 6px gray;background: #000 ;font-family: "Ma Shan Zheng","SimHei", "Arial", "sans-serif";--state: running;}
#gradient {position:absolute;overflow: hidden;margin: 0px 0px;hidden;z-index: 2;
width: calc(100%/1);
height: calc(100%/1);
background:linear-gradient(-133deg,#e56420, #c22525, #3d9c31, #37bbde, #000080,#ff0000)no-repeat center/100% 100%;
mix-blend-mode:overlay;
animation: gradient-animation 3s ease infinite;
}
@keyframes gradient-animation {
50%{
   filter: hue-rotate(360deg);
}
}
#slider {z-index: 1;
position: absolute;
height: calc(100% * 10 );
left:0%;
object-fit: cover;overflow: hidden;
animation: 20s slidy infinite ;
}
#slider img{
      width:calc(100%/1);
height: calc(100%/10);
}
@keyframes slidy {
90% ,95%,100%{ top: 0%; }
80% ,85%{ top: -100%;}
70% ,75%{ top: -200%; }
60% ,65%{ top: -300%;}
50% ,55%{ top: -400%; }
40% ,45%{ top: -500%;}
30% ,35%{ top: -600%;}
20% ,25%{ top: -700%; }
10% ,15%{ top: -800%; }
0% ,5%{top: -900%;}
}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:linear-gradient(90deg, #000078 21%,#Ff0000 36%,#000000 57%,#2980b9 75%,#ff0000 84%);transform: translateX(-50%);text-align: center;position: absolute;font: 300 4em "Ma Shan Zheng","SimHei", "Arial", "sans-serif";color:#006400;white-space:pre;-webkit-background-clip:text;left: 50%; bottom: 60px; cursor:pointer;z-index:82;filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);}
#geci::before{position:absolute;content:attr(data-geci);width:20%;height:100%;color:transparent;overflow:hidden;white-space:pre;background:var(--bg);-webkit-background-clip:text;animation:var(--motion)var(--tt)linear forwards;animation-play-state:var(--state)}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
   #lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(90deg,#e56420, #c22525, #3d9c31, #37bbde, #000080,#ff0000) ; position: absolute;bottom: 60px; left: 50%; text-align: center;transform: translateX(-50%);font: 300 4em "Ma Shan Zheng","SimHei", "Arial", "sans-serif"; color:#000080; 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 -1px0); pointer-events: none; z-index: 100;}
      #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; border-bottom: 8px dotted #880000; overflow: hidden; white-space: pre; background: var(--bg);background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }

    #player{position:absolute;top: 12%;z-index: 99;
            left: 83%;
width: 200px;
height: 200px;
display: grid;
        place-items: center;animation: rot 8s linear infinite ;}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#fullscreen{border-radius: 4px;position: absolute;
color:#fff;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 28px;
border: none;
cursor: pointer;top: 5px;left: 3%;}
</style>
<div id="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id="gradient"></div>
<div id="slider">
      <img src="https://img1.oldkids.cn/upload/2020/10/26/photo_20201026181006270.jpg" alt="1">
    <img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026181005141.jpg" alt="2">
    <img src="https://img1.oldkids.cn/upload/2020/10/26/photo_20201026181006062.jpg" alt="3">
    <img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026181005755.jpg" alt="4">
    <img src="https://img4.oldkids.cn/upload/2026/04/07/photo_0_20260407130451117.jpg" alt="5">
    <img src="https://img1.oldkids.cn/upload/2020/10/26/photo_20201026181004425.jpg" alt="6">
    <img src="https://img3.oldkids.cn/upload/2026/04/07/photo_0_20260407130426911.jpg" alt="7">
    <img src="https://img2.oldkids.cn/upload/2026/04/07/photo_0_20260407130651191.jpg" alt="8">
    <img src="https://img3.oldkids.cn/upload/2026/04/07/photo_0_20260407130808555.gif" alt="9">
   <img src="https://img4.oldkids.cn/upload/2020/10/26/photo_20201026181005694.jpg" alt="10">

</div>
<div id="player"title="歌曲切换/不会暂停音画">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>
<div id="geci"></div>
<div id="lrc" data-lrc=""></div>


</div>
<audio id="aud" controls title="受伤的是我">
<source src="https://img2.oldkids.cn/upload/2026/04/10/blog_260855907_20260410154234661.mp3" type="audio/mpeg">
</audio>
<p>歌曲：受伤的是我(男女对唱版)</p>
<audio id="audio"controls title="好想醉一回">
<source src="https://img4.oldkids.cn/upload/2026/04/10/blog_260855907_20260410155100461.mp3" type="audio/mpeg">
</audio>
<p>歌曲：好想醉一回(男女对唱版)</p>

<script>
aud.play();
aud.addEventListener('ended', function() {
    audio.play(); lrc.style.display = 'none';geci.style.display = '';
},false);

player.onclick = () => { aud.paused ? aud.play(): (aud.pause(),lrc.style.display = 'none',geci.style.display = 'block');
audio.paused ? audio.play() : (audio.pause(),lrc.style.display = 'block',geci.style.display = 'none');
}
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };

</script>
<script >
(function() {
let lrcStr=`受伤的是我(男女对唱版)
出品 亚伦影音工作室
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：亚伦影音传媒
你已经变心了
我却还在执着
曾问镜子里的我
快乐不快乐
你开始讨厌我
说话不看着我
开始嫌弃我啰嗦
是不是不爱我了
我招谁惹谁了
受伤的总是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了
该伤的心伤了
不该流的泪流干了
求你别再折磨我
你不再需要我
就算我怎么做
我是不合脚的鞋子
你该脱就要脱
我收拾了行李
悄悄地离开你
等你醒来发现我离去
别难过这都是为你
我招谁惹谁了
受伤的总是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了
该伤的心伤了
不该流的泪流干了
求你别再折磨我
我招谁惹谁了
受伤的都是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了
该伤的心伤了
不该流的泪流干了
求你别再折磨我
不该流的泪流干了
求你别再折磨我
`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, 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 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) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*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 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;
}

/* л*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.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); /**/
})();
</script>

<script>
let lrcrs = `
好想醉一回(合唱版)
词：马健涛
曲：马健涛
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
为何这人间疲惫
都让我一个人背
为何这世间酸楚
都让我一人承受
白天人前装笑颜
夜晚泪水却流干
今夜拿酒杯作伴
对酒讲我的心酸
我的心好酸
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
白天人前装笑颜
夜晚泪水却流干
今夜拿酒杯作伴
对酒讲我的心酸
我的心好酸
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
`;
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(lrcrs);
</script>

亚伦影音工作室 发表于 2026-4-10 10:35

本帖最后由 亚伦影音工作室 于 2026-4-10 11:59 编辑

受伤的是我(男女对唱版)
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：执着文化
你已经变心了
我却还在执着
曾问镜子里的我
快乐不快乐
你开始讨厌我
说话不看着我
开始嫌弃我啰嗦
是不是不爱我了
我招谁惹谁了
受伤的总是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了


该伤的心伤了
不该流的泪流干了
求你别再折磨我
你不再需要我
就算我怎么做
我是不合脚的鞋子
你该脱就要脱
我收拾了行李
悄悄地离开你
等你醒来发现我离去
别难过这都是为你
我招谁惹谁了
受伤的总是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了
该伤的心伤了
不该流的泪流干了
求你别再折磨我
我招谁惹谁了
受伤的都是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了
该伤的心伤了
不该流的泪流干了
求你别再折磨我
不该流的泪流干了
求你别再折磨我




好想醉一回(合唱版)
词：马健涛
曲：马健涛
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
为何这人间疲惫
都让我一个人背
为何这世间酸楚
都让我一人承受
白天人前装笑颜
夜晚泪水却流干
今夜拿酒杯作伴
对酒讲我的心酸
我的心好酸
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
白天人前装笑颜
夜晚泪水却流干
今夜拿酒杯作伴
对酒讲我的心酸
我的心好酸
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回

红影 发表于 2026-4-10 21:11

很神奇，鼠标点击就直接换歌了，而且切换到另一首歌时，前面的一首就暂停在切换的地方，再切换回去还能接着听{:4_187:}

红影 发表于 2026-4-10 21:12

欣赏亚伦老师好帖，亚伦老师的每次都有新内容呢，很赞{:4_187:}

红影 发表于 2026-4-10 21:12

标题有点疑问，这个不能算是合并吧，具体应该算什么，我也不知道{:4_173:}

老谟深虑 发表于 2026-4-15 19:28

          欣赏老师的新代码，很有创意。

查看完整版本: 两个音频连续播放也可点击切换歌曲且计时[独家首作]