亦是金 发表于 2024-4-2 13:38

《爱从未离开》 - 李 青（套用小辣椒《一袖云》频谱播放器代码）

本帖最后由 亦是金 于 2024-4-2 23:33 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2090009">

<style>
#papa {
        margin: 150px 0 0 calc(50% - 770px);
        width: 1353px;
        height: 760px;
        background:#000000 url(' ')no-repeat center / cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;
        overflow: hidden;
      border-radius: 20px;
        z-index: 12345;       
}

#vid {
        position: absolute;
        top: 0px;
        left: -50px;
        width: 110%;
        height: 112%;
        object-fit: cover;
        mix-blend-mode: lighten;
        opacity: .30;
}
#dt{
        position: absolute;
        top:0%;
        left:0%;
        width: 100%;
        height:100%;
        z-index:-1;
}
#dt3{
        position: absolute;
        width: 73px;
        height: 14px;
        top: 550px;
        left: 350px;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {
        position: absolute;
        top:92.3%;
        left:74.8%;
        bottom: 25px;
        width: 22px;
      height: 22px;
background:#666666;
border: 2px solid #ffffff;
        border-radius: 50%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0;
        --disp2: 1;
      z-index: 80;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #ffffff;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 4px;
        height: 3px;
        left: 7.7px;
        border-width:6px 6px;
        border-color: transparent transparent transparent #fff600;
        opacity: var(--disp1);
}/*播放按钮设置*/
#mplayer::after {
        width: 2px;
        height: 13px;
        left: 6.7px;
      color: #FFFFFF;
        border-width: 0 3px 0 3px;
        opacity: var(--disp2);
}/*暂停按钮设置*/
@keyframes opa { to {opacity: 1;} }
#tmsg {
        position: absolute;
        font: normal 4px sans-serif;
      color: #FFFFFF;
        top:88.5%;
      left:24.0%;
        z-index: 91;
}/*歌曲时长设置*/

#prog {
        position: absolute;
      width: 49.5%;
      height: 0.3%;
      cursor: pointer;
        top:93.3%;
      left:23.5%;
        box-shadow: 0px 0px 1px 1px #ffffff;
        border-radius: 2px;
        z-index: 91;
}/*播放进度条外框设置*/

#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:40%;
        line-height:50px;
        position: absolute;
       
        left:30%;
        top:76%;
        z-index: 11;
        filter:drop-shadow(#ffffff 0.1px 0 0)drop-shadow(#ffffff 0 0.8px 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://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/aicwlk2.gif" width="100%" height="100%"></div>

<img id="dt3" src="59.jpg" alt="" />


<video id="vid"src="https://img.tukuppt.com/video_show/7165162/00/20/67/5f33b039ec172_10s_big.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:#fc76ee; text-align:left;font-weight: ;font-family:微软简中圆;font-size: 30px;" ></P>
<P id="musickrc02"style="color:#27eafb;text-align:right;font-weight: ;font-family:微软简中圆;font-size: 22px;"></P>
</div>
<div id="testImg"><div id="bt"><div id="klok"> </div></di></di>
</div>
<audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/fc/24/01/18/24011821324745438032.mp3" loop autoplay></audio>

<script >
var songkrc =`《爱从未离开》 - 李 青
词：路延成 | 曲：李 青
编曲：李德奎
演唱：李 青
歌词编辑：亦是金
- - - - - -
我送你到路口 你转身离开
仿佛只有一秒 你已千里之外
来不及拥抱 来不及告白
你的背影告诉我 爱已不在
爱你在花开 转眼秋天来
明明终日厮守 你心依旧徘徊
是我不温柔 还是太依赖
你怎么忍心对我说要分开
爱从未离开 一直与你同在
缘分捆住谁 谁能解得开
守住一颗心 守着一份期待
没有一个春天 百花不盛开
爱从未离开 一直与你同在
我爱你在心 何必总表白
笑中带着泪 乐中也有哀
喜怒哀乐 才是有滋有味的爱
- - - - - -
爱你在花开 转眼秋天来
明明终日厮守 你心依旧徘徊
是我不温柔 还是太依赖
你怎么忍心对我说要分开
爱从未离开 一直与你同在
缘分捆住谁 谁能解得开
守住一颗心 守着一份期待
没有一个春天 百花不盛开
爱从未离开 一直与你同在
我爱你在心 何必总表白
笑中带着泪 乐中也有哀
喜怒哀乐 才是有滋有味的爱
爱从未离开 一直与你同在
缘分捆住谁 谁能解得开
守住一颗心 守着一份期待
没有一个春天 百花不盛开
爱从未离开 一直与你同在
我爱你在心 何必总表白
笑中带着泪 乐中也有哀
喜怒哀乐 才是有滋有味的爱
离开的是你的等待
- - 谢谢欣赏 - -

`;

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, #cccccc, #fff600, #f52c60 ' + aud.currentTime / aud.duration * 100 + '%, #fff 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, #ff00ff 40%, #ffffff 50%, #fff000 10%, #ff00ff 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>
</td></tr></table>

小辣椒 发表于 2024-4-2 19:49

前辈太棒了·~~

小辣椒 发表于 2024-4-2 19:50

建议前辈按钮外面可以加个圆，会更加漂亮的

小辣椒 发表于 2024-4-2 19:51

{:5_150:}{:5_150:}{:5_150:}

亦是金 发表于 2024-4-2 20:29

小辣椒 发表于 2024-4-2 19:49
前辈太棒了·~~

问好小辣椒！谢谢你的代码！{:5_147:}

亦是金 发表于 2024-4-2 20:31

小辣椒 发表于 2024-4-2 19:50
建议前辈按钮外面可以加个圆，会更加漂亮的

好的，我试试改正！{:5_147:}

liumang 发表于 2024-4-3 13:33

亦是金老师的制作画面元素多，播放器好看{:5_150:}

liumang 发表于 2024-4-3 13:35

小辣椒的一袖云我还没有看见过，怎么没有发微风@小辣椒

liumang 发表于 2024-4-3 13:36

感谢亦是金老师的精彩制作{:5_124:}

小辣椒 发表于 2024-4-3 23:29

liumang 发表于 2024-4-3 13:35
小辣椒的一袖云我还没有看见过，怎么没有发微风@小辣椒

哈哈，是的，我还没有发的
页: [1] 2
查看完整版本: 《爱从未离开》 - 李 青（套用小辣椒《一袖云》频谱播放器代码）