论坛 › 欢乐水吧 › 喝着雪花闯天涯

亚伦影音工作室 发表于 2024-5-3 18:14

喝着雪花闯天涯

本帖最后由 亚伦影音工作室 于 2024-5-3 18:14 编辑 <br /><br /><style>
#papa{margin: 140px -300px;
        width: 1164px;
        height: 620px;
        background:url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345; }
#picBlk {
    width: calc(4 * var(--picWidth));
    height: var(--picHeight);
    position: absolute;
    left: 0px;
    animation: mleft 30s linear infinite;
}

#picBlk img {
    width: var(--picWidth);
    height: var(--picHeight);
    float: left;
}

#oBlk {
    width: 100%;
    height: var(--picHeight);
    overflow: hidden;
    position: relative;
    margin: 0 0 ;

    --picWidth: 1164px;
    --picHeight:100%;
}

@keyframes mleft {
    to {
      left: calc(-2 * var(--picWidth));
    }
}

#picBlk img:nth-child(even) {
    transform: scaleX(-1);
}
#dt { position: absolute; width: 1164px; height: 420px;top: -12px;left: -40px; }
#dt img{height: 100%;width: 100%;}
#bfq {top:20%; left:40%;z-index: 21;
position: absolute;overflow: hidden;transform:scale(0.4);
width: 100%;
height: 100%;}
#pic {top:21%; left:2%;z-index: 20;
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
border:2px solid #000000;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')no-repeat 30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg); }
}

#mplayer {position: absolute;
      top:2%; left:0%;z-index: 21;
      width: 500px;
      height: 500px;
background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat 280px 22px/200px 380px;
      cursor: pointer;
}
.pink { transform:rotate(-2deg);transform-origin: 100% 0%;margin: 0px 0px;}
.purple { transform-origin: 85% 0%;margin: 12px -15px;transform:rotate(-16deg);}
#tmsg {position: absolute;z-index: 20;
      font: normal 25px sans-serif;
      color: #ffffff;
         top:500px;
      left:14%;}
#prog {position: absolute;z-index: 91;
      width: 80%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
         margin:0px 10%;
         border-radius: 2px;}

#lrc{left: 10%;top: 75%;}#lrcc {right:10%;top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 2.5em 华文新魏;color: #000078;white-space: pre;-webkit-background-clip: text;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);z-index: 20;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa" >
<div id="oBlk">
<div id="picBlk">
    <img src="https://pic.imgdb.cn/item/66135cb668eb935713632f70.jpg">
    <img src="https://pic.imgdb.cn/item/66135cb668eb935713632f70.jpg">
    <img src="https://pic.imgdb.cn/item/66135cb668eb935713632f70.jpg">
    <img src="https://pic.imgdb.cn/item/66135cb668eb935713632f70.jpg">
</div>
</div>
<span id="fullscreen">全屏</span>
<div id="dt"> <img id="Img" src="https://pic.imgdb.cn/item/641a8a2fa682492fcc039198.gif" alt="" /></div>
<audio id="aud" src="https://s10.krakenfiles.com/uploads/20-04-2024/xhA55hKhWj/music.m4a" autoplay loop ></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

<divid="prog"></div>
        <div id="bfq" >
<div id="pic" ></div>
<div id="mplayer" class="pink"></div>
<div id="tmsg">00:00 | 00:00</div>
</div>

</div>

<script >
picBlk.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => picBlk.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>picBlk.style.animationPlayState = 'paused');


mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

pic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>pic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>pic.style.animationPlayState = 'paused');

prog.onclick = (e) => {aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 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;
      };
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<span id="lrcStr" style="visibility: hidden;">
喝着雪花闯天涯
我喝着雪花闯天涯 无惧那风沙
我伸手摘了那晚霞 山河开红花
我喝着雪花闯天涯 醉了也潇洒
这人间天大地也大 风大雨也大
野草任风刮呀刮 枯了一春夏
小河任水哗啦啦 流往别人家
星子的眸眨呀眨 诉说着情话
疯了的雨滴滴答 淋湿我的马
我喝着雪花闯天涯 无惧那风沙
我伸手摘了那晚霞 山河开红花
我喝着雪花闯天涯 醉了也潇洒
这人间天大地也大 风大雨也大

作词：宋普照
作曲：灰色幽默
演唱：大潞
LRC编辑：无忧女

野草任风刮呀刮 枯了一春夏
小河任水哗啦啦 流往别人家
星子的眸眨呀眨 诉说着情话
疯了的雨滴滴答 淋湿我的马
我喝着雪花闯天涯 无惧那风沙
我伸手摘了那晚霞 山河开红花
我喝着雪花闯天涯 醉了也潇洒
这人间天大地也大 风大雨也大
我喝着雪花闯天涯 无惧那风沙
我伸手摘了那晚霞 山河开红花
我喝着雪花闯天涯 醉了也潇洒
这人间天大地也大 风大雨也大
我喝着雪花闯天涯 无惧那风沙
我伸手摘了那晚霞 山河开红花
我喝着雪花闯天涯 醉了也潇洒
这人间天大地也大 风大雨也大

</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let arr="";
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        lrca=lrcAr;
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

</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");
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

老谟深虑 发表于 2024-5-3 18:30

          欣赏老师的精美音画，点赞！

小辣椒 发表于 2024-5-3 22:05

亚伦辛苦，一天二个帖{:4_187:}

小辣椒 发表于 2024-5-3 22:05

这个一键停止的播放器也是挺漂亮的

红影 发表于 2024-5-3 22:45

场景很开阔，歌曲也很有趣。欣赏亚伦精美好帖{:4_199:}

查看完整版本: 喝着雪花闯天涯