寒冬残荷 发表于 2022-9-14 21:34

吉特巴舞曲《唱着歌儿嗨起来》（搬版主的代码）

<style type="text/css">
#div1{position:relative; width: 1000px; height: 600px; margin: 15px auto; overflow : hidden; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 5px 15px #600030; background-size:100% 100%;background-image:url(https://s1.ax1x.com/2022/03/13/bbOClQ.gif); }
#dhimg{animation: tpdh1 5s linear infinite ;width:700px; height:600px; position:absolute; top:50px; left:-120px; -webkit-mask-image:radial-gradient(black 25%, transparent 60%);}
@keyframes tpdh1 {
from {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(140%);}
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
to {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(140%);}}
.maskgif{width:100%; height:100%; position: absolute;top:0px; left:0px;}
.wzsd1 { animation: wzsd 0.26s 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%);}}
.lrcShow{width:80%;height:70px;overflow:hidden;position:absolute;bottom:5px;left:10%; animation:gcsd 0.26s linear infinite; border:0px #FF4A20 solid;}
@keyframes gcsd {
from{filter:hue-rotate(360deg)        contrast(180%)        brightness(200%);}
to{filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
.lrcShow ul{width:100%;padding:0;list-style:none;transition:0.3s all ease; margin:0; line-height:70px;}
.lrcShow ul li{filter:drop-shadow(1px 0 0 #ffffff )drop-shadow(0 1px 0 #ffffff)drop-shadow(-1px 0 0 #ffffff)drop-shadow(0 -1px 0 #ffffff); height:70px; line-height:70px; 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;}
.lrcShow ul li.active{font-size:60px; font-weight:bold; color:#ff0000; line-height:70px;}
.mCtrl{border:2px solid #999999; border-radius:50%; display:inline-block; width:40px; height:40px; margin:0px; position:absolute; bottom: 5px; right:10px; transform:rotateX(30deg) rotateY(-15deg) rotateZ(0deg); background-position:0 0; background-size:100% 100%; background-image:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png);}
.z360z{animation:rotating 1s linear infinite;}
@keyframes rotating{
0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
</style>
<div id="div1">
<img id="dhimg" src="https://pic.imgdb.cn/item/631f43ef16f2c2beb1a57359.gif" />
<img class="maskgif" src="http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif" />
<img class="maskgif" src="http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213392999032271.gif" />
<div class="wzsd1" style="position:absolute; top:50px; right:50px; width:520px;height:80px; text-align:right ">
<div style="color:#fff000;width:520px;height:80px; font-family:华文隶书; font-size:35px;filter:drop-shadow(#00ff00 1px 0 0)drop-shadow(#00ff00 0 1px 0)drop-shadow(#00ff00 -1px 0 0)drop-shadow(#00ff00 0 -1px 0);">吉特巴舞曲- 　　</br>《唱着歌儿嗨起来》
</div></div>
<divclass="lrcShow" id='sLRC'></div>
<divid="mDisk" class='mCtrl'></div>
</div>

<script type="text/javascript">
var hasClass = function(elements, cName) {
return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"))
};
var addClass = function(elements, cName) {
if (!hasClass(elements, cName)) {
elements.className += " " + cName
}
};
var removeClass = function(elements, cName) {
if (hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ")
}
};
var lrcPlayerX = function() {
return this.init.apply(this, arguments)
};
lrcPlayerX.prototype = {
constructor: lrcPlayerX,
init: function(opts) {
lyricTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
this.showLrcObj = document.getElementById(opts.lrcShowID);
this.audioCtrl = document.getElementById(opts.audioCtrl);
this.lrcVec = this.handleLrc(lyricTxt);
this.showLrcObj.appendChild(this.formLRCShow());
this.genPlayer(opts.audioURL)
},
handleLrc: function(lyricTxt) {
var parts = lyricTxt.replace(/(^\s*)|(\s*$)/g, "").split(/\r|\n|\r\n/);
var lrcs = new Array();
for (let index = 0; index < parts.length; index++) {
let chkTime = parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
if (chkTime) {
tIdx = parts.lastIndexOf(']');
if (tIdx > 0) lrcTxt = parts.substr(tIdx + 1);
for (m = 0; m < chkTime.length; m++) {
ta = chkTime.substr(1).replace(']', '').split(/:/);
_0 = (+ta) * 60 + (+ta);
lrcs.push({
seconds: _0,
words: lrcTxt
})
}
}
}
return lrcs.sort(function(a, b) {
return (a.seconds - b.seconds)
})
},
formLRCShow: function() {
var ulObj = document.createElement('ul');
for (let index = 0; index < this.lrcVec.length; index++) {
var liObj = document.createElement("li");
liObj.innerText = this.lrcVec.words;
ulObj.appendChild(liObj)
}
return ulObj
},
genPlayer: function(mUrl) {
this.mObj = document.createElement("audio");
this.mObj.loop = false;
this.mObj.muted = false;
this.mObj.src = mUrl;
this.showLrcObj.appendChild(this.mObj);
var that = this;
var turn = 0;
this.idx = 0;
this.mObj.addEventListener('ended', function() {
that.idx = 0;
removeClass(that.audioCtrl, 'z360z');
this.play()
});
this.mObj.addEventListener('playing', function() {
addClass(that.audioCtrl, 'z360z')
});
this.mObj.addEventListener('pause', function() {
removeClass(that.audioCtrl, 'z360z')
});
this.mObj.addEventListener('error', function() {
console.log("audio wrong, remove play start event");
that.showLrcObj.style.display = 'none';
var lrc_li_height = 70,
lrc_ul_height = 70;
var top = that.idx * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0
}
that.showLrcObj.removeChild(this)
});
this.mObj.addEventListener('timeupdate', function() {
if (that.idx < that.lrcVec.length) {
if (this.currentTime > that.lrcVec.seconds) {
var lrc_li_height = 70,
lrc_ul_height =70;
var top = that.idx * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0
}
var ullrc = that.showLrcObj.getElementsByTagName('ul');
ullrc.style.marginTop = -top + "px";
var activeLi = ullrc.querySelector(".active");
if (activeLi) {
activeLi.classList.remove("active")
}
ullrc.children.classList.add("active");
that.idx++
}
}
});
this.audioCtrl.onclick = function() {
if (that.mObj.paused) {
that.mObj.play()
} else {
that.mObj.pause()
}
};
try {
this.mObj.play()
} catch (err) {
console.log(err.message)
}
}
}
</script>

<script type="text/javascript">
var lrc =`《唱着歌儿嗨起来》
词：李秉笙
曲：敏子
演唱：敏子/许志刚
LRC歌词：寒冬残荷
你正在赶路
我在爬坡
人生就是一首歌
一呀一首歌
起起落落悲喜
悲喜都有
曲曲折折快乐
快乐度过
你正在翻山
我在趟河
人生就是一首歌
一呀一首歌
坎坎坷坷共同
共同闯过
风风雨雨一起
一起坚守
人生就是一首歌
一呀一首歌
酸甜苦辣唱着过
唱呀唱着过
月圆月缺人有离合
唱出快乐好生活
好呀好生活
人生就是一首歌
一呀一首歌
得失成败唱着过
唱呀唱着过
天有阴晴潮有涨落
唱着歌儿好幸福
好呀好幸福
正在播放《唱着歌儿嗨起来》
风雨过后就有彩虹
寒冬尽头有春色
有呀有春色
只要你执着
执着朝前走
酸甜苦辣都是歌
都是歌
艰难困苦都是财富
一张白纸绘蓝图
绘呀绘蓝图
只要你坚强
坚强不退缩
青春年华莫错过
莫错过
人生就是一首歌
一呀一首歌
酸甜苦辣唱着过
唱呀唱着过
月圆月缺人有离合
唱出快乐好生活
好呀好生活
人生就是一首歌
一呀一首歌
得失成败唱着过
唱呀唱着过
天有阴晴潮有涨落
唱着歌儿好幸福
好呀好幸福
天有阴晴潮有涨落
唱着歌儿好幸福
好呀好幸福
唱着歌儿好幸福
好呀好幸福
【谢谢观看！】
　　
　　
`;
var opts = {
lrcTxt:lrc,
lrcShowID:'sLRC',
audioCtrl:'mDisk',
audioURL:'http://url.amp3a.com/kuwo.php/54238887.mp3'
};
new lrcPlayerX(opts);
</script>


195400 发表于 2022-9-14 21:55

http://www.yinhuabbs.cn/data/attachment/forum/202010/12/173753i8k72r7yy032r8tk.gif

这大概是KTV的感觉吧。:lol

寒冬残荷 发表于 2022-9-14 21:59

195400 发表于 2022-9-14 21:55
这大概是KTV的感觉吧。

老师，晚上好！LRC部分代码哪个部分出问题（照搬的），有一个长条在那里。:lol

蓝魔 发表于 2022-9-14 22:31

欣赏一下，谢谢。

红枫 发表于 2022-9-14 22:35

寒冬残荷 发表于 2022-9-14 21:59
老师，晚上好！LRC部分代码哪个部分出问题（照搬的），有一个长条在那里。
我估计是歌词或播放器带有边框！暂还没去看代码。

195400 发表于 2022-9-14 23:14

寒冬残荷 发表于 2022-9-14 21:59
老师，晚上好！LRC部分代码哪个部分出问题（照搬的），有一个长条在那里。

这代码也许是从多处复制粘贴的代码拼凑而来的，没法看，或许是container没设置个确切的高度，从它内部包含的标签也无法推断。

非常开心 发表于 2022-9-15 06:44

欣赏楼主的新作，点赞多谢分享！

195400 发表于 2022-9-15 11:11

寒冬残荷 发表于 2022-9-14 21:59
老师，晚上好！LRC部分代码哪个部分出问题（照搬的），有一个长条在那里。

已经改了代码是吧

寒冬残荷 发表于 2022-9-15 12:46

195400 发表于 2022-9-15 11:11
已经改了代码是吧

老师，中午好！是的，我全部从头到尾看了代码。除了JS部分看不懂改不了，其它的我都按我理解的改了。

寒冬残荷 发表于 2022-9-15 12:48

195400 发表于 2022-9-15 11:11
已经改了代码是吧

这个LRC歌词JS代码在手机上不能自动播放，所以播放器加了控制条，这样在手机上可以点击播放音乐。
页: [1] 2 3 4 5 6 7
查看完整版本: 吉特巴舞曲《唱着歌儿嗨起来》（搬版主的代码）