论坛 › 音乐沙龙 › 大地

马黑黑 发表于 2023-6-8 20:55

大地

本帖最后由 马黑黑 于 2023-6-8 20:58 编辑 <br /><br /><css-doodle grid="1x6" id="papa">
        :doodle {
                @size: 900px 598px;
                background: url('https://638183.freep.cn/638183/t23/2/dadi.jpg');
                box-shadow: 0 0 8px #000;
                position: relative;
                margin: 0 0 0 calc(50% - 531px);
                z-index: 1;
                --ww: 300px; /* 进度条总长 */
                --prog: 0; /* 进度 */
                --tt1: '00:00'; /* 当前播放时间 */
                --tt2: '00:00'; /* 音乐时长 */
                --xplace: 50%; /* 播放器水平定位 */
                --yplace: 98%; /* 播放器垂直定位 */
                --color: snow;
                --state: paused; /* 关键帧运行状态 */
        }
        /* 单元格1 ：进度条 */
        @nth(1) {
                @size: var(--ww) 2px;
                @place: var(--xplace) var(--yplace);
                background: silver;
                :before, :after { content: ''; }
                :before {
                        position: absolute;
                        left: 0;
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
                :after {
                        width: 100%;
                        height: 10px;
                        cursor: pointer;
                }
        }
        /* 单元格2 ：播放时间信息 */
        @nth(2) {
                @size: var(--ww) 20px;
                @place: var(--xplace) calc(var(--yplace) - 20px);
                :before, :after{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        color: var(--color);
                }
                :before { content: var(--tt1); }
                :after { content: var(--tt2); text-align: right; }
        }

        /* 单元格3和4 ：播放按钮 */
        @nth(3,4) {
                @size: 60px;
                @place: var(--xplace) calc(var(--yplace) - 36px);
                cursor: pointer;
        }
        @nth(3) {
                @size: 50px;
                @shape: clover 4;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
        }
        @match(i ≥ 5) {
                @size: 100px 88px;
                @place: 50px 44px;
                background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
                offset-path: path('M50 44 Q500 300 900 44');
                offset-distance: 0%;
                animation: fly 10s calc(@r(1,10) * -1s) infinite linear var(--state);
        }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes fly { to { offset-distance: 100%; }}
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=438980" autoplay="autoplay" loop="loop"></audio>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('timeupdate', () => {
                papa.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');
                papa.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);
                papa.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);
        });
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        window.onload = () => {
                let btns = papa.shadowRoot.querySelectorAll('cell');
                let ww = parseInt(window.getComputedStyle(papa).getPropertyValue('--ww'));
                btns.onclick = () => aud.paused ? aud.play() : aud.pause();
                btns.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
        }
})();
</script>

马黑黑 发表于 2023-6-8 20:58

帖子代码
<css-doodle grid="1x6" id="papa">
        :doodle {
                @size: 900px 598px;
                background: url('https://638183.freep.cn/638183/t23/2/dadi.jpg');
                box-shadow: 0 0 8px #000;
                position: relative;
                margin: 0 0 0 calc(50% - 531px);
                z-index: 1;
                --ww: 300px; /* 进度条总长 */
                --prog: 0; /* 进度 */
                --tt1: '00:00'; /* 当前播放时间 */
                --tt2: '00:00'; /* 音乐时长 */
                --xplace: 50%; /* 播放器水平定位 */
                --yplace: 98%; /* 播放器垂直定位 */
                --color: snow;
                --state: paused; /* 关键帧运行状态 */
        }
        /* 单元格1 ：进度条 */
        @nth(1) {
                @size: var(--ww) 2px;
                @place: var(--xplace) var(--yplace);
                background: silver;
                :before, :after { content: ''; }
                :before {
                        position: absolute;
                        left: 0;
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
                :after {
                        width: 100%;
                        height: 10px;
                        cursor: pointer;
                }
        }
        /* 单元格2 ：播放时间信息 */
        @nth(2) {
                @size: var(--ww) 20px;
                @place: var(--xplace) calc(var(--yplace) - 20px);
                :before, :after{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        color: var(--color);
                }
                :before { content: var(--tt1); }
                :after { content: var(--tt2); text-align: right; }
        }

        /* 单元格3和4 ：播放按钮 */
        @nth(3,4) {
                @size: 60px;
                @place: var(--xplace) calc(var(--yplace) - 36px);
                cursor: pointer;
        }
        @nth(3) {
                @size: 50px;
                @shape: clover 4;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
        }
        @match(i ≥ 5) {
                @size: 100px 88px;
                @place: 50px 44px;
                background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
                offset-path: path('M50 44 Q500 300 900 44');
                offset-distance: 0%;
                animation: fly 10s calc(@r(1,10) * -1s) infinite linear var(--state);
        }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes fly { to { offset-distance: 100%; }}
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=438980" autoplay="autoplay" loop="loop"></audio>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('timeupdate', () => {
                papa.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');
                papa.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);
                papa.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);
        });
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        window.onload = () => {
                let btns = papa.shadowRoot.querySelectorAll('cell');
                let ww = parseInt(window.getComputedStyle(papa).getPropertyValue('--ww'));
                btns.onclick = () => aud.paused ? aud.play() : aud.pause();
                btns.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
        }
})();
</script>

