论坛 › 马黑黑教程专版 › 黑氏快充也做播放器

马黑黑 发表于 2023-4-5 21:41

黑氏快充也做播放器

本帖最后由 马黑黑 于 2023-4-5 21:42 编辑 <br /><br /><style>
#papa { min-height: 300px; }
#mplayer {
        width: 300px;
        height: 30px;
        border: 1px solid darkgreen;
        border-radius: 6px;
        filter: drop-shadow(2px 2px 6px black);
        cursor: pointer;
        position: relative;
        --ww: 0; --bg: dargreen;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        background: var(--bg);
}
#mplayer::before {
        width: var(--ww);
        height: 100%;
        border-radius: 6px;
        opacity: .65;
}
#mplayer::after {
        width: 12px;
        height: 20px;
        top: 5px;
        right: -12px;
}
@keyframes charging {
        to { width: 100%; }
}
</style>

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

<script>
(function() {
let mState = () => mplayer.style.setProperty('--bg', aud.paused ? 'gray' : 'darkgreen');
mplayer.onclick = (e) => {
        let x = e.offsetX, w = mplayer.offsetWidth;
        if(x > w) aud.paused ? aud.play() : aud.pause();
        if(x < w) aud.currentTime = aud.duration*x/w;
};

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
        mplayer.style.setProperty('--ww', aud.currentTime*mplayer.offsetWidth/aud.duration + 'px');
});
})();
</script>

马黑黑 发表于 2023-4-5 21:41

代码

<style>
.mplayer {
        width: 300px;
        height: 30px;
        border: 1px solid darkgreen;
        border-radius: 6px;
        filter: drop-shadow(2px 2px 6px black);
        cursor: pointer;
        position: relative;
        --ww: 0; --bg: dargreen;
}
.mplayer::before, .mplayer::after {
        position: absolute;
        content: '';
        background: var(--bg);
}
.mplayer::before {
        width: var(--ww);
        height: 100%;
        border-radius: 6px;
        opacity: .65;
}
.mplayer::after {
        width: 12px;
        height: 20px;
        top: 5px;
        right: -12px;
}
@keyframes charging {
        to { width: 100%; }
}
</style>

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

<script>
let mplayer = document.querySelector('.mplayer');
let mState = () => mplayer.style.setProperty('--bg', aud.paused ? 'gray' : 'darkgreen');
mplayer.onclick = (e) => {
        let x = e.offsetX, w = mplayer.offsetWidth;
        if(x > w) aud.paused ? aud.play() : aud.pause();
        if(x < w) aud.currentTime = aud.duration*x/w;
};

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
        mplayer.style.setProperty('--ww', aud.currentTime*mplayer.offsetWidth/aud.duration + 'px');
});

</script>

马黑黑 发表于 2023-4-5 21:44

进度可以控制

小辣椒 发表于 2023-4-5 22:06

这个和我们以前玩的swf播放器进度条差不多只是尺寸大了一点

小辣椒 发表于 2023-4-5 22:07

黑黑这个播放器效果也是不错{:4_199:}

马黑黑 发表于 2023-4-5 22:09

小辣椒 发表于 2023-4-5 22:07
黑黑这个播放器效果也是不错

蛮可爱的{:4_170:}

马黑黑 发表于 2023-4-5 22:10

小辣椒 发表于 2023-4-5 22:06
这个和我们以前玩的swf播放器进度条差不多只是尺寸大了一点

尺寸可自定义哈。改的时候右边样式的伪元素 #mplayer::after 相应跟进就可以

小辣椒 发表于 2023-4-5 22:21

马黑黑 发表于 2023-4-5 22:10
尺寸可自定义哈。改的时候右边样式的伪元素 #mplayer::after 相应跟进就可以

黑黑，这个时间不加就这样？

红影 发表于 2023-4-5 22:34

这个好玩，也能做播放器呢。我也跟着去学做一个去{:4_187:}

红影 发表于 2023-4-5 22:36

这个有暂停么？

亦是金 发表于 2023-4-5 23:07

暂停在快充头上！{:4_189:}

马黑黑 发表于 2023-4-5 23:41

亦是金 发表于 2023-4-5 23:07
暂停在快充头上！

{:4_181:}

马黑黑 发表于 2023-4-5 23:41

小辣椒 发表于 2023-4-5 22:21
黑黑，这个时间不加就这样？

加时间简单的

马黑黑 发表于 2023-4-5 23:41

红影 发表于 2023-4-5 22:34
这个好玩，也能做播放器呢。我也跟着去学做一个去

支持

马黑黑 发表于 2023-4-5 23:42

红影 发表于 2023-4-5 22:36
这个有暂停么？

有

庶民 发表于 2023-4-6 05:00

好东东，有创意！

马黑黑 发表于 2023-4-6 08:11

庶民 发表于 2023-4-6 05:00
好东东，有创意！

早上好

红影 发表于 2023-4-6 09:44

马黑黑 发表于 2023-4-5 23:41
支持

就是说完这句就跑去试做了，连提醒都不回复了{:4_170:}

红影 发表于 2023-4-6 09:45

马黑黑 发表于 2023-4-5 23:42
有

没想到那个电池的头就是。

红影 发表于 2023-4-6 09:45

亦是金 发表于 2023-4-5 23:07
暂停在快充头上！

谢谢提醒，这个真不知道呢{:4_173:}

查看完整版本: 黑氏快充也做播放器