DJ苏魏 - 晚风替我吻过你
本帖最后由 亚伦影音工作室 于 2026-5-20 22:13 编辑 <br /><br /><style type="text/css">#papa{left: -42%; top: 30%; width:1186px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; position: relative;background: #000 url(https://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png) no-repeat center/cover;}
#tu{position: absolute;top:0%; left:0%;
width: 100%;background:url(https://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png) no-repeat center/cover;
height: 100%;animation: round 6s linear infinite; height: 100%;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(0deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#bnt{left: 0px;bottom: 6px;position:absolute; z-index: 140;border: 0px solid #ff3300; width:50px; height: 50px;border-radius: 0%;cursor: pointer;}
#pic{position:absolute;top:25px; left:28px;background:#eee;
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:#eee; 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:14px; 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: 12px; position: absolute; align-items: center;}
#percentage{margin:0px 35px;position: relative;border-radius: 20px;width: 85%; height: 5px;border-radius: 20px;}
#duration{margin: 0px 0px;color: #eee;font: 400 14px sans-serif;position: absolute;}
#currentTime{margin: 0px -20px;color: #eee;font: 400 14px sans-serif;position: absolute;}
#yink {left: 70%;bottom: 4px;width: 40%;height: 50px;z-index: 8; transform:scale(.8);
position: absolute;overflow: hidden; align-items: center; background:#0000; border-radius: 10px;}
#jingtai{opacity:0;position: absolute;bottom: 8px; left:10px;}
#volumeSlider{margin: 20px 42px;
position: absolute;z-index: 40;
width: 55%; height: 5px;border-radius: 20px;}
input {
-webkit-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background-color: transparent;
width: 100%;
}
::-webkit-slider-runnable-track {
height: 4px;border-radius: 20px;
background: #aaa;
}
::-webkit-slider-container {
height: 18px;border-radius: 30px;
overflow: hidden;}
::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff0000;
border: 1px solid transparent;
margin-top: -4px;
border-image: linear-gradient(#ff0000,#ff0000) 0 fill / 4 10 4 0 / 0px 0px 0 2000px;}
#loopbnt{ z-index: 91;
position:absolute;
width: 25px;
height: 20px;background:#0000;
bottom: 18px;border-radius: 0px;
left: 71%;filter:invert(100%)hue-rotate(100deg);
cursor: pointer;
}
#swithimg{margin: 12px 10px;filter:invert(0%)hue-rotate(0deg);z-index: 41;
position: absolute;}
#marquee{position: absolute;width:90%;
top: 0%;z-index: 21;
left: 5%;
list-style-type: none;
height: 100px;
}
#lrc{left: 10%;top: 80%;}#lrcc {left: 90%;transform: translate(-102%);top: 87%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.8em 华文新魏;color: #222222;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 -1px 0);z-index: 15;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);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);}}
</style>
<div id="papa">
<div id="tu"></div>
<div id="bnt"title="暂停/播放" >
<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>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
<div id="yink">
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif" height="30" width="30" id="swithimg">
<img src="https://pic1.imgdb.cn/item/6a03d08fc05e72d917209191.png" height="30" width="30" id="jingtai">
<inputtype="range" min="0" max="1" step="0.1" value="0.9" id="volumeSlider">
</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<marquee id="marquee" direction="left" behavior="alternate"scrollamount="8"hspace=20 vspace=20loop="-80" onMouseOver="this.stop()"onMouseOut="this.start()"><font face="heiti" size="4" color="#eee">亚伦音画工作室《晚风替我吻过你- (新版)(DJ苏魏) 》 代码设计：亚伦</font> </marquee>
</div>
<audio src="https://www.joy127.com/url/150847.mp3" id="aud"autoplay ></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/6a03d08fc05e72d917209191.png";
return mm=false;
}else{unmuteAudio(); volumeSlider.value=0.8;
swithimg.src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";
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',swithimg.style.opacity= '1',jingtai.style.opacity = '0',marquee.start()) : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',swithimg.style.opacity= '0',jingtai.style.opacity = '1',marquee.stop());
mState = () => 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";}
}
</script>
<span id="lrcStr" style="visibility: hidden;">
DJ苏魏 - 晚风替我吻过你
LRC编辑：醉美水芙蓉
霓虹灯闪烁着迷离的错觉
人群中找不到熟悉的侧脸
路灯下影子被拉长在街边
那一夜你的心究竟偏向谁
咖啡杯倒映着寂寞的黑夜
看不清爱情里虚伪的谎言
狂欢后剩自己面对着一切
才发现放不下是我的执念
就让晚风替我轻轻吻着你
在这喧嚣舞池埋葬了过去
沉重的鼓点敲碎所有的期许
原来失去你是致命的结局
就让晚风替我轻轻吻着你
抹去眼角那些不堪的泪滴
不要再回头不要再有任何交集
这段回忆就让它随风而去
手机里删不掉昨天的画面
时间它无法把遗憾都停歇
跟着这节奏感撕裂了防线
就让我在今夜彻底的沦陷
就让晚风替我轻轻吻着你
在这喧嚣舞池埋葬了过去
沉重的鼓点敲碎所有的期许
原来失去你是致命的结局
随风而去随风而去
晚风吻过你
在这狂欢的夜里
晚风吻过你
谢谢欣赏！
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
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) => {
lrca=lrcAr;
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.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.innerHTML); /*获得歌词数组*/
})();
</script>
漂亮的制作，欣赏亚伦老师好帖{:4_199:} 好听好看，谢谢亚伦老师精彩分享{:4_190:}
页:
[1]