千羽 发表于 2023-6-8 21:29

这个播放器好看，小巧精致{:4_187:}

马黑黑 发表于 2023-6-8 21:35

千羽 发表于 2023-6-8 21:29
这个播放器好看，小巧精致

{:4_190:}

红影 发表于 2023-6-8 21:57

grid="1x6"是横向排布的6个格子，要是6*1也行的吧，反正每个格子里都另外定位了。{:4_173:}

红影 发表于 2023-6-8 22:00

鹰有意思，好像calc(@r(1,10) * -1s)也看不出来变化啊，出来的时间间隔感觉差不多呢。

红影 发表于 2023-6-8 22:01

喜欢带进度条的播放器，自己可以控制进度了{:4_204:}

红影 发表于 2023-6-8 22:04

红影 发表于 2023-6-8 22:00
鹰有意思，好像calc(@r(1,10) * -1s)也看不出来变化啊，出来的时间间隔感觉差不多呢。

刷新后看出来间隔的变化了{:4_173:}

焱鑫磊 发表于 2023-6-8 22:09

欣赏老师佳作！{:4_187:}

马黑黑 发表于 2023-6-8 22:34

红影 发表于 2023-6-8 21:57
grid="1x6"是横向排布的6个格子，要是6*1也行的吧，反正每个格子里都另外定位了。

都可以的

马黑黑 发表于 2023-6-8 22:35

焱鑫磊 发表于 2023-6-8 22:09
欣赏老师佳作！

{:4_191:}

马黑黑 发表于 2023-6-8 22:35

红影 发表于 2023-6-8 22:00
鹰有意思，好像calc(@r(1,10) * -1s)也看不出来变化啊，出来的时间间隔感觉差不多呢。

随机变变

马黑黑 发表于 2023-6-8 22:36

红影 发表于 2023-6-8 22:04
刷新后看出来间隔的变化了

这里是概率问题，偶尔会并排飞

马黑黑 发表于 2023-6-8 22:36

红影 发表于 2023-6-8 22:01
喜欢带进度条的播放器，自己可以控制进度了

其实也不太复杂，代码偏多一些而已吧

醉美水芙蓉 发表于 2023-6-8 23:50

马黑黑 发表于 2023-6-9 07:44

醉美水芙蓉 发表于 2023-6-8 23:50
这个只能纯欣赏了！完全不懂了！

代码逻辑很清晰的

红影 发表于 2023-6-9 13:30

马黑黑 发表于 2023-6-8 22:36
其实也不太复杂，代码偏多一些而已吧

虽然代码多了一点，但是特别喜欢{:4_187:}

红影 发表于 2023-6-9 13:31

马黑黑 发表于 2023-6-8 22:36
这里是概率问题，偶尔会并排飞

嗯嗯，关键看@r(1,10)的取值。这个它是自由取的。

红影 发表于 2023-6-9 13:31

马黑黑 发表于 2023-6-8 22:34
都可以的

嗯嗯，知道了{:4_204:}

红影 发表于 2023-6-9 13:32

马黑黑 发表于 2023-6-8 22:35
随机变变

变得很自在{:4_173:}

查看完整版本: 大地