论坛 › 欢乐水吧 › 酒干倘卖无 （学习帖黑黑老师的这是什么 花）

梦江南 发表于 2024-11-13 13:24

酒干倘卖无 （学习帖黑黑老师的这是什么 花）

本帖最后由 梦江南 于 2024-11-14 08:05 编辑 <br /><br /><style>
#papa {
        margin: 120px-358px;
        width: 1300px;
        height:640px;
        box-shadow: 1px 1px 0px #000;
background:lightgreenurl('https://pic.imgdb.cn/item/6734231bd29ded1a8c2a35f9.jpg')no-repeat center/cover;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#canv {
        position: absolute;
        display: block;
        position: relative;
        cursor: pointer;
        z-index: 2;
}
#vid { display: none; }

#mypic {top:68%; left:22%;z-index: 4;
position: absolute;
width: 160px;
height: 160px;
cursor: pointer;
animation: spin 10s infinite linearvar(--state);
--state: paused;
}
@keyframes spin {0% { transform: rotate(360deg); }
}

.wenzi { position: absolute; left: 30px; top: 30px; z-index: 4; color: pink; font: bold 30px/30px 'FangSong',serif;opacity: .8; }

#papa:hover #fullscreen { display:block ;}


#fullscreen { position: absolute; top:10%; left:180%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 4}
</style>

<div id="papa">
<span id="fullscreen"></span>
        <canvas id="canv"></canvas>
       
        <video id="vid" src=".mp4" autoplay loop muted></video>
        <img id="mypic" src="https://pic.imgdb.cn/item/673423b1d29ded1a8c2adc68.png
" alt="" />
      <div class="wenzi"> </div>

<div data-lrc=" " id="lrc"> </div>

</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=34928667.mp3

" autoplay loop></audio>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? (mypic.style.setProperty('--state', 'paused'), vid.pause()) : (mypic.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</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: 85%;
        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 = `
作词 : 罗大佑/侯德健
作曲 : 侯德健
编曲 : 侯德健
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
多么熟悉的声音
陪我多少年风和雨
从来不需要想起
永远也不会忘记
没有天哪有地
没有地哪有家
没有家哪有你
没有你哪有我
假如你不曾养育我
给我温暖的生活
假如你不曾保护我
我的命运将会是什么
是你抚养我长大
陪我说第一句话
是你给我一个家
让我与你共同拥有它
虽然你不能开口说一句话
却更能明白人世间的黑白与真假
虽然你不会表达你的真情
却付出了热忱的生命
远处传来你多么熟悉的声音
让我想起你多么慈祥的心灵
什么时候你才回到我身旁
让我再和你一起唱
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
多么熟悉的声音
陪我多少年风和雨
从来不需要想起
永远也不会忘记
没有天哪有地
没有地哪有家
没有家哪有你
没有你哪有我
假如你不曾养育我
给我温暖的生活
假如你不曾保护我
我的命运将会是什么
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干倘卖无
酒干了倘卖无

`;
/*变量 ：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); /*获得歌词数组*/
})();


let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

起个网名好难 发表于 2024-11-13 13:53

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

视频的链接是写漏了还是有意这么做的？

起个网名好难 发表于 2024-11-13 13:58

好像有从其他地方复制来的多余代码，帖子版面被破坏了。

愤怒的葡萄 发表于 2024-11-13 14:26

这是一首老歌啊，酒干倘卖无

杨帆 发表于 2024-11-13 14:30

好听，谢谢梦江南友友分享{:4_204:}

梦江南 发表于 2024-11-13 16:00

起个网名好难 发表于 2024-11-13 13:53
视频的链接是写漏了还是有意这么做的？

这个视频没有合适的就不用 了。

梦江南 发表于 2024-11-13 16:01

起个网名好难 发表于 2024-11-13 13:58
好像有从其他地方复制来的多余代码，帖子版面被破坏了。

刚才有事出去没有看，现在就好了。

梦江南 发表于 2024-11-13 16:07

愤怒的葡萄 发表于 2024-11-13 14:26
这是一首老歌啊，酒干倘卖无

是的，《酒干倘卖无》是一首80年代从台湾传遍华夏大地的歌曲,在全国各地区广为传唱。

《酒干倘卖无》是电影《搭错车》的主题曲，由歌手苏芮演唱。

梦江南 发表于 2024-11-13 16:07

杨帆 发表于 2024-11-13 14:30
好听，谢谢梦江南友友分享

问好杨帆，谢谢欣赏支持。

起个网名好难 发表于 2024-11-13 16:08

梦江南 发表于 2024-11-13 16:01
刚才有事出去没有看，现在就好了。

是好了

愤怒的葡萄 发表于 2024-11-13 16:09

梦江南 发表于 2024-11-13 16:07
是的，《酒干倘卖无》是一首80年代从台湾传遍华夏大地的歌曲,在全国各地区广为传唱。

《酒干倘卖无》 ...

这歌挺有名的，但我忘记原创歌手是谁了？

梦江南 发表于 2024-11-13 16:10

起个网名好难 发表于 2024-11-13 16:08
是好了

谢谢。{:4_204:}

樵歌 发表于 2024-11-13 16:23

歌好听，字非常有特色。{:4_187:}

起个网名好难 发表于 2024-11-13 16:40

愤怒的葡萄 发表于 2024-11-13 16:09
这歌挺有名的，但我忘记原创歌手是谁了？

1983年苏芮演唱的歌曲
《酒干倘卖无》是苏芮演唱的歌曲，由罗大佑、侯德健作词，侯德健作曲，由飞碟唱片公司发行，是一首励情励志的歌曲。

梦江南 发表于 2024-11-13 17:05

樵歌 发表于 2024-11-13 16:23
歌好听，字非常有特色。

问好樵歌老师，谢谢欣赏支持。

醉美水芙蓉 发表于 2024-11-13 17:07

愤怒的葡萄 发表于 2024-11-13 17:17

起个网名好难 发表于 2024-11-13 16:40
1983年苏芮演唱的歌曲
《酒干倘卖无》是苏芮演唱的歌曲，由罗大佑、侯德健作词，侯德健作曲，由飞碟唱片 ...
我是捌零后，这歌红的时候我连幼儿园都没上呢，不过确实是一首很有名气的老歌。我学生时代很小的时候也听过的。

梦江南 发表于 2024-11-13 17:26

醉美水芙蓉 发表于 2024-11-13 17:07
欣赏老师带来的精彩！

谢谢醉美水芙蓉老师支持，问好。

梦江南 发表于 2024-11-13 17:27

愤怒的葡萄 发表于 2024-11-13 17:17
我是捌零后，这歌红的时候我连幼儿园都没上呢，不过确实是一首很有名气的老歌。我学生时代很小的时候也听 ...

现在听听也不错的。

梦油 发表于 2024-11-13 17:27

嗬，我很久没听这首歌了。

查看完整版本: 酒干倘卖无 （学习帖黑黑老师的这是什么 花）