亚伦影音工作室 发表于 2025-3-22 09:07

鸿雁于飞 - 张亦可

本帖最后由 亚伦影音工作室 于 2025-3-22 12:03 编辑 <br /><br /><style>
#papa { margin: 30px 0 30px calc(50% - 593px);background:radial-gradient(circle,transparent, rgba(10,40,18)100%),url(https://pic1.imgdb.cn/item/67de09e688c538a9b5c3268e.jpg) no-repeat center/cover; }
.pa {
    width: 1024px;
    height: 640px;
    display: grid;
    place-items: center;
    background: #eee;
    box-shadow: 2px 2px 10px #000;
    z-index: 1;
    position: relative;
    margin: 20px auto;
}
#lrcDiv {
        --hlcolor:#EAC100;
        position: absolute;
        display: flex;text-shadow: 1px 1px 1px black; top: 20%; width: 50%;
        flex-direction: column;
left: 0%;
        height: 200px;
        overflow: hidden;
        font:normal 22px/50px '微软雅黑', sans-serif;
        text-align: center;
        color:#64A600;font-weight:400;
        background: none;
        padding: 0;
}

#lrcDiv > p {
        flex: 1;
        margin: 0;
        padding: 0;
        max-height: 50px;
        transition: .75s;
}
#lrcDiv > p.hlight {background:url(https://pic1.imgdb.cn/item/67ce8a52066befcec6e25b80.gif) no-repeat center/80% ;
        color: var(--hlcolor);
        font-size: 28px;
        font-weight:900;
}

#mplayer {
        --track: silver;
        --prog: gold;
        --percent: 0;
        display: flex;
        gap: 10px; bottom: 10px; width: 40%;
        flex-direction: column;
        align-items: center;

        background: none;
        color: white;
        padding: 10px;
        position: absolute;
}

#btns-area {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
}

#btn-play {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: relative;
}

#btn-play:hover::after {
        opacity: .7;
        filter:alpha(opacity=50);
}

#btn-play::after {
        position: absolute;
        content:'';
        width: 100%;
        height: 100%;
        background: var(--prog);
        clip-path: var(--clip);
}

#progDiv {
        width: 100%;
        height: 10px;
        background: linear-gradient(to right, var(--prog) var(--percent), var(--track) var(--percent), var(--track) 0) no-repeat 0 50% / 100% 2px;
        cursor: pointer;
}

.play {
        --clip: polygon(10% 0, 100% 50%, 10% 100%);
}

.pause {
        --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}
#fsbtn { top: 20px;position: absolute;cursor: pointer;font:normal 22px/0px '微软雅黑', sans-serif;color:#64A600; }
</style>
<div id="papa" class="pa">
        <audio src="https://s2.ananas.chaoxing.com/sv-w8/audio/fe/82/8e/f4688bc00f97325bdf1615175056d694/audio.mp3" autoplay loop></audio>
<div id="lrcDiv"></div>
                <div id="mplayer">
                        <div id="btns-area"title="Alt+X">
                                <div id="time1">00:00</div>
                                <div id="btn-play" class="pause"></div>
                                <div id="time2">00:00</div>
                        </div>
                        <div id="progDiv"></div>
                </div>
                <div id="fsbtn" title="F11">进入全屏</div>
</div>


