亚伦帮我看看错在哪里
本帖最后由 小辣椒 于 2024-1-7 20:06 编辑 <br /><br /><style>#papa {margin: 150px -300px;
width: 1440px;
height: 720px;
background:url('https://xlaj.cn/assets/file/zp/20240106015310.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: 37%; height: 39%; top:12.5%; left:9%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; }
#dt{position: absolute;top:0%; left:0%;width: 100%;height:100%;z-index:-1;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:81.5%; left:8%;
bottom: 25px;
width: 20px;
height: 20px;background:#cccccc;
border: 2px solid #000000;
border-radius: 50%;
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: #000000;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 5px;
border-width: 5px 8px;
border-color: transparent transparent transparent #000000;
opacity: var(--disp1);
}
#mplayer::after {
width: 1px;
height: 10px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 10px sans-serif;
color: #ffffff;
top:81%;
left:41%;}
#prog {position: absolute;z-index: 91;
width: 19%;
height: 1.0%;
cursor: pointer;
top:82.7%;
box-shadow: 0px 0px 1px 1px #ffffff;
left:18%;
border-radius: 3px;}
#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%);}}
#musickrc{width:30%;line-height:25px;position: absolute;position: absolute;left:12%;top:40%;z-index: 11;filter:drop-shadow(#ffffff 0.8px 0 0)drop-shadow(#ffffff 0 0.8px 0)drop-shadow(#ffffff -0.8px 0 0) drop-shadow(#ffffff 0 -0.8px0);}
#musickrc span {display:block;text-align:center; }
</style>
<div id="papa">
<div id="dt"><img id="Img" src="https://xlaj.cn/assets/file/zp/20240106210247.gif" width="100%" height="100%"></div>
<video id="vid"src="https://lk999.oss-cn-guangzhou.aliyuncs.com/fengh.mp4" muted autoplay loop></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divid="musickrc" >
<p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:隶书;font-size: 25px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:隶书;font-size: 25px;"></P>
</div>
<div id="testImg"><div id="bt"><div id="klok"> </div></di></di>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/06/mhnnn.mp3" loop autoplay></audio>
<script >
var songkrc =`梅花弄弄弄
词：言亭 曲：马博
帖赠：亚伦
LRC编辑：小辣椒
山野间蓝的天亦空空如也
满山得红梅花开的多娇艳
牵着你的小手一起看蓝天
云朵变成你的笑脸
梅花它虽不及玫瑰的美艳
它却是山野中最强的花仙
你的冷傲像孤梅那样的干脆
想把你保护把你陪
梅花弄弄弄弄弄弄弄弄
我们相识在寒冷的冬天
就算到海角就算到天边
我们一起谱写这诗篇
梅花弄弄弄弄弄弄弄弄
我们相遇在梅海的山间
问情是何物叫人心相连
我们一起牵手到永远.。
山野间蓝的天亦空空如也
满山的红梅花开的多娇艳
牵着你的小手一起看蓝天
云朵变成你的笑脸
梅花它虽不及玫瑰的美艳
它却是山野中最强的花仙
你的冷傲像孤梅那样的干脆
想把你保护把你陪
梅花弄弄弄弄弄弄弄弄
我们相识在寒冷的冬天
就算到海角就算到天边
我们一起谱写这诗篇
梅花弄弄弄弄弄弄弄弄
我们相识在梅海的山间
问情是何物叫人心相
我们一起牵手到永远
梅花弄弄弄弄弄弄弄弄
我们相识在寒冷的冬天,
就算到海角就算到天边
我们一起谱写这诗篇
梅花弄弄弄弄弄弄弄弄
我们相遇在梅海的山间
问情是何物叫人心相连
我们一起牵手到永远
谢谢欣赏
`;
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 = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(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());
})();
/*结束*/
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #111111 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;
};
/*结束*/
/*控制歌词颜色*/
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');
/*结束*/
</script>
<style>
#bt{ width: 15%; height: 50px;color: #00ff00; position: absolute; left:23%;top:5%;font-size: 22px; font-family:隶书;z-index: 21; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 50%;}
}
#klok{width: 560px; height: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#880000;
background-image:linear-gradient(50deg, #ff0000 40%, #00ff80 50%, #fff000 10%, #000078 60%);
background-repeat:no-repeat;
line-height:35px;background-position: 0px 0;
-webkit-animation:loop 1slinearinfinite ;}
@-webkit-keyframes loop{
50%{background-position: -400px 0;filter:hue-rotate(0deg)contrast(120%)brightness(150%);}
}
</style>
<script>
/*控制动画*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.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 = '';image1.style.opacity = '';image2.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;
}
}
};
}
vid=document.querySelector('#vid');
var image= document.getElementById("Img");
var image1= document.getElementById("Img1");
var image2= document.getElementById("Img2");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause(),image1.stop(),image2.stop()):(image.play(),vid.play(),image1.play(),image2.play())};
</script>
谢谢亚伦，花潮我预览是好的，本来想歌词换了再发的，这里你先看看我错误在哪里 分享现在歌词也是没有出来了 本帖最后由 亚伦影音工作室 于 2024-1-7 10:39 编辑
小辣椒 发表于 2024-1-7 00:47
谢谢亚伦，花潮我预览是好的，本来想歌词换了再发的，这里你先看看我错误在哪里 ...
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;
}
}
};
}
vid=document.querySelector('#vid');
var image= document.getElementById("Img");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause()):(image.play(),vid.play())}; 好的，我再修改代码再测试
页:
[1]