论坛 › 欢乐水吧 › 秋（送东篱）

马黑黑 发表于 2022-8-29 07:47

秋（送东篱）

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: tan url('/data/attachment/forum/202208/29/074458xehen8gyenepdnpz.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 20px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: #DBE3E2; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 55px; font: bold 1.4em sans-serif; color: orange; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>

<div id="papa">
        <span id="conicPlayer" data-per="00:00&#10;00:00"></span>
        <span id="lrctext">lrc歌词</span>
</div>

<script>
let lrcAr = [
        ['00.00', '纯音乐 - Autumn 秋'],
        ['170.00','感谢欣赏']
];
let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=522041157.mp3';
aud.autoplay = true;
aud.loop = true;

conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        let current = aud.currentTime / aud.duration * 100;
        conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
        conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
        }
});

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;
}
</script>

马黑黑 发表于 2022-8-29 07:48

源码（全）

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: tan url('/data/attachment/forum/202208/29/074458xehen8gyenepdnpz.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 20px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: #DBE3E2; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 55px; font: bold 1.4em sans-serif; color: orange; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>

<div id="papa">
        <span id="conicPlayer" data-per="00:00
00:00"></span>
        <span id="lrctext">lrc歌词</span>
</div>

<script>
let lrcAr = [
        ['00.00', '纯音乐 - Autumn 秋'],
        ['170.00','感谢欣赏']
];
let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=522041157.mp3';
aud.autoplay = true;
aud.loop = true;

conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        let current = aud.currentTime / aud.duration * 100;
        conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
        conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
        }
});

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;
}
</script>

马黑黑 发表于 2022-8-29 07:52

本帖用角向渐变+伪元素遮罩做出圆环进度示意器，尚不具备播放进度调节功能。

优点：低代码量。

缺点：伪元素遮罩，圆环内区域取色需要用心设定，不易做到与背景色融为一体。

加林森 发表于 2022-8-29 08:14

漂亮的制作。颜色搭配得相当合适。秋天的风景真美丽。@东篱闲人老兄收礼开森！{:4_190:}

东篱闲人 发表于 2022-8-29 09:09

自古逢秋悲寂寥,我言秋日胜春朝。美！{:4_187:}

东篱闲人 发表于 2022-8-29 09:10

马黑黑 发表于 2022-8-29 07:52
本帖用角向渐变+伪元素遮罩做出圆环进度示意器，尚不具备播放进度调节功能。

优点：低代码量。


都是技术活啊，黑黑威武！{:5_116:}

东篱闲人 发表于 2022-8-29 09:10

谢谢黑黑，辛苦了。。。{:4_190:}

马黑黑 发表于 2022-8-29 12:14

东篱闲人 发表于 2022-8-29 09:10
谢谢黑黑，辛苦了。。。

希望喜欢

马黑黑 发表于 2022-8-29 12:14

东篱闲人 发表于 2022-8-29 09:09
自古逢秋悲寂寥,我言秋日胜春朝。美！

{:4_181:}

马黑黑 发表于 2022-8-29 12:15

加林森 发表于 2022-8-29 08:14
漂亮的制作。颜色搭配得相当合适。秋天的风景真美丽。@东篱闲人老兄收礼开森！

代码量少，但需要修改的地方要看懂

马黑黑 发表于 2022-8-29 12:15

东篱闲人 发表于 2022-8-29 09:10
都是技术活啊，黑黑威武！

比不上你的PS技术

加林森 发表于 2022-8-29 12:37

马黑黑 发表于 2022-8-29 12:15
代码量少，但需要修改的地方要看懂

嗯嗯。

东篱闲人 发表于 2022-8-29 13:20

马黑黑 发表于 2022-8-29 12:15
比不上你的PS技术

俺那都是瞎琢磨，没啥技术可言。。。。{:5_102:}

马黑黑 发表于 2022-8-29 18:16

东篱闲人 发表于 2022-8-29 13:20
俺那都是瞎琢磨，没啥技术可言。。。。

技术大了去的，一不小心谁谁就被换头{:4_170:}

东篱闲人 发表于 2022-8-29 18:55

马黑黑 发表于 2022-8-29 18:16
技术大了去的，一不小心谁谁就被换头

{:4_172:}

马黑黑 发表于 2022-8-29 18:57

东篱闲人 发表于 2022-8-29 18:55


{:4_196:}

东篱闲人 发表于 2022-8-29 18:57

马黑黑 发表于 2022-8-29 18:57


把这个功能给忘了。。。。{:4_170:}

马黑黑 发表于 2022-8-29 19:22

东篱闲人 发表于 2022-8-29 18:57
把这个功能给忘了。。。。

挺好挺好

红影 发表于 2022-8-29 19:24

漂亮的彩色圆环播放器，黑黑又带来新玩法{:4_199:}

马黑黑 发表于 2022-8-29 19:57

红影 发表于 2022-8-29 19:24
漂亮的彩色圆环播放器，黑黑又带来新玩法

这个早布局的，不算新

查看完整版本: 秋（送东篱）