爱情里没有谁对谁错 - 郑源 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2025-2-16 00:46

爱情里没有谁对谁错 - 郑源

本帖最后由亚伦影音工作室于 2025-2-20 15:32 编辑 <br /><br /><style type="text/css">
#papa{left: -43%; top: 0%; width:1286px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:url(https://pic1.imgdb.cn/item/671af491d29ded1a8c8e7c58.jpg)no-repeat center/100% 100%;position: relative;--state: running;}
#stage { position: absolute; width: 860px; height: 500px; margin: 0% 2%;bottom: 22%;overflow: hidden; white-space: nowrap;border:1px solid #fff; }
#stage img {width: 100%; height: 100%;}

#btnplay {position: absolute; bottom: 28%;left: 3%; width: 30px; height: 30px; color: white; display: grid; place-items: center; cursor: pointer; }
   #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
   #btnplay:hover::before { border-style: dotted; }
   @keyframes rot { to { transform: rotate(360deg); } }
#ppm{position: absolute; width: 100%; height: 100%; opacity:1; z-index: 1;
background:url(https://pic1.imgdb.cn/item/67b04254d0e0a243d4ff927c.png)no-repeat center/100% 100%; border-radius: 0px;
bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;bottom: 0;background:url(https://pic1.imgdb.cn/item/67aefd3fd0e0a243d4ff2222.png)no-repeat center/100% 100%;}
#bnt{left: 0px;bottom: 6px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer;mask: radial-gradient(red, transparent); cursor: pointer; }
#bnt:hover { mask: unset; }
#pic{position:absolute;top:25px; left:28px;background:#ccc;
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:#ccc; 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:16px; 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: 14px;
         position: absolute;overflow: hidden; align-items: center;border-radius: 10px;}
#percentage{margin: -20px 6px;
         position: relative;
      width: 86%; height: 5px;border-radius: 20px;
filter:invert(30%)hue-rotate(120deg);
         }
#duration{margin: 0px 0px;color: #eee;font: 400 14px sans-serif;
         }
#currentTime{margin: 0px 0px;color: #eee;font: 400 14px sans-serif;
         }

#loopbnt{ z-index: 91;
   position:absolute;
   width: 25px;
   height: 20px;background:#0000;
   bottom: 18px;border-radius: 0px;
left: 71%;filter:invert(100%)hue-rotate(180deg);
   cursor: pointer;
}

#yink {left: 71.5%;bottom: 3px;width: 40%;height: 50px;z-index: 8; transform:scale(0.9);
         position: absolute;overflow: hidden; align-items: center; background:#0000; border-radius: 10px;}

#volumeSlider{margin: 22px 42px;
         position: absolute;z-index: 40;
      width: 55%; height: 5px;border-radius: 20px;

}

#swithimg{margin: 8px 10px;filter:invert(90%)hue-rotate(0deg);z-index: 41;
         position: absolute;}
#canvas {left: 2%;bottom: 20%;width: 860px;height: 200px;z-index: 1; filter:invert(90%)drop-shadow(#00ff00 0px 0px 25px)drop-shadow(#00ff00 0px 0px 25px);
         position: absolute;align-items: center; }

