寒冬残荷 发表于 2022-9-23 09:46
在手机上看方便，到哪都可以看看呀。而且我注册的网站，就这个网站能在微信中打开浏览。用手机自带的浏览 ...
如果在家手机不如计算机， 如果在外要流量，出门顶多看看新闻。
<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); }
#dhx{animation: slider1 5s linear infinite ;width:700px; height:600px; position:absolute; top:50px; left:-120px; -webkit-mask-image:radial-gradient(black 25%, transparent 60%);}
@keyframes slider1 {
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;}
.lrcShow{font:bold 60px 微软雅黑; background-image:linear-gradient(-90deg,#ff0000,#f9f900);color:transparent; letter-spacing:2px; background-position:100% 100%; background-size:200% 200%; -webkit-background-clip:text; -webkit-text-stroke:1px #ffffff; border:0px #ffffff solid; }
@keyframes bgMove1{from{background-position:0 0;}to{background-position:-100% 0;}}
@keyframes bgMove0{from{background-position:0 0;}to{background-position:-100% 0;}}
.mCtrl{border:2px solid #ffffff; border-radius:50%; display:inline-block; width:50px; height:50px; margin:0px; position:absolute; bottom:10px; right:10px; transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg); background-size:100% 100%; background-position:0 0; background-image:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png); }
.z360z{animation:rotating 10s linear infinite;}
@keyframes rotating{
0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
.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%);}}
</style>
<div id="div1">
<img id="dhx" src="https://pic.imgdb.cn/item/631f43ef16f2c2beb1a57359.gif" />
<img src="http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif" class="maskgif" />
<img src="http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213392999032271.gif" class="maskgif" />
<div class="wzsd1" style="position:absolute; top:50px; right:50px; width:320px;height:80px; ">
<div style="color:#ff0000;width:320px;height:80px; font-family:华文隶书; font-size:35px;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0)drop-shadow(#ffffff 0 -1px 0);"> 吉特巴舞曲- </br>《唱着歌儿嗨起来》</div></div>
<div style="position:absolute; width:840px;height:70px; position:absolute; bottom:15px; left:80px; border:0px #FF4A20 solid;text-align:center;line-height: 70px; ">
<div class="lrcShow" id='sLRC'></div></div>
<div id="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
var lrcPlayerZ = function() {
return this.init.apply(this, arguments)
};
lrcPlayerZ.prototype = {
constructor: lrcPlayerZ,
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.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)
})
},
showLrc: function(durTime) {
this.showLrcObj.innerHTML = this.lrcVec.words;
this.showLrcObj.style.animation = 'bgMove' + (this.idx % 2) + ' ' + durTime + 'ms linear forwards';
this.idx++
},
genPlayer: function(mUrl) {
this.mObj = document.createElement("audio");
this.mObj.loop = false;
this.mObj.muted = false;
this.mObj.autoplay = true;
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;
that.audioCtrl.classList.remove('z360z');
this.play()
});
this.mObj.addEventListener('play', function() {
that.audioCtrl.classList.add('z360z');
if (that.showLrcObj.style.animationPlayState == 'paused') that.showLrcObj.style.animationPlayState = 'running'
});
this.mObj.addEventListener('pause', function() {
if (that.idx == 1 && this.currentTime < 1) {
that.mObj.play();
return false
}
that.audioCtrl.classList.remove('z360z');
if (that.showLrcObj.style.animationPlayState == 'running') that.showLrcObj.style.animationPlayState = 'paused'
});
this.mObj.addEventListener('error', function() {
console.log("audio wrong, remove play start event");
that.showLrcObj.style.display = 'none';
that.showLrcObj.removeChild(this)
});
this.mObj.addEventListener('timeupdate', function() {
if (that.idx < that.lrcVec.length) {
if (this.currentTime >= that.lrcVec.seconds) {
if (that.idx < (that.lrcVec.length - 1)) {
that.showLrc((that.lrcVec.seconds - that.lrcVec.seconds) * 1000)
} else {
that.showLrc(3000)
}
}
}
});
this.audioCtrl.addEventListener('click', function() {
if (that.mObj.paused) {
that.mObj.play()
} else {
that.mObj.pause()
}
})
}
}
</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 lrcPlayerZ(opts);
</script>
寒冬残荷 发表于 2022-9-23 09:43
这个在手机上能自动播放。
46#和47#分别指的是哪些楼层？
我的手机浏览器一个从不自动播放另一个总是自动播放。
195400 发表于 2022-9-23 09:54
如果在家手机不如计算机， 如果在外要流量，出门顶多看看新闻。
我办的宽带，每月送30G流量。
寒冬残荷 发表于 2022-9-23 09:56
我办的宽带，每月送30G流量。
那是不少，我只有20G每月最多用4、5个G，还是全家共用的。
195400 发表于 2022-9-23 09:56
46#和47#分别指的是哪些楼层？
我的手机浏览器一个从不自动播放另一个总是自动播放。
46#指35楼，即那个只有隐藏的播放器。47#指45楼，即您最后的这个仿OK歌词代码。
195400 发表于 2022-9-23 09:59
那是不少，我只有20G每月最多用4、5个G，还是全家共用的。
老师，既然您能用JS仿卡拉OK歌词，那用卡拉OK歌词不更好吗？我用小熊卡拉OK歌词制作软件可以制作卡拉OK歌词。
寒冬残荷 发表于 2022-9-23 10:16
老师，既然您能用JS仿卡拉OK歌词，那用卡拉OK歌词不更好吗？我用小熊卡拉OK歌词制作软件可以制作卡拉OK歌 ...
这个只是仿卡拉OK匀速通过每个字，卡拉OK歌词不知道是什么形式，也许是每个字都有时间长度吧。
195400 发表于 2022-9-23 13:50
这个只是仿卡拉OK匀速通过每个字，卡拉OK歌词不知道是什么形式，也许是每个字都有时间长度吧。
是的，卡拉OK歌词是每个字有不同的长度，唱到哪个字，哪个字才变色。
195400 发表于 2022-9-23 13:50
这个只是仿卡拉OK匀速通过每个字，卡拉OK歌词不知道是什么形式，也许是每个字都有时间长度吧。
karaoke := CreateKaraokeObject;
karaoke.rows := 2;
karaoke.clear;
karaoke.songname :='往事只能回味 ';
karaoke.singer :='李丽霞';
karaoke.add('00:00.050', '00:10.000', '字幕编辑：华', '495,495,495,495,495,495');
karaoke.add('00:13.910', '00:20.280', '时光一逝永不回', '1370,440,1440,440,870,810,1000');
karaoke.add('00:20.660', '00:26.970', '往事只能回味', '440,1250,500,870,810,2440');
karaoke.add('00:28.160', '00:34.850', '忆童年时竹马青梅', '1310,440,1120,690,310,570,930,1320');
karaoke.add('00:35.220', '00:40.660', '俩小无猜日夜相随', '440,440,430,500,440,500,690,2000');
karaoke.add('00:42.150', '00:48.770', '春风又吹红了花蕊', '1370,440,1310,500,820,560,440,1180');
karaoke.add('00:49.420', '00:54.980', '你已经也添了新岁', '690,370,440,380,680,250,820,1930');
karaoke.add('00:56.550', '01:03.050', '你就要变心像时光难倒回', '1310,310,250,820,620,310,310,570,370,560,1070');
karaoke.add('01:03.570', '01:09.070', '我只有在梦里相依偎', '560,320,240,380,310,500,760,560,1870');
karaoke.add('01:19.610', '01:25.980', '时光一逝永不回', '1370,510,1310,560,810,810,1000');
karaoke.add('01:26.360', '01:32.670', '往事只能回味', '440,1310,560,880,740,2380');
karaoke.add('01:33.800', '01:40.230', '忆童年时竹马青梅', '1310,560,1060,690,380,560,940,930');
karaoke.add('01:40.920', '01:45.980', '俩小无猜日夜相随', '500,440,440,430,500,750,570,1430');
karaoke.add('01:48.040', '01:54.550', '春风又吹红了花蕊', '1380,500,1250,500,820,560,370,1130');
karaoke.add('01:55.170', '02:00.980', '你已经也添了新岁', '750,370,380,440,620,250,880,2120');
karaoke.add('02:02.360', '02:09.050', '你就要变心像时光难倒回', '1310,310,250,820,620,320,310,500,440,620,1190');
karaoke.add('02:09.490', '02:14.860', '我只有在梦里相依偎', '430,310,320,310,440,370,690,750,1750');
karaoke.add('02:44.880', '02:51.810', '春风又吹红了花蕊', '1430,440,1310,510,930,560,750,1000');
karaoke.add('02:52.190', '02:57.630', '你已经也添了新岁', '620,380,380,370,750,310,940,1690');
karaoke.add('02:59.190', '03:05.880', '你就要变心像时光难倒回', '1380,310,310,810,630,310,310,500,380,560,1190');
karaoke.add('03:06.280', '03:11.660', '我只有在梦里相依偎', '500,310,260,370,380,430,690,690,1750');
karaoke.add('03:13.410', '03:18.660', '我只有在梦里相依偎', '500,250,250,370,440,440,680,690,1630');
karaoke.add('03:20.470', '03:26.100', '我只有在梦里相依偎', '560,250,250,440,440,440,870,560,1820');