论坛 › 欢乐水吧 › 花僮：一半疯了一半算了(粤语版)最新流行

亚伦影音工作室 发表于 2023-3-28 23:14

花僮：一半疯了一半算了(粤语版)最新流行

本帖最后由 亚伦影音工作室 于 2023-3-28 23:20 编辑 <br /><br /><style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background:#000000 url('') center/cover no-repeat;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#dt{position: absolute;top:-15px; left:4%;z-index: 2;
        width:100px;
        height:100px; transition: .3s all ease;/*一定要加上不然看着突兀*/}
#vid { display: none; }
#canv {position: absolute;
        display: block;
        right: 0px;
        top: 0px;
        border-radius: 0%;
        opacity: 1;
        animation: opa 0s infinite alternate ;
}
#mplayer {
        position: absolute;z-index: 4;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid #cccccc;
        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: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }


#fg{width: 100%;height: 100%;top:0px; left:0px;position: absolute; z-index: 1;animation: slider 10s linear infinite ;opacity: 1;}

@keyframes slider {0% {background: linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);} 100%{background: linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);} }

</style>

<div id="papa">
        <canvas id="canv"></canvas>
<div id="fg">
<div id="rotate-words">
<div>一半疯了一半算了 <br />
<span>(粤语版)</span></div>

<div>演唱：花僮<br />
<span>编曲：关剑</span></div>

<div>曲：花僮<br />
<span>词：陈钰海</span></div>

<div>出品：亚伦影音工作室<br />
<span>Produced by: Aaron Studios</span></div>

</div>
<div id='dt'><img id="testImg" src="https://pic.imgdb.cn/item/64230300a682492fcc2cfff0.gif" width="100%" height="100%"></div>


</div>


        <divid="testBtn"><div id="mplayer"></div></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music266878142.mp3" loop autoplay></audio>
<video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/sp/19/07/04/19070419200027581743.mp4" loop autoplay muted></video>

<script>
(function(){
let ctx = canv.getContext('2d');

let ww = canv.width = 1164, hh = canv.height =620;

let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);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());

fg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>fg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>fg.style.animationPlayState = 'paused');
})();
</script>
<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 80%;
        font:normal 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 = `
一半疯了一半算了(粤语版)-花僮
词：陈钰海
曲：花僮
编曲：关剑
和声：宋马超
混音：宋马超
录音：盼得音乐录音棚
制作统筹：姚康康
制作人：亚伦
出品人：亚伦
OP：亚伦影音工作室
谁亦有过盛开心里希望
亦曾满载信念追赶于远方
名利叫我迷惘
现实多肮脏
渐把真心去换成伪装
笑道生死都有命
别理他风声雨声
纸醉金迷也终于一天冷清
人在世 半是运气 半是注定
成王败寇岁月证
不过一刹似流萤
雪月风花中进睡
弹指间光阴似水
谁曾年少
春风得意
舍我有谁
无奈我
半是大醉
半是眼泪
情仇恨爱里徘徊
醒觉以后皆梦碎
谁亦有过盛开心里希望
亦曾满载信念追赶于远方
名利叫我迷惘
现实多肮脏
渐把真心去换成伪装
笑道生死都有命
别理他风声雨声
纸醉金迷也终于一天冷清
人在世 半是运气 半是注定
成王败寇岁月证
不过一刹似流萤
雪月风花中进睡
弹指间光阴似水
谁曾年少
春风得意
舍我有谁
无奈我
半是大醉
半是眼泪
情仇恨爱里徘徊
醒觉以后皆梦碎
笑道生死都有命
别理他风声雨声
纸醉金迷也终于一天冷清
人在世 半是运气 半是注定
成王败寇岁月证
不过一刹似流萤
雪月风花中进睡
弹指间光阴似水
谁曾年少
春风得意
舍我有谁
无奈我
半是大醉
半是眼泪
情仇恨爱里徘徊
醒觉以后皆梦碎
`;

/*变量 ：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>
<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
padding:20% 0;
font-size:3.8em;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#000000;
text-transform:lowercase;
opacity:0.8;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 48s linear 2 0s;
}

@keyframes rotate-word {
    0% { opacity: 0;transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;transform: translateX(0);filter:blur(0px);transform:scale(.7)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
</style>
<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>

庶民 发表于 2023-3-29 06:14

很有特色的，精美。

红影 发表于 2023-3-29 09:21

亚伦老师厉害，速度真快，又是一个新帖。视频漂亮，歌词同步准确，歌曲好听。好美的帖子{:4_199:}

红影 发表于 2023-3-29 09:22

最新流行歌曲抢先欣赏。欣赏亚伦老师好帖{:4_187:}

查看完整版本: 花僮：一半疯了一半算了(粤语版)最新流行