请教亚伦老师（代码照搬为什么不显示歌词）
本帖最后由 焱鑫磊 于 2023-10-27 21:39 编辑 <br /><br /><style>#papa {margin: 100px -280px;
width: 1164px;
height: 640px;
background:url(https://pic.imgdb.cn/item/65378517c458853aef7deb87.jpg)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0.1s all ease;}
#gj {top:35%; left:-35%;z-index: 20;
position: absolute;overflow: hidden;transform:scale(0.3);
width: 100%;
height: 100%;}
#xzcp {top:25%; left:5%;z-index: 20;
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg);opacity: 1; }
}
#mplayer {position: absolute;
top:2%; left:0%;z-index: 20;
width: 500px;
height: 500px;
cursor: pointer;
}
.pink { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover; transform-origin: 75% 0%;margin: 25px -32px;transform:rotate(-20deg);}
#tmsg {position: absolute;z-index: 91;
font: normal 15px sans-serif;
color: #000000;
top:93.5%;
left:82%;}
#prog {position: absolute;z-index: 91;
width: 67%;
height: 2px;
cursor: pointer;
top:95%;
left:14%;
border-radius: 2px;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95%; left:calc(95% - 15px);font: normal 1.5em/0em 楷体;color:#000000; opacity: 1; cursor: pointer; z-index: 111}
#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: 70%; width: var(--w); overflow: hidden; color: #000000; position: absolute; left:62%;top:90%;font-size: 16px; z-index: 91;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 26s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
.stop #bt{animation-play-state: paused;}
#musickrc{width:80%;line-height:35px;position: absolute;position: absolute;color:#000080;left:10%;top:80%;z-index: 11;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);}
#musickrc span {display:block;text-align:center; }
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;mix-blend-mode:lighten;}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="Img0" ><span id="bt">曾经的誓言成了笑话(DJ 版)-李英</span></div>
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif" width="100%" height="100%"></div>
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="gj" >
<div id="xzcp" ></div>
<div id="mplayer" class="pink"></div>
</div>
<divid="musickrc" >
<divid="klok" ><p id="musickrc01"style="color:#ffffff; text-align:center;font-family:华文隶书;font-size: 40px;" ></P></div>
<P id="musickrc02"style="color:#ffffff;text-align:right;font-weight: ;font-family:华文隶书;font-size: 0px;"></P>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music306732522.mp3" loop autoplay></audio>
<script >
var songkrc =`曾经的誓言成了笑话(DJ 版)-李英
词：三力
曲：三力
编曲：李胜华
混音：冯鑫阳
监制：谢飞
厂牌：三力音乐
Op：星汉马文化
望着窗外纷飞飘落的雪花
勾起我心中深藏的牵挂
曾经一往情深放不下的他
如今你在他乡一切还好吗
好想对你诉说心中的牵挂
熟悉的电话却换了号码
想起你曾对我说过的情话
泪水悄然无声滑落在脸颊
无情的雪花无情地飘洒
洒落一地冰冷的泪花
曾经的誓言已成了笑话
散落天涯留下难愈的伤疤
无情的寒风无情地刮
刮不走我多余的牵挂
好想再问你还爱着我吗
却再也收不到想要的回答
好想对你诉说心中的牵挂
熟悉的电话却换了号码
想起你曾对我说过的情话
泪水悄然无声滑落在脸颊
无情的雪花无情地飘洒
洒落一地冰冷的泪花
曾经的誓言已成了笑话
散落天涯留下难愈的伤疤
无情的寒风无情地刮
刮不走我多余的牵挂
好想再问你还爱着我吗
却再也收不到想要的回答
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.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(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var j= 0; j < lyric.length; j++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(j+1==lyric.length){ document.getElementById("musickrc01").innerHTML = lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};};
/*暂停 播放按钮*/
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
/*结束*/
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg,#eeeeee,#eeeeee,#eeeeee ' + aud.currentTime / aud.duration * 100 + '%, #000000 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() { aud.paused ? vid.pause(): vid.play() };
/*结束*/
/*控制歌词颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/
/*控制文字颜色*/
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
/*结束*/
xzcp.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>xzcp.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>xzcp.style.animationPlayState = 'paused');
</script>
<style>
#klok{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#ffffff;
background-image:linear-gradient(0deg, #ff0000 50%, #fff000 40%, #00ff00 60%);
background-repeat:no-repeat;
-webkit-animation:loop 4slinearinfinite ;}
@-webkit-keyframes loop{
50%{background-position: -800px 0;filter:hue-rotate(0deg)contrast(120%)brightness(350%);}
}
</style>
<style>
.photo {width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top:0px; left:0px;filter:contrast(120%)brightness(80%);
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round{0% {opacity: 1;-webkit-transform:translate(30%,0%)perspective(5px)scale(1) rotateY(-40deg);}
6% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1) ;}
7% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1) ;}
13% {opacity: 1;-webkit-transform:translate(-30%,0%)scale(1)perspective(5px) rotateY(45deg);}
14% {opacity: 0;-webkit-transform:translate(-30%,0%)scale(1)perspective(5px) rotateY(45deg);}
}
.photo:nth-child(1) {animation-delay: 84s;background: url('https://img-qn.51miz.com/preview/element/00/01/33/20/P-1332073-5C9607BD.png')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 78s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312352-E506D784.png)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 72s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/17/P-1311727-040363C5.png)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 66s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/17/P-1311728-7F39962B.png)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 60s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312352-E506D784.png)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 54s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312353-7B4AD9E1.png)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 48s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312355-659BD8DC.png)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313154-3807C065.png)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 36s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/14/P-1311459-35C9504D.png)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 30s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313163-D3AC7269.png)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 24s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313165-A3FD1305.png)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 18s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312358-897681D1.png)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 12s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313157-AA2D045C.png)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 6s;background: url('https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313158-3C9ABEF0.png')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://img-qn.51miz.com/preview/element/00/01/31/26/P-1312615-B88B9882.png')no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
</style>
<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
var image0 = document.getElementById("Img0");
let mState = () => aud.paused ? (image.classList.add('stop'),image0.classList.add('stop')):(image.classList.remove('stop'),image0.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
</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 = '';
}
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("Img");
mplayer.onclick =function() { aud.paused ? (image.stop()):(image.play())};
/*结束*/
</script> 本帖最后由 亚伦影音工作室 于 2023-10-26 22:53 编辑
真的无语了，原因不明！把这串代码换上！
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.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(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
再加上这段
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play(); 再不行删掉 my_audio.play(); 不懂，跟着看看学习{:4_204:}
我不懂代码！我是将代码逐段替换，找到问题所在的！{:4_189:} 亚伦影音工作室 发表于 2023-10-26 23:00
再不行删掉 my_audio.play();
老师：照做后还是不行。奇怪了，复制代码发表会出错。试过多次了。 本帖最后由 焱鑫磊 于 2023-10-27 09:18 编辑
亦是金 发表于 2023-10-26 23:31
朋友：代码里找不到lyric<i>。就是中括号哟。 亚伦影音工作室 发表于 2023-10-26 23:00
再不行删掉 my_audio.play();
老师：都照做了，还是老样子。{:4_201:} 焱鑫磊 发表于 2023-10-27 09:08
朋友：代码里找不到lyric。就是中括号哟。
你的电脑能自的修改{:4_189:} 亚伦影音工作室 发表于 2023-10-27 09:32
你的电脑能自的修改
哦，难怪了。 本帖最后由 亦是金 于 2023-10-27 09:46 编辑 <br /><br />将歌词后面的第二段代码改为这样就好了！
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; 亦是金 发表于 2023-10-27 09:41
本帖最后由 亦是金 于 2023-10-27 09:46 编辑 将歌词后面的第二段代码改为这样就好了！
var my_audio = ...
朋友：试过了。false也不显示了。{:4_201:} 起个网名好难 发表于 2023-10-27 18:24
本帖最后由 起个网名好难 于 2023-10-27 18:25 编辑
朋友：还是没歌词。{:4_201:} 焱鑫磊 发表于 2023-10-27 18:26
朋友：还是没歌词。
同一页面受到前面的代码干扰，另开一帖或待翻页后再试 焱鑫磊 发表于 2023-10-27 18:26
朋友：还是没歌词。
相互影响了{:5_102:}
焱鑫磊 发表于 2023-10-27 18:26
朋友：还是没歌词。
6#正解， 不过有两处这样的问题。 亦是金 发表于 2023-10-27 09:41
本帖最后由 亦是金 于 2023-10-27 09:46 编辑 将歌词后面的第二段代码改为这样就好了！
var my_audio = ...
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var j= 0; j < lyric.length; j++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(j+1==lyric.length){ document.getElementById("musickrc01").innerHTML = lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};};
起个网名好难 发表于 2023-10-27 18:38
6#正解， 不过有两处这样的问题。
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var j= 0; j < lyric.length; j++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(j+1==lyric.length){ document.getElementById("musickrc01").innerHTML = lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};};
页:
[1]