声屿 SoundIsle 音乐播放器 HTML 单页源码

这是一个聚焦氛围感和沉浸体验的音乐播放器单页模板，适合独立音乐人、播客创作者或音乐类 App 的产品展示页。整体采用深色渐变背景搭配青绿色高亮，模拟深夜播放器的视觉氛围，让封面、歌名和播放控件成为视觉绝对焦点。

页面包含完整的播放控制区：封面、歌曲信息、进度条、播放/暂停/上下曲、音量与播放模式切换；下方还附带了一个迷你歌单，方便展示专辑曲目或推荐列表。所有按钮和进度条都做了悬停与点击反馈，增强交互真实感。

如果你的项目需要一张高质感的音乐播放落地页、作品试听页，或者想给客户演示播放器界面概念，这个模板可以直接修改封面与曲目信息后上线使用。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>声屿 SoundIsle · 音乐播放器</title>
<style>
:root{
  --bg:#04141a; --bg2:#0a2e33; --ink:#eafff7; --sub:#7fbfb0;
  --acc:#1de9b6; --acc2:#00b8d4;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);
  background:radial-gradient(900px 500px at 80% -10%,var(--acc2),transparent),
             radial-gradient(700px 600px at -10% 110%,var(--acc),transparent),
             linear-gradient(160deg,var(--bg),var(--bg2));
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.player{width:min(420px,100%);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:26px;padding:26px;backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,184,212,.18)}
.cover{width:100%;aspect-ratio:1/1;border-radius:20px;margin-bottom:20px;
  background:conic-gradient(from 200deg,var(--acc),var(--acc2),#b388ff,var(--acc));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cover .disc{width:42%;aspect-ratio:1/1;border-radius:50%;background:#06222a;
  border:6px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;
  font-size:30px;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.meta{text-align:center;margin-bottom:18px}
.meta h2{font-size:20px}
.meta p{color:var(--sub);font-size:13px;margin-top:4px}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:8px}
.bar i{display:block;height:100%;width:38%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.time{display:flex;justify-content:space-between;color:var(--sub);font-size:12px;margin-bottom:16px}
.ctrl{display:flex;align-items:center;justify-content:center;gap:22px}
.ctrl button{background:none;border:none;color:var(--ink);cursor:pointer;font-size:22px}
.ctrl .play{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#04222a;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(29,233,182,.4)}
.list{margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.list .t{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;color:var(--sub)}
.list .t.on{color:var(--acc);font-weight:700}
.eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.eq i{width:3px;background:var(--acc);border-radius:2px;animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:5px}50%{height:16px}}
</style>
</head>
<body>
<div class="player">
  <div class="cover"><div class="disc">🎵</div></div>
  <div class="meta">
    <h2>海风与旧信</h2>
    <p>声屿乐队 · 潮汐专辑</p>
  </div>
  <div class="bar"><i></i></div>
  <div class="time"><span>01:24</span><span>03:38</span></div>
  <div class="ctrl">
    <button>🔁</button>
    <button>⏮</button>
    <button class="play">⏸</button>
    <button>⏭</button>
    <button>🔀</button>
  </div>
  <div class="list">
    <div class="t on"><span><span class="eq" style="display:inline-flex;vertical-align:middle;margin-right:8px"><i></i><i></i><i></i><i></i></span>海风与旧信</span><span>03:38</span></div>
    <div class="t"><span>午夜灯塔</span><span>04:12</span></div>
    <div class="t"><span>退潮以后</span><span>03:05</span></div>
    <div class="t"><span>给明天的信</span><span>05:01</span></div>
  </div>
</div>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1937.html