醉美水芙蓉 发表于 2026-4-25 10:22:34

【水芙蓉播放器】清香绕指尖

<style>
        @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
        #tz {
                margin: 140px 0 30px calc(50% - 750px);
                width: 1346px;
                height:771px;
                background: #000;
                border-radius:32px;
                position: relative;
                overflow: hidden;
                --state: running;
                --main-color: #efede2;
        }
        #lrcDiv {
                writing-mode: vertical-rl;
                right: 10%;
                top: 20%;
                text-align: left;
                color: #ffffff;
                --hlcolor: #67acf9;
                z-index: 999;
        }
        #mplayer, #fsbtn, #playimg {
                display: none !important;
        }
        .vid {
                opacity: .05;
                z-index: 1;
        }
       
        #staticBg {
                width:1346px;
                height:771px;
                position:absolute;
                left: 0px;
                top: 0px;
                z-index: 1;
                display: none;
        }
       
        #dynamicBg {
                width:1346px;
                height:771px;
                position:absolute;
                left: 0px;
                top: 0px;
                z-index: 2;
                display: block;
        }
        .ma {
                position: absolute;
                width: 90px;
                height: 90px;
                left: 43%;
                bottom: 55px;
                z-index: 999;
                cursor: pointer;
                transition: transform 0.3s ease;
                animation: rotate 8s linear infinite var(--state);
        }
       
        .ma:hover {
                transform: scale(1.1);
        }
        @keyframes rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
        }
       
        .prog {
                position: absolute;
                width: 240px;
                height: 6px;
                background: linear-gradient(to right, var(--main-color) var(--prg, 0%), transparent 0%);
                border: 2px solid var(--main-color);
                border-radius: 5px;
                bottom: 30px;
                left: 47%;
                transform: translateX(-50%);
                z-index: 999;
                cursor: pointer;
                transition: all 0.3s ease;
        }
       
        .prog:hover {
                height: 12px;
                background: linear-gradient(to right, var(--main-color) var(--prg, 0%), #333 0%);
        }
        .time-display {
                position: absolute;
                width: 360px;
                left: 47%;
                transform: translateX(-50%);
                bottom: 25px;
                z-index: 999;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: var(--main-color);
                font: normal 14px sans-serif;
                pointer-events: none;
                background: transparent;
        }
       
        .current-time, .total-time {
                background: transparent;
                padding: 2px 8px;
                border-radius: 4px;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
                color: var(--main-color);
                font-weight: bold;
        }
       
        .lrc-paused {
                animation-play-state: paused !important;
                --state: paused !important;
                opacity: 0.9;
                filter: grayscale(0.3);
        }
</style>

<div id="tz" class="pa">

        <img id="staticBg" src="https://bbs.cnzv.cc/up/upload/pic/12/20260424-c2e2506e30fcfb0315b9ce3bd5e0e9d6.jpg">
        <img id="dynamicBg" src="https://bbs.cnzv.cc/up/upload/pic/12/20260424-c2e2506e30fcfb0315b9ce3bd5e0e9d6.jpg" id='bj'>
       
        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay loop></video>
        <audio id="aud" src="https://www.joy127.com/url/148965.mp3" autoplay loop></audio>
</div>
<div class="zw"></div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
       
        var isPlaying = true;
        var isGifPlaying = true;       
        var gc = `
作词: 一笑
作曲: 一笑
LRC编辑：醉美水芙蓉
清晨一碗热奶茶
窗外葡萄架影斑斑
转动手里小转环哎
心里小事也轻慢
院里石榴开得艳
羊群远远叫一遍
我把旧愁丢门前哟
随那尘土被风卷
我有清香绕指尖哎呀
我有清香绕指尖哎呀
烦恼呀都走远
不急不慌不纠缠哟
心里似清泉
风也温柔云也淡
日子缓缓甜
从容洒脱每一天
自在胜神仙哎哟
我有清香绕指尖哎呀
暖意满心田
不争不抢不埋怨哟
万事顺自然
守得一份心清净
活得有清欢
人间处处皆温柔
岁岁常安然
傍晚炊烟绕屋檐
星子一颗一颗亮
我在门口小竹凳哎
唱段旧歌给月亮
葡萄干里藏着甜
笑声挂在每张脸
日历翻过多少页哟
静看四季换新颜
浮生好似一场梦啊哈
醒来茶还香
心宽一点路就宽哎耶哎
天地都是家乡
不必匆忙不必赶哟
不必愁绪添
心怀芬芳向暖阳
四季皆春天哎呀哟
我有清香绕指尖哎呀
烦恼呀都走远
不急不慌不纠缠哟
心里似清泉
风也温柔云也淡
日子缓缓甜
从容洒脱每一天
自在胜神仙哎哟
我有清香绕指尖哎呀
暖意满心田
不争不抢不埋怨哟
万事顺自然
守得一份心清净
活得有清欢
人间处处皆温柔
岁岁常安然
谢谢欣赏！
`;
       
        hcplay(tz, gc, 7);

        const videoElement = document.querySelector('.vid');
        const audioElement = document.getElementById('aud');
        const lrcDiv = document.getElementById('lrcDiv');
        const staticBg = document.getElementById('staticBg');
        const dynamicBg = document.getElementById('dynamicBg');
       
        const existingButtons = document.querySelectorAll('.ma, #playimg, #mplayer, #fsbtn');
        existingButtons.forEach(btn => {
                if (btn.parentNode) {
                        btn.parentNode.removeChild(btn);
                }
        });

        const playimg = document.createElement('img');
        playimg.className = 'ma';
        playimg.src = 'https://bbs.cnzv.cc/up/upload/pic/12/20260424-d96da7b3232a1c5d69fa70917b947def.png';
        playimg.title = '点击播放/暂停 (空格键)';
        tz.appendChild(playimg);

        const progressBar = document.createElement('div');
        progressBar.className = 'prog';
        progressBar.title = '点击调节播放进度';
        tz.appendChild(progressBar);

        const timeDisplay = document.createElement('div');
        timeDisplay.className = 'time-display';

        const currentTime = document.createElement('span');
        currentTime.className = 'current-time';
        currentTime.textContent = '0:00';
        timeDisplay.appendChild(currentTime);
       
        const totalTime = document.createElement('span');
        totalTime.className = 'total-time';
        totalTime.textContent = '0:00';
        timeDisplay.appendChild(totalTime);
       
        tz.appendChild(timeDisplay);

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

        function updateProgressBar() {
                if (audioElement.duration) {
                        const progress = (audioElement.currentTime / audioElement.duration) * 100;
                        progressBar.style.setProperty('--prg', progress + '%');

                        currentTime.textContent = formatTime(audioElement.currentTime);
                        totalTime.textContent = formatTime(audioElement.duration);
                }
        }
       
        progressBar.addEventListener('click', (e) => {
                if (audioElement.duration) {
                        const rect = progressBar.getBoundingClientRect();
                        const percent = (e.clientX - rect.left) / rect.width;
                        audioElement.currentTime = percent * audioElement.duration;
                }
        });

        audioElement.addEventListener('timeupdate', updateProgressBar);
        audioElement.addEventListener('loadedmetadata', updateProgressBar);

        function togglePlayState() {
                if (isPlaying) {

                        audioElement.pause();
                        videoElement.pause();

                        staticBg.style.display = 'block';
                        dynamicBg.style.display = 'none';
                        isGifPlaying = false;

                        if (lrcDiv) {
                                lrcDiv.classList.add('lrc-paused');
                                lrcDiv.style.setProperty('--lrc-state', 'paused');
                        }

                        tz.style.setProperty('--state', 'paused');
                        isPlaying = false;
                } else {

                        audioElement.play();
                        videoElement.play();

                        staticBg.style.display = 'none';
                        dynamicBg.style.display = 'block';
                        isGifPlaying = true;

                        if (lrcDiv) {
                                lrcDiv.classList.remove('lrc-paused');
                                lrcDiv.style.setProperty('--lrc-state', 'running');
                        }

                        tz.style.setProperty('--state', 'running');
                        isPlaying = true;
                }
        }

        playimg.addEventListener("click", togglePlayState);

        document.addEventListener('keydown', function(event) {
                if (event.code === 'Space' && !event.target.matches('input, textarea, select')) {
                        event.preventDefault();
                        togglePlayState();
                }
        });
       

        setTimeout(() => {
                if (lrcDiv && isPlaying) {
                        lrcDiv.style.setProperty('--lrc-state', 'running');
                        lrcDiv.classList.remove('lrc-paused');
                }
                tz.style.setProperty('--state', 'running');
        }, 100);
</script>

念若莲 发表于 2026-4-25 10:35:43

沙发{:9_252:}

念若莲 发表于 2026-4-25 10:36:56

好好爱自己才是终身浪漫的开始{:9_273:}

念若莲 发表于 2026-4-25 10:37:30

播放器好精美，蛐蛐儿好听{:9_272:}

绿蔷薇 发表于 2026-4-25 10:53:14

蓝天、白云、鲜花，画面干净纯粹~{:4_123:}

绿蔷薇 发表于 2026-4-25 10:54:10

歌声轻柔婉转，像一缕清浅花香，淡淡萦绕，不疾不徐，温柔又空灵~~{:9_285:}

绿蔷薇 发表于 2026-4-25 10:54:56

播放器精致，同步歌词简洁又精准，芙蓉制作的棒棒哒~~

绿蔷薇 发表于 2026-4-25 10:55:18

问好芙蓉，遥祝周末快乐~~{:9_259:}

醉美水芙蓉 发表于 2026-4-25 12:28:03

念若莲 发表于 2026-4-25 10:37
播放器好精美，蛐蛐儿好听

谢谢友友支持！

醉美水芙蓉 发表于 2026-4-25 12:28:17

绿蔷薇 发表于 2026-4-25 10:54
播放器精致，同步歌词简洁又精准，芙蓉制作的棒棒哒~~

谢谢友友支持！
页: [1] 2
查看完整版本: 【水芙蓉播放器】清香绕指尖