小辣椒 发表于 2024-1-8 23:00

梅花弄弄弄 TO：亚伦

<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 = '';
      }
      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())};
</script>

小辣椒 发表于 2024-1-8 23:01

亚伦这里就不能一键停止，我郁闷S，完全一样的代码

亚伦影音工作室 发表于 2024-1-9 10:01

小辣椒 发表于 2024-1-8 23:01
亚伦这里就不能一键停止，我郁闷S，完全一样的代码

最后：vid=document.querySelector('#vid');
var image= document.getElementById("Img");

mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause())<img src="static/image/smiley/default/sad.gif" smilieid="2" border="0" alt="" />image.play(),vid.play())};


<img src="static/image/smiley/default/sad.gif" smilieid="2" border="0" alt="" />这是哪来的？

亚伦影音工作室 发表于 2024-1-9 10:03

本帖最后由 亚伦影音工作室 于 2024-1-9 10:04 编辑

亚伦影音工作室 发表于 2024-1-9 10:01
最后：vid=document.querySelector('#vid');
var image= document.getElementById("Img");


正确的是；vid=document.querySelector('#vid');
var image= document.getElementById("Img");

mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause()) : (image.play(),vid.play())};

小辣椒 发表于 2024-1-9 15:32

亚伦影音工作室 发表于 2024-1-9 10:03
正确的是；vid=document.querySelector('#vid');
var image= document.getElementById("Img");



亚伦原因找到，我完全一样的代码，只是我下面比你少勾2个，你html发帖下面全部打钩的，现在我勾上就可以了，花潮没有打勾可以停止的

谢谢亚伦，让你浪费了许多时间的

小辣椒 发表于 2024-1-9 16:11

谢谢 liumang 是你查出这个原因的{:5_141:}

liumang 发表于 2024-1-11 17:09

小辣椒 发表于 2024-1-9 16:11
谢谢 liumang 是你查出这个原因的

不客气，你没有权限看不见这个情况
页: [1]
查看完整版本: 梅花弄弄弄 TO：亚伦