论坛 › 欢乐水吧 › 燃气灶播放器

亚伦影音工作室 发表于 2024-7-2 21:52

燃气灶播放器

本帖最后由 亚伦影音工作室 于 2024-7-18 15:34 编辑 <br /><br /><style>
#papa { margin: 140px 0 20px calc(50% - 781px); width: 1400px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height:700px;position:absolute;z-index: 1;cursor: pointer;}
#bjbs img{ width: 100%; height: 100%;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#lrc{left: 15%;top: 80%;}#lrcc {right:15%;top: 90%;}
#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 3em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background:repeating-linear-gradient(to right, #ff0000, lightgreen, snow, lightgreen, orange) 50%/200px 60px,var(--bg); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="papa">
<div id="bjbs"title="暂停/播放"><img id="Img" src="https://pic.imgdb.cn/item/645070a70d2dde57777c6af2.gif" alt="" /></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/70/66/23/dac92ed156f84bd4534dc27e01335a53/audio.mp3" autoplay loop></audio>

<script type="text/javascript">
bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
bjbs.onclick = () => aud.paused ? (aud.play(),image.play()) : (aud.pause(),image.stop());
var image= document.getElementById("Img");
</script>
<span id="lrcStr" style="visibility: hidden;">
再度重相逢 - 孙露
作词 : 伍佰/作曲 : 伍佰
再度重相逢 - 孙露
你说人生如梦
我说人生如秀
哪有什么不同
不都一样朦胧
朦胧中有你
有你跟我就已经足够
你就在我的世界
升起了彩虹
简单爱你心所爱
世界也变的大了起来
所有花都为你开
所有景物也为了你安排
我们是如此的不同
肯定前世就已经深爱过
讲好了这一辈子
再度重相逢
你说人生如梦
我说人生如秀
哪有什么不同
不都一样朦胧
朦胧中有你
有你跟我就已经足够
你就在我的世界
升起了彩虹
简单爱你心所爱
世界也变的大了起来
所有花都为你开
所有景物也为了你安排
我们是如此的不同
肯定前世就已经深爱过
讲好了这一辈子
再度重相逢
我们是如此的不同
肯定前世就已经深爱过
讲好了这一辈子
再度重相逢
</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;
                }
        }
});
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;
      };
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;
            }
      }
    };
}

</script>

红影 发表于 2024-7-2 22:46

这个有趣，还真的是煤气灶呢{:4_173:}

红影 发表于 2024-7-2 22:46

非常别致的播放器，给亚伦老师点赞{:4_199:}

老谟深虑 发表于 2024-7-3 07:06

         有意思的播放器，点赞！

梦油 发表于 2024-7-3 09:21

燃气灶上火焰颜色的不断变化还挺真实的。

朵拉 发表于 2024-7-3 09:27

亚伦老师有创意，点赞{:4_178:}

查看完整版本: 燃气灶播放器