童声版在他乡
本帖最后由 马黑黑 于 2022-6-11 14:48 编辑 <br /><br /><style>.mnBox { left: -302px; width: 1200px; height: 674px; position: relative; background: #ccc url('/data/attachment/forum/202206/11/120209afxg0fvz4axkzrm4.jpg') no-repeat; }
.mnBox::before, .mnBox::after { position: absolute; content: ''; width: 100%; height: 100%; }
.mnBox::before { background: linear-gradient( 90deg, transparent 40%, rgba(255,255,255,.2) 60%, transparent 100%); animation: bggo 6s infinite; }
.mnBox::after { background: linear-gradient( 90deg, transparent 40%, rgba(255,255,255,.35) 60%, transparent 100%); animation: bggo 4s .5s infinite; }
.lrcWrap { position: absolute; left: 20px; top: 20px; padding: 20px; width: fit-content; height: fit-content; text-align: center; display: flex; flex-direction: column; user-select: none; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #ddd; z-index: 100;}
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.btn { width: 24px; height: 24px; background: olive; color: #ccc; border: none; font-size: 14px; outline: none; cursor: pointer; }
.btn:hover { color: red; }
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: olive; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px;overflow: hidden; position: relative; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
@keyframes bggo {
from { background-position: 0; }
to { background-position: -1200px; }
}
</style>
<div class="mnBox">
<div class="lrcWrap">
<p>童声版在他乡</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<input class="btn" type="button" value="||" />
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1915533270.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
btn = document.querySelector('.btn');
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0;
let lrcAr = [
['0:01','在他乡 (童声版) - 韩甜甜/石尚'],
['0.70','作词 : 卢庚戌'],
['0.89','作曲 : 李健'],
['0.94','编曲 : 石栋颖'],
['1.97','和声编写 : 石栋颖'],
['2.91','混音 : 石栋颖'],
['4.05','总策划 : 申俊星/莫涛源'],
['5.42','推广营销 : 晓静/芦柯/申奥成/杜茜'],
['6.08','文案策划 ：郭子旋/文文'],
['6.82','企宣统筹：张波文/丹丹'],
['7.86','封面设计：韩艳静'],
['9.04','监制 ：郑前(ForwardMarch)'],
['10.03','发行：南京星航娱乐'],
['11.17','录音棚：破破乐录音棚'],
['12.32','推广公司：南京星航娱乐'],
['13.38','本作品经词曲人授权和版权公司正式授权'],
['17.08','呜 呜 呜 呜'],
['22.17','韩甜甜：那年你踏上暮色他乡'],
['27.38','你以为那里有你的理想'],
['32.71','石尚：你看着周围陌生目光'],
['37.94','清晨醒来却没人在身旁'],
['43.77','All:人静的雨夜想起了她'],
['48.94','她的挽留还萦绕耳旁'],
['54.31','想起离别她带泪的脸庞'],
['59.67','你忍不住地哭出声响'],
['63.65','我多想回到家乡'],
['66.25','再回到她的身旁'],
['68.90','看她的温柔善良'],
['71.65','来抚慰我的心伤'],
['74.19','就让我回到家乡'],
['76.91','再回到她的身旁'],
['79.55','让她的温柔善良'],
['82.23','来抚慰我的心伤'],
['86.73','呜 呜 呜 呜'],
['107.44','啊 啊 啊 啊'],
['129.18','人静的雨夜想起了她'],
['134.40','她的挽留还萦绕耳旁'],
['139.67','想起离别她带泪的脸庞'],
['145.01','你忍不住地哭出声响'],
['148.88','我多想回到家乡'],
['151.55','再回到她的身旁'],
['154.29','看她的温柔善良'],
['156.93','来抚慰我的心伤'],
['159.49','就让我回到家乡'],
['162.24','再回到她的身旁'],
['164.90','让她的温柔善良'],
['167.59','来抚慰我的心伤'],
['170.69','呐咦耶 呐咦耶 呐咦耶'],
['181.25','呐咦耶 呐咦耶 呐咦耶']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li style="list-style-type:none" id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
});
aud.addEventListener('pause', () => btn.value = '\u25BA');
aud.addEventListener('play',() => btn.value = '||');
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
btn.onclick = () => aud.paused ? (aud.play(),btn.value = '||') : (aud.pause(),btn.value = '\u25BA');
function offset(obj,direction){//位移量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.value = aud.paused ? '\u25BA' : '||';
</script>
这些光带真漂亮，很梦幻。欣赏黑黑漂亮的制作{:4_187:} 光带貌似可以取窄点，被它们影响得没法拉动进度条了呢{:4_173:} 连鼠标划过，按钮都不变色了{:4_173:} 黑黑高产的，本来想睡前上来发个，看见黑黑又有新的了，怎么跟你的脚步啊。。。{:4_170:} 红影 发表于 2022-6-11 12:28
这些光带真漂亮，很梦幻。欣赏黑黑漂亮的制作
光带是用伪元素做的，它至少吧可以产生动感，美化我的家乡。我家乡很美，再往前走，到中间的云那是，有一条大河，大河会折射我帖子里的光带 小辣椒 发表于 2022-6-11 13:17
黑黑高产的，本来想睡前上来发个，看见黑黑又有新的了，怎么跟你的脚步啊。。。
我这个是胡乱制作的 红影 发表于 2022-6-11 12:31
光带貌似可以取窄点，被它们影响得没法拉动进度条了呢
是吗？我没注意这一点。我去改改，但不用改光带。 红影 发表于 2022-6-11 12:31
连鼠标划过，按钮都不变色了
现在，任何时候，都可以了 隐隐约约的光带，使静态的图片有了动感。这样的设计可谓独具匠心了。 梦油 发表于 2022-6-11 14:56
隐隐约约的光带，使静态的图片有了动感。这样的设计可谓独具匠心了。
小小的修饰而已 马黑黑 发表于 2022-6-11 14:57
小小的修饰而已
黑黑朋友独具匠心啊！ 好制作，整个都活起来了。佩服佩服。老黑真厉害！{:4_199:} 马黑黑 发表于 2022-6-11 14:47
我这个是胡乱制作的
反正新产品又出来了{:4_187:}
黑黑的速度真的太快了 醉美水芙蓉 发表于 2022-6-11 16:53
进来欣赏黑黑老师新发现呢！
{:5_108:} 小辣椒 发表于 2022-6-11 16:50
反正新产品又出来了
黑黑的速度真的太快了
一般一般。主要是为了进一步测试播放器 梦油 发表于 2022-6-11 15:18
黑黑朋友独具匠心啊！
果酱果酱 马黑黑 发表于 2022-6-11 14:46
光带是用伪元素做的，它至少吧可以产生动感，美化我的家乡。我家乡很美，再往前走，到中间的云那是，有一 ...
黑黑如此想念故乡，可以多回去看看{:4_204:} 马黑黑 发表于 2022-6-11 14:48
是吗？我没注意这一点。我去改改，但不用改光带。
现在真的可以了呢，你是怎么改的，真神奇{:4_187:}
页:
[1]
2