论坛 › 音乐沙龙 › 《神仙下凡间》 - 雪十郎

亦是金 发表于 2023-3-31 14:23

《神仙下凡间》 - 雪十郎

本帖最后由 亦是金 于 2023-3-31 22:07 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1860773">

<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: -310px;">

<style>
#papa {
      margin: auto;
      top: -83px;
      left: 0px;
        width: 1200px;
        height: 700px;
        background: url('https://s4.ax1x.com/2022/02/14/HyGgIJ.jpg') center/cover no-repeat;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        opacity: 1;
        z-index: 1;
}
#papa:hover
#mplayer { transition: .7s; opacity: .9; }
#vid {
      display: none;
      top: 200px;
      left: 0px;
        width: 1200px;
        height: 700px;
}
#canv {
        position: absolute;
        display: block;
        opacity: 1;
        animation: opa 20s infinite alternate linear;
}
#mplayer {
        position: absolute;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid white;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before,
#mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: white;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent white;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }

body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 800px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}

.tit { position: relative;width: 300px;height: 30px;top:20px;LEFT: -390px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:36px;">《神仙下凡间》 </span>
<span style="color:#3d46f7;"><span style="font-size:20px;">- 雪十郎</span></div>

<div style="position: relative;width: 500px;height: 50px;top:610px;LEFT: 1000px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>

</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <div id="mplayer"></div>
<div id="fg"></div>
<div data-lrc="亦是金在线音乐" id="lrc">亦是金在线音乐</div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1985659769" loop autoplay></audio>
<video id="vid"src="https://img.tukuppt.com/video_show/3664703/00/02/03/5b4f3c440b285.mp4" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:1350px; height: 700px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:0px;top:0px;"></video>

<style type="text/css">
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #fcf13d, #fc48e9, #fc3d5d);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 2.3em 微软简中圆;
        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 -1px0);
}
#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 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
《神仙下凡间》 - 雪十郎
作词 : 上官瑶儿/小啊/张世东
作曲 : 上官瑶儿/徐信
歌手：雪十郎
LRC歌词编辑：亦是金
● ● ● ● ● ●
本是神仙下凡间 不知人间悲与欢
不管多少心酸 终会烟消云散
一瓶烈酒配 一支香烟陪
逛遍这人世间 活得赛神仙
● ● ● ● ● ●
风吹月弯弯 花开一半半
虚度寻烈酒 醉里好贪欢
一世枉少年 不知愁与烦
任你一缕相思间 扶瑶上九天
大路条条宽 难解千千烦
世间恩与怨 且一刀两断
此生别红颜 逍遥做神仙
无欲无求即心安 浪荡人世间
我本是神仙下凡间 寻觅人间五月天
看遍万水和千山 看那桃花一片片
人生难得 世上走一遍
何不潇潇洒洒 逍遥山水间
本是神仙下凡间 不知人间悲与欢
不管多少心酸 终会烟消云散
一瓶烈酒配 一支香烟陪
逛遍这人世间 活得赛神仙
谁的苦酒敬月光 谁的真心喂豺狼
谁的梦想在流浪 谁的青春不迷茫
谁把热血染残阳 谁把诗集装行囊
谁把汗水熬成汤 谁把脚掌磨成钢
谁是我我是谁 时光变成了盗贼
惊扰少年英雄梦 掠走天真和无畏
爱过谁恨过谁 我们错过谁和谁
岁月犹如东流水 鲜衣怒马追不回
谁是我我是谁
大路条条宽 难解千千烦
世间恩与怨 且一刀两断
此生别红颜 逍遥做神仙
无欲无求即心安 浪荡人世间
我本是神仙下凡间 寻觅人间五月天
看遍万水和千山 看那桃花一片片
人生难得世上走一遍
何不潇潇洒洒 逍遥山水间
本是神仙下凡间 不知人间悲与欢
不管多少心酸 终会烟消云散
一瓶烈酒配 一支香烟陪
逛遍这人世间 活得赛神仙
本是神仙下凡间 寻觅人间五月天
看遍万水和千山 看那桃花一片片
人生难得世上走一遍
何不潇潇洒洒 逍遥山水间
本是神仙下凡间 不知人间悲与欢
不管多少心酸 终会烟消云散
一瓶烈酒配 一支香烟陪
逛遍这人世间 活得赛神仙
活得赛神仙
-- 谢谢欣赏 --

`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 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 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 mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.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); /*获得歌词数组*/
})();
</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("testImg"),
    button = document.getElementById("testBtn");
   
if (image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();
            this.value = '.';
      } else {
            image.stop();
            this.value = '';
      }
    };
}

</script>
<script>
(function(){

let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 40, ww, hh, 0, 0, ww + 480, hh + 290);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();

</script>

</td></tr></table>

小辣椒 发表于 2023-3-31 14:56

这个视频小按钮感觉挺好，手机可以看见视频背景

小辣椒 发表于 2023-3-31 14:57

谢谢分享精彩的制作{:4_187:}

亦是金 发表于 2023-3-31 15:16

小辣椒 发表于 2023-3-31 14:56
这个视频小按钮感觉挺好，手机可以看见视频背景

问好小辣椒！手机可以看见视频挺好的！{:4_187:}

亦是金 发表于 2023-3-31 15:17

小辣椒 发表于 2023-3-31 14:57
谢谢分享精彩的制作

谢谢欣赏！祝你欣赏愉快！{:4_187:}

小辣椒 发表于 2023-3-31 17:24

亦是金 发表于 2023-3-31 15:16
问好小辣椒！手机可以看见视频挺好的！

是的，要这个黑黑的视频代码我手机可以看见，不是每个视频都可以看见的

亦是金 发表于 2023-3-31 21:45

我特别喜欢黑黑老师这个小纽扣播放器！谢谢黑黑老师的好代码！{:4_191:}

冬天的雨 发表于 2023-4-1 14:27

这歌唱的很带劲{:4_178:}

冬天的雨 发表于 2023-4-1 14:27

问好亦是金，制作真美 谢谢分享{:4_187:}

红影 发表于 2023-4-2 19:57

神仙真会选地方，这些视频场景都是人间仙境呢。{:4_173:}欣赏亦是金老师好帖{:4_187:}

亦是金 发表于 2023-4-2 20:08

红影 发表于 2023-4-2 19:57
神仙真会选地方，这些视频场景都是人间仙境呢。欣赏亦是金老师好帖

哈哈哈，神仙有天眼，神仙下凡间挑的也是仙境呢！{:4_189:}问好红影！谢谢欣赏！{:4_187:}

红影 发表于 2023-4-3 15:44

亦是金 发表于 2023-4-2 20:08
哈哈哈，神仙有天眼，神仙下凡间挑的也是仙境呢！问好红影！谢谢欣赏！

看着这样的人间仙境，咱也跟着神仙开眼了呢。{:4_173:}

查看完整版本: 《神仙下凡间》 - 雪十郎