论坛 › 马黑黑教程专版 › range播放器（初稿）

马黑黑 发表于 2025-3-22 18:52

range播放器（初稿）

<style>
#mplayer {
    --track: lightgreen;
    --prog: darkgreen;
    width: 400px;
    height: fit-content;
    font-size: 16px;
    color: var(--prog);
    background: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 20px auto;
}

#prog {
    -webkit-appearance: none;
    flex-grow: 1;
    background: none;
}

#prog::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--track), var(--track)) no-repeat center / 100% 2px;
}

#prog::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: radial-gradient(var(--track) 30%, var(--prog) 40%, var(--prog) 100%);
    cursor: pointer;
}

#prog::-moz-range-track {
    background: linear-gradient(90deg, lightgreen, lightgreen) no-repeat center / 100% 6px;
}

#prog::-moz-range-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: radial-gradient(lightgreen 40%, green 45%, darkgreen 100%);
    cursor: pointer;
}

#btnPlay {
    width: 28px;
    height: 28px;
    border-radius: 25%;
    box-shadow: inset 0 0 3px 0 var(--prog);
    cursor: pointer;
    display: grid;
    place-items: center;
}

#btnPlay:hover::after {
    opacity: .7;
}

#btnPlay::after {
    content:'';
    width: 16px;
    height: 16px;
    background: var(--prog);
    clip-path: var(--clip);
}

.play {
    --clip: polygon(10% 0, 100% 50%, 10% 100%);
}

.pause {
    --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}
</style>

<div id="mplayer">
    <div id="btnPlay" class="pause" title="Alt+X"></div>
    <input id="prog" type="range" step="0.5" value="0" min="0" max="100" />
    <div id="timebox">00:00/00:00</div>
</div>
<audio src="https://music.163.com/song/media/outer/url?id=1436384887" autoplay loop></audio>

<script>
let busy = false;
const aud = document.querySelector('audio');

const mState = () => {
    if (aud.paused) {
      btnPlay.className = 'play';
    } else {
      btnPlay.className = 'pause';
    }
};

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

aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);

aud.addEventListener('timeupdate', (e) => {
    if (!busy) {
      prog.value = aud.currentTime / aud.duration * 100;
      timebox.innerText = formatTime(aud.currentTime) + '/' + formatTime(aud.duration);
    }
});

btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

prog.addEventListener('mousedown', () => busy = true);

prog.addEventListener('mouseup', () => {
    aud.currentTime = aud.duration * prog.value / 100;
    busy = false;
});

prog.addEventListener('input', () =>
    timebox.innerText = formatTime(aud.duration * prog.value / 100) +
    '/' + formatTime(aud.duration)
);

document.addEventListener('keydown', (e) => {
    if (e.altKey && e.key === 'x') btnPlay.click();
});

</script>

马黑黑 发表于 2025-3-22 18:52

代码：
<style>
#mplayer {
    --track: lightgreen;
    --prog: darkgreen;
    width: 400px;
    height: fit-content;
    font-size: 16px;
    color: var(--prog);
    background: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 20px auto;
}

#prog {
    -webkit-appearance: none;
    flex-grow: 1;
    background: none;
}

#prog::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--track), var(--track)) no-repeat center / 100% 2px;
}

#prog::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: radial-gradient(var(--track) 30%, var(--prog) 40%, var(--prog) 100%);
    cursor: pointer;
}

#prog::-moz-range-track {
    background: linear-gradient(90deg, lightgreen, lightgreen) no-repeat center / 100% 6px;
}

#prog::-moz-range-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: radial-gradient(lightgreen 40%, green 45%, darkgreen 100%);
    cursor: pointer;
}

#btnPlay {
    width: 28px;
    height: 28px;
    border-radius: 25%;
    box-shadow: inset 0 0 3px 0 var(--prog);
    cursor: pointer;
    display: grid;
    place-items: center;
}

#btnPlay:hover::after {
    opacity: .7;
}

#btnPlay::after {
    content:'';
    width: 16px;
    height: 16px;
    background: var(--prog);
    clip-path: var(--clip);
}

.play {
    --clip: polygon(10% 0, 100% 50%, 10% 100%);
}

.pause {
    --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}
</style>