<script type="module">
export function hcplay(pa, lrctext, showLines = 3) {
        if (pa instanceof Element === false || !lrctext) return;

        pa.innerHTML += ``;

        const mplayer = document.querySelector('#mplayer');
        const aud = document.querySelector('audio');
        const lrcDiv = document.querySelector('#lrcDiv');
        const progDiv = document.querySelector('#progDiv');
        const btnPlay = document.querySelector('#btn-play');
       

        let lrcAr = [], isFScreen = false, fsTimer;

        const lineHeight = 50;
        lrcDiv.style.height = lineHeight * showLines + 'px';
       
        const getLrcAr = (text) => {
                const ar = text.trim().split(/[\r\n]+/g);
                var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        let result = item.match(reg);
                        let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                        lrcAr.push(.trim()]);
                        let p = document.createElement('p');
                        p.innerText = result.trim();
                        lrcDiv.appendChild(p);
                });
                lrcAr.sort((a, b) => a - b);
        };

        const updatePlayerDatas = () => {
                const percent = (aud.currentTime / aud.duration) * 100;
                time1.innerText = formatTime(aud.currentTime);
                time2.innerText = formatTime(aud.duration);
                mplayer.style.setProperty('--percent', percent + '%');
                for (let i = 0; i < lrcAr.length; i ++) {
                        const lrc = {time: lrcAr, text: lrcAr};
                        const next = i < lrcAr.length - 1 ? lrcAr : null;
                        const p = lrcDiv.children;
                        const scrollPos = p.offsetTop - (Math.ceil(showLines / 2) * lineHeight) + lineHeight;
                        if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
                                p.classList.add('hlight');
                                lrcDiv.scroll({left: 0, top: scrollPos, behavior: 'smooth'});
                        } else {
                                p.classList.remove('hlight');
                        }
                }
        };

        const formatTime = (seconds) => {
                const mins = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        };

        const mState = () => {
                if (aud.paused) {
                        btnPlay.className = 'play';
                        btnPlay.title = '点击播放(Alt+X)';
                        playvids(false);
                        pa.style.setProperty('--state', 'paused');
                } else {
                        btnPlay.className = 'pause';
                        btnPlay.title = '点击暂停(Alt+X)';
                        playvids(true);
                        pa.style.setProperty('--state', 'running');
                }
        };

       

        progDiv.addEventListener('click', (e) => aud.currentTime = e.offsetX / progDiv.offsetWidth * aud.duration);
        progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));

        aud.addEventListener('timeupdate', updatePlayerDatas);
        aud.addEventListener('playing', mState);
        aud.addEventListener('pause', mState);
        btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

        fsbtn.onclick = () => isFScreen ? document.exitFullscreen() : pa.requestFullscreen();

        pa.addEventListener('mousemove', (e) => {
                clearTimeout(fsTimer);
                fsbtn.style.opacity = mplayer.style.opacity = '1';
                fsTimer = setTimeout(() => {
                        fsbtn.style.opacity = '1';
                }, 1000);
        });

        document.addEventListener('fullscreenchange', () => {
                if (document.fullscreenElement !== null) {
                        isFScreen = true;
                        fsbtn.innerText = '退出全屏';
                } else {
                        isFScreen = false;
                        fsbtn.innerText = '进入全屏';
                }
        });

        document.addEventListener('keydown', e => {
                if(e.altKey && e.key === 'x') btnPlay.click();
                if(e.key === 'F11') {
                        fsbtn.click();
                        e.preventDefault();
                }
        });

        getLrcAr(lrctext);
};
var lrc = `鸿雁于飞 - 张亦可
我曾经写过命运和玫瑰
在跳动着荆棘的坎坷
我曾经唱过他们的悲歌
在大地流淌的红色
我曾经说过生离和死别
就在周围的世界
是那些树那些草
是那些零落成泥的她埋在荒芜的河
正月里呀来是新呀春
家家那末户啊点红呀灯
人家丈夫末团也圆聚
孟姜女个丈夫盖筑长城
鸿雁南飞声声哀 阿姐北望泪满腮
鸡晓得进棚 牛羊晓得归栏
阿哥为什么还没回来
一想到当年约定眼泪赛过河滨
覅哭啊覅哭
日里牵记夜里梦中常相会
又是一年鸿雁南飞回到水中央
总归是东边会出太阳西边会落月亮
那城墙下的人啊为什么还是回不去
我曾经写过情人和承诺
在黎明里群居的孤苦
我曾经唱过哀愁
在故国的风中飘摇的京洛
我曾经说过憎恶和冷漠
就在这顺流逆流就在这人海
是那些早那些晚那些日子那些时候
就插在锈蚀的城郭
鸿雁啊鸿雁 天涯路远梦难圆
这天一歇是春雨绵绵
一歇是秋风瑟瑟
晓得我的人说我悲苦
装聋子的人骂我疯癫
人心啊不是镜子 难料人家心事
心也不是席子 怎么能被你卷来卷去
这个造我谣言 那个放我空气
看哪家的高粱长得高 全去把它割掉
一日日蹲在田里投五投六
但愿你但愿你多吃口饭少碰到赤佬
当人世间的磨盘碾碎了蚁巢
当我们唱着匪席不卷的执着
当我们奔跑在极限的高楼啊
我们像风筝一样地飘着 飘着
用饥饿的文字孤独的言语
写下我们奋不顾身的生活
于是我只看见她的尖叫
她的嚎啕她孤身投炉的沉默
我浅唱着 我低吟着
鸿雁于飞 肃肃其羽
之子于征 苟劳于野
爱及矜人 哀此鳏寡
鸿雁于飞 集于中泽
之子于垣 百堵皆作
虽则劬劳 其究安宅
鸿雁于飞 哀鸣嗷嗷
维此哲人 谓我劬劳
维彼愚人 谓我宣骄
我浅唱着 我低吟着`;
hcplay(papa, lrc, 5);

</script>


梦油 发表于 2025-3-22 09:50

欣赏佳作，问候亚伦。

红影 发表于 2025-3-22 11:06

这个有趣，在多行歌词下还有动图做加强{:4_199:}

红影 发表于 2025-3-22 11:09

暂停时动图无法暂停，要是也能暂停就好了。
制作漂亮，构思奇妙。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2025-3-22 14:21

欣赏亚纶精彩的制作{:4_187:}

老谟深虑 发表于 2025-3-22 16:31

            欣赏老师的代码音画，点赞！挺新颖。
页: [1]
查看完整版本: 鸿雁于飞 - 张亦可