ul,li,ol{list-style: none;}
.containe{width: 800px;
height: 500px;list-style:none;
overflow: hidden;
position: relative;
margin-left: 50%;
margin-right: auto;
margin-top:5%;
}
.lrcList{font:500 1.2em sans-serif;
line-height: 40px;filter:drop-shadow(#000 1px 1px 0px)drop-shadow(#000 1px 1px 0px) ;
color: #fff; overflow: hidden;
text-align: center;
transition:all 0.2s;/* 过渡动画。实现歌词上下移动的动画 */
}
.lrcList li{list-style-type: none;
display: block;
transition:all 0.2s;
height: 40px;
opacity: 0.6;
}
.lrcList .current{
transform: scale(1.5);
color:#32CD32;
opacity: 1;
}
</style>
<div id="papa">
<div id="stage">
            <img alt="" src="https://img1.oldkids.cn/upload/2021/02/03/photo_20210203094208051.jpg" />
            <img alt="" src="https://img1.oldkids.cn/upload/2021/02/03/photo_20210203094208974.jpg" />
            <img alt="" src="https://img1.oldkids.cn/upload/2021/02/03/photo_20210203094207157.jpg" />
            <img alt="" src="https://img3.oldkids.cn/upload/2021/02/03/photo_20210203094207012.jpg" />
            <img alt="" src="https://img2.oldkids.cn/upload/2021/02/03/photo_20210203094207060.jpg" />
            <img alt="" src="https://img2.oldkids.cn/upload/2021/02/03/photo_20210203094205497.jpg" />
</div>

<div id="btnplay">1</div>
<div id="ppm"></div>
<div id="ppcm" ></div>
<div id="bnt">
<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>
<div id="yink"title="声控/静音" >
<img src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png" height="30" width="30" id="swithimg">
<inputtype="range" min="0" max="1" step="0.1" value="0.6" id="volumeSlider">
</div>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />

<canvas id="canvas" width="860" height="200"></canvas>

<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div class="containe" id="containe">
<ul class="lrcList" id="lrcList">
         <li class="current"></li>
   </ul>
</div>
</div>

<audio src="https://s2.ananas.chaoxing.com/sv-w8/audio/e9/61/3b/f4b7a3984b87eb29faf27cb17ffa59d8/audio.mp3" id="aud"autoplay crossOrigin="anonymous"></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/67a8b6afd0e0a243d4fd95f3.png";
            return mm=false;
         }else{unmuteAudio(); volumeSlider.value=0.6;
            swithimg.src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png";
            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',ppcm.style.opacity= '0',ppm.style.opacity = '1') : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '1',ppm.style.opacity = '0');
mState = () => {papa.style.setProperty('--state', 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";}
}
var lastIdx = 0, pTimer;
var images = stage.querySelectorAll('img');
var mState = () => {
   btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   bnt.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
   aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
   idx = Math.floor(Math.random() * images.length);
   if(idx === lastIdx) idx = (idx+1) % images.length;
   lastIdx = idx;
   btnplay.innerText = idx + 1;
   stage.scroll({left: idx * 860, top: 0, behavior: 'smooth'});
   if(pTimer) clearTimeout(pTimer);
   pTimer = setTimeout(turn2, 4000);
};

var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//创建节点

var media=context.createMediaElementSource(aud);
var filter=context.createBiquadFilter();
var analyser=context.createAnalyser();
//只允许小于800的频率通过
filter.type=filter.LOWPASS;
filter.frequency.value=2800;
//Canvas初始化
var width=canvas.width,height=canvas.height;
var g=canvas.getContext("2d");
g.translate(0.5,height/2+0.5);
//连接：media → filter → analyser → destination
media.connect(filter);
filter.connect(analyser);
analyser.connect(context.destination);
//以fftSize为长度创建一个字节数组作为数据缓冲区
var output=new Uint8Array(analyser.fftSize);
//播放帧
(function callee(e){
analyser.getByteTimeDomainData(output);
//将缓冲区的数据绘制到Canvas上
g.clearRect(-0.5,-height/2-0.5,width,height);
g.beginPath();
for(var i=0;i<width;i++)
g.lineTo(i,height*(output/256-0.5));
g.stroke();
//请求下一帧
requestAnimationFrame(callee);
})();

</script>

<script>
letlrc = `爱情里没有谁对谁错 - 郑源
词：巴图
曲：巴图
我还来不及做好准备
约定就已经开始作废
都说爱情是弥足珍贵
现在感觉里只有苦味
可是我不会夜夜流泪
虽然偶尔也痛彻心扉
缘尽了你走了无法回头
我要努力学会无所谓
就这样就这样忍住伤悲
也许会也许会感到疲惫
再给我花开花落一个轮回
你就会在记忆中慢慢消褪
不再想不再想谁是谁非
爱情里并没有谁错谁对
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
不再想不再想谁是谁非
爱情里并没有谁错谁对
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
可是我不会夜夜流泪
虽然偶尔也痛彻心扉
缘尽了你走了无法回头
我要努力学会无所谓
就这样就这样忍住伤悲
也许会也许会感到疲惫
再给我花开花落一个轮回
你就会在记忆中慢慢消褪
不再想不再想谁是谁非
爱情里并没有谁错谁对
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
就这样就这样忍住伤悲
也许会也许会感到疲惫
再给我花开花落一个轮回
你就会在记忆中慢慢消褪
不再想不再想谁是谁非
爱情里并没有谁错谁对
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美
再给我春去秋来一个轮回
我就会化茧成蝶飞得更美`;

function parseLRC(LRC){
let lines = LRC.split('\n'); // 把歌词转为数组
let LRCArr = [];// 歌词数组
// 遍历数组
lines.forEach(item => {
   let parts = item.split("]"); //
   let timer =parts.slice(1).trim();//
   let obj = {
         time: parseTime(timer),
         word: parts.trim()==""?"":parts
   }
   // console.info( obj );
   LRCArr.push(obj);
});
return LRCArr;
}
function parseTime(timer){
let t = timer.split(":");
let result = Number(t)*60 + Number(t);
return result ;
}
function findIndex(){
// 播放器当前时间
let index = -1;
let curTime = doms.audio.currentTime;
for(let i=0; i<=LRCData.length-1 ; i++){
   if( curTime < LRCData.time ){
         index = i - 1;
         returnindex;
   }
}
// 找遍了，都没有歌词，说明播放完毕里，显示最后一句歌词。
index = LRCData.length-1
return index;
}

function createLrcList(lrc){
// 避免多次操作 DOM。创建一个 DOM 片段，它不会显示，但是可以集中处理 DOM。
let frag = document.createDocumentFragment();
doms.lrcList.innerHTML = "";
lrc.forEach(item=>{
   let li = document.createElement("li");
   li.innerHTML = item.word ;
   frag.appendChild(li);
});
doms.lrcList.appendChild(frag);
}

/*
设置歌词 ul 的偏移量
*/
function setOffset(index){
let dis =-1*( index * liH + liH/2- conH/2 );// 位移距离
doms.lrcList.style.transform = `translateY(${dis}px)`;
console.info( dis );
}
/*
设置歌词高亮
*/
function setLight(index){
let ul = doms.lrcList;
let lis = ul.children;
let cur = document.querySelector(".current");
if( cur ){ // 如果存在
   cur.classList.remove("current");
}
lis.classList.add("current");
}

let doms = {
audio:document.querySelector("audio"),
lrcList:document.querySelector("#lrcList"),
container:document.querySelector("#containe")
}
let LRCData = parseLRC(lrc);
createLrcList(LRCData);// 创造歌词 li
let conH = doms.container.clientHeight;// 容器高度
let liH = doms.lrcList.children.clientHeight;// li 高度
// 初始化歌词位置，让第一句歌词在歌词区中间
doms.lrcList.style.transform = `translateY(${-1*( liH/2- conH/2)}px)`;

doms.audio.addEventListener("timeupdate",function(){
let index = findIndex();
setLight(index);// 歌词位移
setOffset(index); // 歌词高亮
});
</script>

红影发表于 2025-2-16 08:11

这个漂亮，有黑黑的图片翻页，还有响应式频谱和歌词高亮同步。
欣赏亚伦老师好帖{:4_199:}

庶民发表于 2025-2-16 08:49

欣赏美好的东东。

老谟深虑 发表于 2025-2-16 15:02

欣赏老师的佳作，问好！

小辣椒 发表于 2025-2-16 21:13

亚纶这个带歌词同步了，更加完善了{:4_199:}

小辣椒 发表于 2025-2-16 21:13

欣赏亚纶的精彩制作{:4_187:}

亚伦影音工作室 发表于 2025-2-16 21:21

小辣椒发表于 2025-2-16 21:13
欣赏亚纶的精彩制作

刚刚加了循环按钮

绿叶清舟 发表于 2025-2-16 21:24

这个波纹漂亮，欣赏亚伦精彩制作

页: [1]

花潮论坛's Archiver

爱情里没有谁对谁错 - 郑源