<div id="mplayer">
    <div id="btnPlay" class="pause" title="Alt+X"></div>
    <input id="prog" type="range" step="0.5" value="0" min="0" max="100" />
    <div id="timebox">00:00/00:00</div>
</div>
<audio src="https://music.163.com/song/media/outer/url?id=1436384887" autoplay loop></audio>

<script>
let busy = false;
const aud = document.querySelector('audio');

const mState = () => {
    if (aud.paused) {
      btnPlay.className = 'play';
    } else {
      btnPlay.className = 'pause';
    }
};

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

aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);

aud.addEventListener('timeupdate', (e) => {
    if (!busy) {
      prog.value = aud.currentTime / aud.duration * 100;
      timebox.innerText = formatTime(aud.currentTime) + '/' + formatTime(aud.duration);
    }
});

btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

prog.addEventListener('mousedown', () => busy = true);

prog.addEventListener('mouseup', () => {
    aud.currentTime = aud.duration * prog.value / 100;
    busy = false;
});

prog.addEventListener('input', () =>
    timebox.innerText = formatTime(aud.duration * prog.value / 100) +
    '/' + formatTime(aud.duration)
);

document.addEventListener('keydown', (e) => {
    if (e.altKey && e.key === 'x') btnPlay.click();
});

</script>

红影 发表于 2025-3-22 20:00

这个让播放器暂停以及进度条都和音乐对应起来了，真好{:4_199:}

马黑黑 发表于 2025-3-22 20:01

红影 发表于 2025-3-22 20:00
这个让播放器暂停以及进度条都和音乐对应起来了，真好

这个简单呀，类似的以前做过的，只是现在重绘UI而已

红影 发表于 2025-3-22 20:04

黑黑真快啊，这么快就弄好了呢{:4_187:}

马黑黑 发表于 2025-3-22 20:05

红影 发表于 2025-3-22 20:04
黑黑真快啊，这么快就弄好了呢

其实早就弄好了，就是自己测试一下

红影 发表于 2025-3-22 21:18

马黑黑 发表于 2025-3-22 20:01
这个简单呀，类似的以前做过的，只是现在重绘UI而已

还是要费心思的{:4_187:}

红影 发表于 2025-3-22 21:18

马黑黑 发表于 2025-3-22 20:05
其实早就弄好了，就是自己测试一下

测试结果很完美（还没出生的儿子）{:4_173:}

马黑黑 发表于 2025-3-22 21:49

红影 发表于 2025-3-22 21:18
测试结果很完美（还没出生的儿子）

{:4_172:}

马黑黑 发表于 2025-3-22 21:50

红影 发表于 2025-3-22 21:18
还是要费心思的

心思倒没啥的，熟门熟路了

小辣椒 发表于 2025-3-22 22:15

播放器出来了{:4_199:}

小辣椒 发表于 2025-3-22 22:16

等实例出来，等套用了{:4_170:}

红影 发表于 2025-3-22 22:20

马黑黑 发表于 2025-3-22 21:49


引用你的原话{:4_173:}

红影 发表于 2025-3-22 22:21

马黑黑 发表于 2025-3-22 21:50
心思倒没啥的，熟门熟路了

也还是要花心思的啊，黑黑辛苦{:4_187:}

梦江南 发表于 2025-3-23 09:24

谢谢黑黑老师辛苦！{:4_190:}

马黑黑 发表于 2025-3-23 12:37

梦江南 发表于 2025-3-23 09:24
谢谢黑黑老师辛苦！

{:4_191:}

马黑黑 发表于 2025-3-23 12:38

红影 发表于 2025-3-22 22:21
也还是要花心思的啊，黑黑辛苦

花心？俺心不花的{:4_170:}

红影 发表于 2025-3-23 19:52

马黑黑 发表于 2025-3-23 12:38
花心？俺心不花的

男性花心不是挺自豪的么，你咋不嘚瑟一下啊{:4_173:}

马黑黑 发表于 2025-3-23 19:56

红影 发表于 2025-3-23 19:52
男性花心不是挺自豪的么，你咋不嘚瑟一下啊
俺不花心，没资本嘚瑟

红影 发表于 2025-3-23 20:32

马黑黑 发表于 2025-3-23 19:56
俺不花心，没资本嘚瑟

这是标榜自己好男人的人设呗{:4_173:}

查看完整版本: range播放器（初稿）