音乐播放器卡片（播放进度 + 切歌音量 CSS 源码）

效果演示（真实可交互）

下方为模拟音乐播放器卡片：点击播放按钮开始”播放”，封面图标进入漂浮动画，进度条每 0.25 秒推进；可直接拖拽进度条跳转，点击列表歌曲切换曲目（时长与标题联动更新），音量滑块会切换静音/低/高三种图标。

完整代码

HTML 结构：卡片包含封面、歌曲信息、进度条（range 输入）、控制按钮组（上一首/播放/下一首）、音量条与播放列表：

<div class="mp-card">
  <div class="mp-cover">🎧</div>
  <div class="mp-info"><h3>盛夏光年</h3><p>粤喵乐队</p></div>
  <div class="mp-progress">
    <span>0:00</span>
    <input type="range" min="0" max="100" value="0">
    <span>3:24</span>
  </div>
  <div class="mp-controls">
    <button>⏮</button><button class="mp-play">▶</button><button>⏭</button>
    <div class="mp-vol"><span>🔊</span><input type="range" value="80"></div>
  </div>
  <ul class="mp-list">
    <li class="mp-song" data-dur="204">盛夏光年</li>
  </ul>
</div>

核心 CSS：进度条用原生 range 输入框加自定义滑块，通过 CSS 变量 --fill 控制已播放部分的渐变填充：

.mp-range {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #6c8cff var(--fill, 0%), #2b3448 var(--fill, 0%));
}
.mp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #6c8cff;
}
.mp-card.playing .mp-cover { animation: mp-float 3s ease-in-out infinite; }

原生 JS 播放逻辑（模拟时钟 + 进度渲染）：

function tick() {
  pos += 0.25;                       // 每 250ms 推进 0.25 秒
  if (pos >= dur) { pos = 0; loadSong((idx + 1) % songs.length); }
  updateSeek();
}
playBtn.addEventListener('click', () => {
  playing = !playing;
  playBtn.textContent = playing ? '⏸' : '▶';
  card.classList.toggle('playing', playing);
  if (playing) timer = setInterval(tick, 250);
  else clearInterval(timer);
});
seek.addEventListener('input', () => {
  pos = dur * parseFloat(seek.value) / 100;   // 拖拽跳转
  updateSeek();
});

参数说明

兼容性与性能

• 只使用原生 HTML 表单控件与标准 API，无需 Web Audio 能力，所有浏览器可用
• range 滑块样式需 -webkit- 与 -moz- 双前缀，未覆盖的浏览器仍显示原生滑块
• 计时采用 setInterval 模拟，未加载真实音频，零带宽零延迟；接入真实 <audio> 时应改用 timeupdate 事件
• CSS 动画只作用于封面 transform，播放中不触发布局抖动

常见问题

Q: 怎么接入真实的音频文件？ 用 <audio> 标签替换模拟时钟：监听 timeupdate 更新进度，play/pause 事件同步按钮状态，拖拽时用 currentTime 赋值即可。

Q: 进度条在 Firefox 里样式不同怎么办？ 已提供 ::-moz-range-thumb 前缀样式；若追求完全一致，可改用 div 自绘进度条加点击/拖拽事件。

Q: 列表歌曲多了如何滚动？ 给 .mp-list 设置 max-height 与 overflow-y: auto，并用细滚动条样式保持视觉统一。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，替换封面、歌单与配色即可。