叹情缘 (慢四版) - 祁隆
本帖最后由 亚伦影音工作室 于 2025-4-28 18:38 编辑 <br /><br /><style>#bj {
position: relative;
width: 580px;
height:900px;
margin: 10px 120px;
overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
background:#800 url() no-repeat center / cover;--state:paused;
}
#vid{width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#bfq{
position:absolute;
width: 450px;
height:350px;overflow: hidden;
top:0%;background:#0000;
left: 18%;z-index: 20;}
#cp{
position:absolute;
width: 240px;border-radius: 50%;
height:240px;animation: rotating 6s infinite linear var(--state);
top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url('http://img4.kuwo.cn/star/starheads/500/76/16/70878994.jpg') no-repeat center / cover;
border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
top:6%; left:45%;z-index: 2;
width: 150px;background: url('https://pic1.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/85%;
height: 300px;
cursor: pointer;
}
.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}
.lrc {
position: absolute;
top: 45%;
left: 5%;
width: 540px;
height: 350px;
overflow: hidden;
}
.lrc #ul {
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
.lrc #ul li {
font-size: 20px;
color: #fff;
font-weight: 400;
transition: .3s all ease;
list-style-type: none;
text-align: center;
display: block;
padding: 0 10px;
height: 50px;
line-height: 50px;
margin: 0 auto;
cursor: pointer;
}
.lrc #ul li.active {
font-size: 25px;
color: #EE7700;
font-weight: 550;
text-align: center;
}
</style>
<div id="bj">
<video id="vid" src="https://mobile-img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/6c5cfbd64ff27969197b9648671fc18d_preview.mp4" loop muted autoplay=""></video>
<div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w8/audio/ee/e7/86/0abeb9f2e49984f4af37943e9ce81ad4/audio.mp3" loop autoplay ></audio>
<script>
let lrc = `叹情缘 (慢四版) - 祁隆
词：马健涛
曲：马健涛/祁隆
编曲：马健涛
时光匆匆过
仿佛一切都变了
那个爱过的人啊
如今你在哪里啊
爱擦肩而过
让我受尽了折磨
被割舍的情缘
不能愈合
我用真心来爱你
你又无情的离去
爱情分分合合
被搁浅两地
多想爱你爱到底
多想永远不分离
转眼看你离去
我无能为力
我要勇敢爱下去
不会轻易的放弃
再会吧我的爱人
时光匆匆过
仿佛一切都变了
那个爱过的人啊
如今你在哪里啊
爱擦肩而过
让我受尽了折磨
被割舍的情缘
不能愈合
我用真心来爱你
你又无情的离去
爱情分分合合
被搁浅两地
多想爱你爱到底
多想永远不分离
转眼看你离去
我无能为力
我要勇敢爱下去
不会轻易的放弃
再会吧我的爱人
时光匆匆过
仿佛一切都变了
那个爱过的人啊
如今你在哪里啊
爱擦肩而过
让我受尽了折磨
被割舍的情缘
不能愈合
我用真心来爱你
你又无情的离去
爱情分分合合
被搁浅两地
多想爱你爱到底
多想永远不分离
转眼看你离去
我无能为力
我要勇敢爱下去
不会轻易的放弃
再会吧我的爱人
时光匆匆过
仿佛一切都变了
那个爱过的人啊
如今你在哪里啊
爱擦肩而过
让我受尽了折磨
被割舍的情缘
不能愈合
我用真心来爱你
你又无情的离去
爱情分分合合
被搁浅两地
多想爱你爱到底
多想永远不分离
转眼看你离去
我无能为力
我要勇敢爱下去
不会轻易的放弃
再会吧我的爱人
时光匆匆过
仿佛一切都变了
那个爱过的人啊
如今你在哪里啊
爱擦肩而过
让我受尽了折磨
被割舍的情缘
不能愈合
我用真心来爱你
你又无情的离去
爱情分分合合
被搁浅两地
多想爱你爱到底
多想永远不分离
转眼看你离去
我无能为力
我要勇敢爱下去
不会轻易的放弃
再会吧我的爱人
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#audio"),
ul = document.querySelector("#ul"),
container = document.querySelector(".lrc");
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
if (lrcData.length < 2) continue;
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData.trim()
}
result.push(obj);
}
function parseTime(lrcTime) {
let lrcTimeArr = lrcTime.split(":");
return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
}
function getIndex() {
let time = audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > time) {
return i - 1;
}
}
return result.length - 1;
}
var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1263fc=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})
createElements();
let containerHeight = container.clientHeight;
let liHeight = ul.children?.clientHeight || 50;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
function setOffset() {
const index = getIndex();
if (index < 0) return;
const liHeight = ul.children?.clientHeight || 50;
const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
ul.style.transform = `translateY(${-offset}px)`;
ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
ul.children?.classList.add('active');
const currentLyric = result.word.trim();
if (!currentLyric) return;
const nextTime = result?.time || audio.duration;
const duration = nextTime - result.time;
const charIndex = duration > 0 ?
Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
currentLyric.length;
}
let rafId;
audio.addEventListener("timeupdate", () => {
rafId = requestAnimationFrame(setOffset);
});
var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),bnt.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),bnt.title = '点击暂停' );
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
cp.onclick =cz.onclick = () => audio.paused ? (audio.play(),vid.play(),cz.classList.remove('purple')) : (audio.pause(),vid.pause(),cz.classList.add('purple'));
</script> 山间这束花真好看啊{:6_228:} 漂亮的音乐模板！ 这个播放器设计得很有趣。 代码光盘，还有指针，这个播放器制作真漂亮。
欣赏亚伦老师好帖{:4_199:} 这株山崖上的蝴蝶兰真不容易，就那么点土，连根系都裸露了。
这个视频用得好，让歌词也如同浮在空中似的{:4_187:} 亚伦老师的制作构思真好{:4_187:} 最近几天亚纶分享的不少的{:4_199:} 用视频背景加播放器效果也是不错的，亚纶最近发的个个精彩{:4_199:}
页:
[1]