《王者之声·好声音 》南山南 歌手：张磊 TO：老头
<style>#papa { margin: 150px 0 0px calc(50% - 720px);
width: 1274px;
height: 644px;
background:#000000 ;
no-repeat center/cover; box-shadow: 1px 1px 3px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;}
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%; opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#t{position: absolute;top:50px; left:340px;width: 32px; height: 32px;z-index:4;mix-blend-mode:lighten;}
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:67%; left:15.8%;
bottom: 5px;
width: 30px;
height: 30px;
border: 0px solid #cccccc;
border-radius: 0%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #888888;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0px;
height: 0px;
left: 35px;
border-width: 8px 10px;
border-color: transparent transparent transparent #888888;
opacity: var(--disp1);
}
#mplayer::after {
width: 4px;
height: 16px;
left: 30px;
border-width: 0 6px 0 6px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 10px sans-serif;
color: #cccccc;
top:68%;
left:29.8%;}
#prog {position: absolute;z-index: 91;
width: 14%;
height: 0.4%;
cursor: pointer;
top:72%;
color: #0c6dbe
box-shadow: 0px 0px 0.1px 0.1px #000000;
left:22.4%;
border-radius: 2px;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{ --w: 22%; width: var(--w); overflow: hidden; color: #0129a5; position: absolute; left:19%;top:78%;font-size: 15px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<div id="papa">
<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt">《王者之声·好声音 》南山南 歌手：张磊</div>
<div id="t"><img id="tu" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://wj.zp68.com/lxx/yunhua/2024/04/30/1F.gif" width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
<div id="wzsd1"><ul id="ullrc">
</ul>
</div>
</div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/04/30/nsn.mp3" loop autoplay></audio>
<style type="text/css">
.lrc{z-index: 20;
width: 100%;
height: 120px;
overflow: hidden;filter:drop-shadow(#cccccc 1px 0 0)drop-shadow(#b5c3ee 0 1px 0)drop-shadow(#cccccc -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:20%; left:-19%;z-index: 5;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `《王者之声·好声音 》南山南
歌手：张磊
词：马頔
曲：马頔
你在南方的艳阳里大雪纷飞
我在北方的寒夜里四季如春
如果天黑之前来得及
我要忘了你的眼睛
穷极一生 做不完一场梦
他不再和谁谈论相逢的孤岛
因为心里早已荒无人烟
他的心里再装不下一个家
做一个只对自己说谎的哑巴
他说你任何为人称道的美丽
不及他第一次遇见你
时光苟延残喘 无可奈何
如果所有土地连在一起
走上一生 只为拥抱你
喝醉了他的梦 晚安
。。。。。。
你在南方的艳阳里大雪纷飞
我在北方的寒夜里四季如春
如果天黑之前来得及
我要忘了你的眼睛
穷极一生 做不完一场梦
大梦初醒 荒唐了一生
南山南 北秋悲
南山有谷堆
南风喃 北海北
北海有墓碑
南山南 北秋悲
南山有谷堆
南风喃 北秋悲
北海有墓碑
北海有墓碑
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg,#0129a5,#0129a5, #0129a5 ' + aud.currentTime / aud.duration *100 + '%, #999999 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';image1.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script> @东篱闲人
老头谢谢你的漂亮衣衣，小辣椒穷的就这么一套衣服，漂亮的红衣服稍微厚一点，放箱子里面了，天凉了拿出来穿，现在就单薄一点的再穿一段时间了{:4_170:} 送首歌给你欣赏，笑纳啊{:4_173:} 小辣椒 发表于 2024-6-2 20:50
送首歌给你欣赏，笑纳啊
蟹蟹{:4_170:} 好听的歌曲，代码实现的漂亮的swf效果。欣赏亲爱的好帖。
东篱大哥收礼开心{:4_187:} 马黑黑 发表于 2024-6-2 21:07
蟹蟹
啊~~~黑黑晚上好{:4_187:} 小辣椒 发表于 2024-6-2 21:38
啊~~~黑黑晚上好
你嚎你嚎{:4_170:} 红影 发表于 2024-6-2 21:36
好听的歌曲，代码实现的漂亮的swf效果。欣赏亲爱的好帖。
东篱大哥收礼开心
亲爱的，老头太聪明了，他看了就会套用玩的，这种可能不行，我播放器做背景上的，前面播放器独立的他就套用出来了 马黑黑 发表于 2024-6-2 21:38
你嚎你嚎
就是~~{:4_170:}嚎嚎更健康 小辣椒 发表于 2024-6-2 20:50
送首歌给你欣赏，笑纳啊
嗯嗯嗯，好听。。。。{:4_208:} 红影 发表于 2024-6-2 21:36
好听的歌曲，代码实现的漂亮的swf效果。欣赏亲爱的好帖。
东篱大哥收礼开心
{:4_208:} 东篱闲人 发表于 2024-6-2 21:51
嗯嗯嗯，好听。。。。
老头你的翻唱也是好听呢{:4_187:} 小辣椒 发表于 2024-6-2 21:54
老头你的翻唱也是好听呢
师傅你可别逗了。。。。{:4_170:} 东篱闲人 发表于 2024-6-2 21:58
师傅你可别逗了。。。。
是好听的啊，别谦虚了 小辣椒 发表于 2024-6-2 22:04
是好听的啊，别谦虚了
俺倒是想谦虚来着，可是也没有那资本啊。。。{:5_103:} 奇怪我看不到一楼的图，
小辣椒别的贴子里的图我都能看到的。。 东篱闲人 发表于 2024-6-2 22:09
俺倒是想谦虚来着，可是也没有那资本啊。。。
老头我可把你的翻唱专辑收藏在我的仓库当宝藏的，准备几百年收藏起来的{:4_170:} 小辣椒 发表于 2024-6-2 22:11
老头我可把你的翻唱专辑收藏在我的仓库当宝藏的，准备几百年收藏起来的
惭愧啊惭愧。。。{:4_170:} 南无月 发表于 2024-6-2 22:09
奇怪我看不到一楼的图，
小辣椒别的贴子里的图我都能看到的。。
月月看不见图吗？刷新试一下，这个动图不算大的，1.22MB 东篱闲人 发表于 2024-6-2 22:13
惭愧啊惭愧。。。
老头你是小辣椒最佩服的人之一，不用谦虚的{:4_173:}
我得先下了，晚安