论坛 › 马黑黑教程专版 › 图片按钮播放控制器

马黑黑 发表于 2023-7-22 23:17

图片按钮播放控制器

<style>
#mydiv { margin: 30px auto; width: 600px; height: 300px; background: radial-gradient(tan,olive); position: relative; }
#prog {
        position: absolute;
        bottom: 10px;
        left: calc(50% - 150px);
        width: 300px;
        height: 8px;
        border: 1px solid lightblue;
        border-radius: 10px;
        background: linear-gradient(to right, green, red var(--prg), white 0);
        color: lightgreen;
        --prg: 0%; --state: paused;
}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); }
#prog::after { right: 0; content: attr(data-du); }
#btnplay {
        position: absolute;
        top: -42px;
        left: calc(50% - 17.5px);
        width: 35px;
        height: 35px;
        background: url('https://638183.freep.cn/638183/t23/btn/flowers-01(1).png') no-repeat -110px -8px;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv">
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度"><span id="btnplay" title="播放/暂停"></span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051744489" autoplay loop></audio>
</div>

<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 = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
        prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
        prog.dataset.cu = toMin(aud.currentTime);
        prog.dataset.du = toMin(aud.duration);
});
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>

马黑黑 发表于 2023-7-22 23:17

代码
<style>
#mydiv { margin: 30px auto; width: 600px; height: 300px; background: radial-gradient(tan,olive); position: relative; }
#prog {
        position: absolute;
        bottom: 10px;
        left: calc(50% - 150px);
        width: 300px;
        height: 8px;
        border: 1px solid lightblue;
        border-radius: 10px;
        background: linear-gradient(to right, green, red var(--prg), white 0);
        color: lightgreen;
        --prg: 0%; --state: paused;
}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); }
#prog::after { right: 0; content: attr(data-du); }
#btnplay {
        position: absolute;
        top: -42px;
        left: calc(50% - 17.5px);
        width: 35px;
        height: 35px;
        background: url('https://638183.freep.cn/638183/t23/btn/flowers-01(1).png') no-repeat -110px -8px;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv">
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度"><span id="btnplay" title="播放/暂停"></span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051744489" autoplay loop></audio>
</div>

<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 = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
        prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
        prog.dataset.cu = toMin(aud.currentTime);
        prog.dataset.du = toMin(aud.duration);
});
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>

马黑黑 发表于 2023-7-22 23:19

图片：24行

   background: url('https://638183.freep.cn/638183/t23/btn/flowers-01(1).png') no-repeat -110px -8px;

图片最好背景透明。如果是单图，红色部分代码改为：

    center / cover

马黑黑 发表于 2023-7-22 23:25

按钮单击事件，46行：

    btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }

为什么有红色这一句、它是干嘛用的？

因为，id="btnplay" 的 span 标签是 prog 的子元素，单击子元素，单击事件会冒泡到父元素（乃至冒泡到更大辈分的祖父元素），而父元素有自己的单击事件（播放进度调节），故此需要阻止冒泡事件的发生，e.stopPropagation() 就是起这个作用，只允许自身的单击事件有效。

醉美水芙蓉 发表于 2023-7-23 06:45

焱鑫磊 发表于 2023-7-23 08:15

学习！赞！{:4_187:}

马黑黑 发表于 2023-7-23 08:25

醉美水芙蓉 发表于 2023-7-23 06:45
欣赏学习老师新课程！

这个样式的，我们之前有过，这里是实现方式有所不同

马黑黑 发表于 2023-7-23 08:25

焱鑫磊 发表于 2023-7-23 08:15
学习！赞！

之前做过这个样式的，这里改写一下

一斛珠 发表于 2023-7-23 11:23

来欣赏黑黑老师作品

马黑黑 发表于 2023-7-23 11:56

一斛珠 发表于 2023-7-23 11:23
来欣赏黑黑老师作品

请用咖啡{:4_190:}

红影 发表于 2023-7-28 09:25

这个帖子竟然漏看了{:4_173:}

红影 发表于 2023-7-28 09:28

马黑黑 发表于 2023-7-22 23:25
按钮单击事件，46行：

    btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play()...

这个讲解是新内容{:4_187:}

马黑黑 发表于 2023-7-28 12:22

红影 发表于 2023-7-28 09:25
这个帖子竟然漏看了

也好

马黑黑 发表于 2023-7-28 12:22

红影 发表于 2023-7-28 09:28
这个讲解是新内容

半新半旧

红影 发表于 2023-7-28 13:10

马黑黑 发表于 2023-7-28 12:22
也好

有时帖子超出首页，真的可能漏掉，即使去翻看过。上次就漏了一斛珠的帖子{:4_173:}

红影 发表于 2023-7-28 13:11

马黑黑 发表于 2023-7-28 12:22
半新半旧

我是说这个 (e) => { e.stopPropagation();……从来没注意过{:4_173:}

马黑黑 发表于 2023-7-28 13:41

红影 发表于 2023-7-28 13:11
我是说这个 (e) => { e.stopPropagation();……从来没注意过

这个是新的

马黑黑 发表于 2023-7-28 13:43

红影 发表于 2023-7-28 13:10
有时帖子超出首页，真的可能漏掉，即使去翻看过。上次就漏了一斛珠的帖子

正常的

红影 发表于 2023-7-28 13:56

马黑黑 发表于 2023-7-28 13:41
这个是新的

还好看到这个帖子，也补上了这一课{:4_173:}

红影 发表于 2023-7-28 13:57

马黑黑 发表于 2023-7-28 13:43
正常的

所以有时有事外出了，回来我都翻半天新帖。

查看完整版本: 图片按钮播放控制器