注册时间2015-8-30
在线时间 小时
- 最后登录
- 1970-1-1
|
楼主 |
发表于 2022-3-22 15:11
|
显示全部楼层
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_10223156">
我也模仿一个
<style type="text/css">
#musickrc01 {
text-align:center;
color:#f00;
font-size: 40px; font-family:华文隶书;
filter:drop-shadow(#ffffff 2px 0 0)
drop-shadow(#ffffff 0 2px 0)
drop-shadow(#ffffff -2px 0 0)
drop-shadow(#ffffff 0 -2px 0);
float:left; display:block;
}
#musickrc02 {
text-align:center;
color:#00c;
font-size: 32px; font-family:华文隶书;
filter:drop-shadow(#ffffff 2px 0 0)
drop-shadow(#ffffff 0 2px 0)
drop-shadow(#ffffff -2px 0 0)
drop-shadow(#ffffff 0 -2px 0);
float:right;
}
#outblk {
width:1000px;height:600px;position:relative;
background-image:url(https://s1.ax1x.com/2022/03/20/qZypFJ.png);
background-size:cover;
margin:100px 0 32px -180px;
border:18px blue groove;
}
#LRCShow {
width:700px;height:100px;
margin:16px auto
}
#mplay {
opacity:0.15;
}
#rdisk{
width: 75px;height:75px;
background: url(http://image.hnol.net/c/2022-01/ ... 5389221-5769293.png) 0 0 / 100% 100%;
overflow:hidden;border-radius:50%;
animation: circleSmall2 10s linear infinite;
position:absolute;left:5%;bottom:10px;
animation-play-state:paused;
}
/*旋转动画*/
@keyframes circleSmall2{
0% {
transform: rotateX(30deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(30deg) rotateY(-45deg) rotateZ(360deg);
}
}
</style>
<div id="outblk">
<div id="rdisk"></div>
<div id="LRCShow" style="position:absolute;left:15%;bottom:10px;" >
<span id="musickrc01"></span>
<br style="clear:both;">
<span id="musickrc02"></span>
<audio src="http://music.163.com/song/media/outer/url?id=1411410610.mp3" id="mplay" loop >
</audio>
</div>
</div>
<script type="text/javascript">
var songkrc = "[ti:七月的海] \n[ar:- 冬雪儿] \n[al:] \n[by:冬雪儿] \n[00:00.00] \n[00:01.36]七月的海 - 冬雪儿\n[00:07.62]词：冬雪儿\n[00:12.43]曲：冬雪儿\n[00:15.74]编曲：黄勇/大卫\n[00:19.74]制作人：大卫\n[00:25.50]LRC：编辑静悟 \n[00:41.90][02:24.26]海边城市里的夏天\n[00:44.67][02:27.00]想象着将你拥抱 \n[00:48.35][02:30.20]每当人们在海边嬉闹\n[00:50.99][02:33.41]时而还有浪花在笑\n[00:54.19][02:36.70]当你牵着海风的衣角\n[00:57.52][02:39.85]随浪花悄悄来到\n[01:00.69][02:42.97]每当随风离开的时候\n[01:03.92][02:46.30]后悔没给你一个拥抱\n[01:10.76][02:53.30]七月份的海浪花来\n[01:13.73][02:56.21]是我最想呼唤的真爱\n[01:17.06][02:59.45]大海的故事如此臻白\n[01:19.89][03:02.24]像是热恋在海边的女孩 \n[01:26.73][03:09.14]七月份的海像花开\n[01:29.70][03:11.92]是这个城市美好的未来\n[01:33.08][03:15.50]当你想起那海边的女孩\n[01:35.95][03:18.31]会在七月的海风中等待\n[01:42.86][03:25.21]嘀嘀哒哒嘀哒哒 \n[01:45.80][03:28.21]嘀嘀哒哒嘀哒\n[01:48.98][03:31.44]嘀嘀哒哒嘀哒哒\n[01:52.99][03:34.63]嘀嘀哒哒嘀哒哒\n[01:58.62]***********\n[03:41.14]七月份的海浪花自来\n[03:44.32]一半是最爱一半是未来 \n[03:47.55]当你想起那美丽的女孩\n[03:50.35]依然在七月的海风中等待\n";
function parseLyric(text) {
var lines = text.split('\n'),pattern = /\[\d{2}:\d{2}.\d{2}\]/g,result = [];
while (!pattern.test(lines[0])) {
lines = lines.slice(1);
};
lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function(v,i,a) {
var time = v.match(pattern), value = v.replace(pattern,'');
time.forEach(function(v1,i1,a1){
var t = v1.slice(1, -1).split(':');
result.push([parseInt(t[0],10) * 60 + parseFloat(t[1]), value]);
});
});
result.sort(function(a, b){
return a[0] - b[0];}); return result;
}
var my_audio = document.getElementById("mplay");
var lyric = parseLyric(songkrc);
var rdisk = document.getElementById("rdisk");
my_audio.onplaying = function() {rdisk.style.animationPlayState='running';}
my_audio.onpause = function() {rdisk.style.animationPlayState='paused';}
my_audio.ontimeupdate = function () {
for (var i = 0; i < lyric.length; i++) {
if(this.currentTime > lyric[0]){
document.getElementById("musickrc01").innerHTML = lyric[1];
if(i+1==lyric.length){
document.getElementById("musickrc02").innerHTML = "";
}
else{
document.getElementById("musickrc02").innerHTML = lyric[i + 1][1];
};
};
};
};
rdisk.onclick = function() {
if(my_audio.paused) {
my_audio.play();
}
else {
my_audio.pause();
}
}
my_audio.play();
</script>
</td></tr></table>
|
|
发表于 2022-3-22 15:24
