为微风音乐论坛设计的小播
本帖最后由 亚伦影音工作室 于 2026-6-9 19:09 编辑 <br /><br /><style>#xiaobo {z-index: 100;
width: 350px;
height: 220px;
margin: 100px 80px;
position: relative;
overflow: hidden;
--state:paused;
}
.hexahedron {width: 210px;
height: 210px;
margin: 0px 0px;
position: relative; z-index: 1;
background:#55682f;border-radius: 8px;mask: radial-gradient(circle at 100% 50%,transparent 42px,#red 0%);-webkit-mask: radial-gradient(circle at 100% 50%,transparent 42px,red 0%); }
#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s 1 1s ;}
#all {position: absolute;width:200px; height:200px;top: 5px; left: 110px;z-index: -1; transition: 0.25s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#bnt{margin: 10px 0px ; width: 92px; height: 38px; position: absolute; cursor: pointer; z-index: 100;transition: all 1s; filter:invert(0%); }
#cndpt{position: absolute; width: 100%; height: 100%;opacity:1;border-radius: 10px;
background: url(https://pic1.imgdb.cn/item/6a27e647edae85a6284fbffe.png)no-repeat 0 0px/cover;}
#enopg{ position: absolute;width: 100%; height: 100%; border-radius: 10px;
opacity:0;background: url(https://pic1.imgdb.cn/item/6a27e647edae85a6284fbfff.png)no-repeat 0 0px/cover;)
}
#dt{margin: 0px 0px ; width: 200px; height: 200px;position: absolute; z-index: 10;transition: all 1s; }
#cndt{position: absolute; width: 100%; height: 100%; border-radius: 0px;opacity:1;
background: url(https://pic1.imgdb.cn/item/68e726e3c5157e1a885e7699.gif)no-repeat 0 0px/cover;}
#cnpg{ position: absolute;width: 100%; height: 100%; border-radius: 0px;opacity:0;
background: url(https://pic1.imgdb.cn/item/6a27996aedae85a6284defd4.png)no-repeat 0 0px/cover;)
}
.lrc {position:relative;width: 600px; height: 260px;background:#333;
z-index: 3; left:400px;top: -350px;
border: 1px solid white;
overflow: hidden;margin: 0px;
}
.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0}
.lrc #ul li {
cursor: pointer;
font-family: "ZCOOL QingKe HuangYou","华文行楷","SimHei", "Arial", "sans-serif";
font-size: 20px;
color: #fff;
font-weight: 100;
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-size: 30px;
color: #ff0000;
text-align: center;text-align: center; animation: fadeIn 0.5sforwards linear infinite ; }
@keyframes fadeIn {0% {filter: hue-rotate(360deg)brightness(180%)contrast(200%); }}
</style>
<div id="xiaobo">
<div class="hexahedron">
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg"></div>
</div>
<div id="dt" >
<div id="cndt"></div>
<div id="cnpg"></div>
</div>
</div>
<div id="all">
<img src="https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png"id="cp" />
</div>
</div>
<div class="lrc">
<ul id="ul">
</ul>
</div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/15d364a8adc087b75fd725aab7249c5e.mp3" loop autoplay></audio>
<script>
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
bnt.onclick = () => aud.paused ? (aud.play(),all.style.left = '110px',enopg.style.opacity= '0',cndpt.style.opacity = '1',
cndt.style.opacity= '1',cnpg.style.opacity= '0',all.style.animationPlayState = 'running') : (aud.pause(),all.style.left = '30px',enopg.style.opacity = '1',cndpt.style.opacity = '0',cndt.style.opacity= '0',cnpg.style.opacity= '1',all.style.animationPlayState = 'paused');
</script>
<script>
(function() {
var lrc = `爱上音画
岁月如笔写春秋（女版）
作词：日月同辉
作曲：欧阳尚尚
演唱：河南三妹
出品：亚伦影音工作室
岁月如笔写春秋
一生知己最难求
相逢本是百年修
缘聚今生不可丢
时光似酒酿温柔
心事诉与明月收
若问情根深几许
朝朝暮暮共白头
我珍惜一路 真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光 沉淀的安宁
憧憬偕老的约定
若有来世重逢 再续未了情
岁月如笔写春秋
一生知己最难求
相逢本是百年修
缘聚今生不可丢
时光似酒酿温柔
心事诉与明月收
若问情根深几许
朝朝暮暮共白头
我珍惜一路 真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光 沉淀的安宁
憧憬偕老的约定
若有来世重逢 再续未了情
我珍惜一路 真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光 沉淀的安宁
憧憬偕老的约定
若有来世重逢 再续未了情
歌词整理：亚伦`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#aud");
var ul = document.querySelector("#ul");
var 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;
}
function randomColor(){
const colors = ['#ff0000','#00ff00','#00C851','#7fff00','#1e90ff','#ff8800','#fff000'];
return colors;
}
function createElements() {
let fragment = document.createDocumentFragment();
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
li.style.color = randomColor();
li.addEventListener("click", function () {
audio.currentTime = result.time;
setOffset();
});
fragment.appendChild(li);
}
ul.appendChild(fragment);
}
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;
let offset = liHeight * index - containerHeight / 3 + liHeight / 2;
offset = Math.max(minOffset, Math.min(offset, maxOffset));
ul.style.transform = `translateY(${-offset}px)`;
ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
if (index < ul.children.length) {
ul.children.classList.add('active');
}
}
aud.addEventListener("timeupdate", setOffset);
})();
</script> 哇 不错啊 漂亮 赞{:5_149:}{:5_149:} https://upfile.mp3.wf/view.php/ff0dd747cb0cdac9eef41d4cd8ced6a3.jpg 这种类型的播放器上次看见小辣椒光盘可以点击伸缩，现在点击微风logo可以伸缩。不懂就问现在架子鼓下面的白的圆是起什么作用？ 感谢亚纶老师精彩的分享{:5_150:}{:5_150:} liumang 发表于 2026-6-9 22:21
这种类型的播放器上次看见小辣椒光盘可以点击伸缩，现在点击微风logo可以伸缩。不懂就问现在架子鼓下面的白 ...
架子鼓的大鼓用脚打的！ 亚伦影音工作室 发表于 2026-6-10 09:42
架子鼓的大鼓用脚打的！
主要第一次看见这个制作{:5_146:}{:5_146:}{:5_146:}
页:
[1]