本源码是一款面向中文播客创作者的单页节目主页模板，采用深紫底色搭配琥珀金与亮粉紫作为强调色，夜间氛围浓厚，契合「深夜脑电波」这类长音频节目的调性。首屏展示播客封面、节目名称、平台分发入口与收听数据，快速建立节目品牌认知。
核心功能包括一个完整的「在线播放器」：播放/暂停、快进快退、可拖拽进度条、当前时间显示、倍速标签等一应俱全；下方近期剧集列表展示集数、标题、简介、时长与播放量，点击任意剧集可同步更新播放器信息；主播介绍区双栏卡片式布局；底部订阅表单支持邮箱订阅。封面音频波纹、月亮光晕等装饰元素均为纯 CSS 动画。
适合独立播客主播、播客工作室作为节目官网或落地页使用。替换封面、节目信息、分发平台链接与剧集列表后，即可部署为长期可用的节目主页。
使用教程
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>深夜脑电波 · 播客节目主页</title>
<style>
:root{
--bg:#120d1c;
--bg2:#1a1327;
--card:#1f1830;
--card2:#271e3b;
--line:#332748;
--text:#f2edfb;
--muted:#a094bb;
--amber:#ffb020;
--amber-d:#ff8a3d;
--purple:#a855f7;
--pink:#ec4899;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
background:var(--bg);color:var(--text);line-height:1.75;
-webkit-font-smoothing:antialiased;
}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
/* ---------- 顶部 ---------- */
nav{
position:sticky;top:0;z-index:60;background:rgba(18,13,28,.82);
backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
nav .inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.brand .w{
width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--amber),var(--pink));color:#1a1327;
}
.nlinks{display:flex;gap:24px;font-size:13.5px;color:var(--muted)}
.nlinks a:hover{color:var(--text)}
.sub-btn{
padding:8px 18px;border-radius:9px;font-size:13.5px;font-weight:500;
background:linear-gradient(120deg,var(--amber),var(--amber-d));color:#26170a;transition:.22s;
}
.sub-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,176,32,.28)}
/* ---------- Hero ---------- */
.hero{
position:relative;padding:60px 0 52px;overflow:hidden;
background:
radial-gradient(circle at 14% 10%, rgba(168,85,247,.26), transparent 46%),
radial-gradient(circle at 86% 84%, rgba(255,176,32,.18), transparent 48%);
}
.hero .container{display:grid;grid-template-columns:268px 1fr;gap:38px;align-items:center}
.cover-art{
width:268px;height:268px;border-radius:24px;position:relative;overflow:hidden;
background:linear-gradient(150deg,#4c1d95,#7c3aed 45%,#ec4899);
box-shadow:0 30px 62px rgba(0,0,0,.55);
display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.cover-art::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 28% 24%, rgba(255,255,255,.28), transparent 45%);
}
.cover-art .moon{
width:78px;height:78px;border-radius:50%;
background:radial-gradient(circle at 34% 32%, #fff8e6, #ffd479 62%, #ffb020);
box-shadow:0 0 44px rgba(255,200,90,.6);position:relative;z-index:2;
}
.cover-art .ct{
position:relative;z-index:2;margin-top:20px;text-align:center;
}
.cover-art .ct b{display:block;font-size:23px;font-weight:800;letter-spacing:.08em}
.cover-art .ct span{font-size:11px;letter-spacing:.36em;color:rgba(255,255,255,.72)}
.cover-art .waves{
position:absolute;bottom:0;left:0;right:0;height:64px;display:flex;align-items:flex-end;
justify-content:center;gap:3px;padding-bottom:14px;z-index:2;
}
.cover-art .waves i{
width:3px;background:rgba(255,255,255,.5);border-radius:2px;display:block;
animation:wv 1.3s ease-in-out infinite;
}
@keyframes wv{0%,100%{height:8px}50%{height:26px}}
.cover-art .waves i:nth-child(2){animation-delay:.1s}
.cover-art .waves i:nth-child(3){animation-delay:.2s}
.cover-art .waves i:nth-child(4){animation-delay:.3s}
.cover-art .waves i:nth-child(5){animation-delay:.15s}
.cover-art .waves i:nth-child(6){animation-delay:.25s}
.cover-art .waves i:nth-child(7){animation-delay:.05s}
.cover-art .waves i:nth-child(8){animation-delay:.35s}
.cover-art .waves i:nth-child(9){animation-delay:.2s}
.cover-art .waves i:nth-child(10){animation-delay:.1s}
.hinfo .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hinfo .tags span{
font-size:11.5px;padding:4px 12px;border-radius:20px;
background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.28);color:#d8b4fe;
}
.hinfo .tags span.a{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.28);color:#fcd34d}
.hinfo h1{font-size:clamp(30px,4.6vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.24}
.hinfo .by{margin-top:10px;font-size:13.5px;color:var(--muted)}
.hinfo .desc{margin-top:14px;font-size:15px;color:#c6bbdd;max-width:560px}
.hstats{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap}
.hstats div b{display:block;font-size:20px;font-weight:700}
.hstats div span{font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.plat{display:flex;gap:9px;margin-top:24px;flex-wrap:wrap}
.plat a{
display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:10px;
background:var(--card);border:1px solid var(--line);font-size:13px;transition:.22s;
}
.plat a:hover{transform:translateY(-2px);border-color:var(--purple);background:var(--card2)}
/* ---------- 播放器 ---------- */
.player{
margin-top:6px;background:linear-gradient(120deg,var(--card),var(--card2));
border:1px solid var(--line);border-radius:20px;padding:22px 24px;
box-shadow:0 20px 46px rgba(0,0,0,.42);
}
.p-top{display:flex;align-items:center;gap:16px}
.p-thumb{
width:62px;height:62px;border-radius:13px;flex:none;
background:linear-gradient(140deg,var(--amber),var(--pink));
display:flex;align-items:center;justify-content:center;color:#1a1327;font-weight:800;font-size:18px;
}
.p-meta{flex:1;min-width:0}
.p-meta small{font-size:11px;color:var(--amber);letter-spacing:.16em}
.p-meta b{display:block;font-size:16.5px;font-weight:650;margin-top:2px}
.p-meta span{font-size:12.5px;color:var(--muted)}
.p-ctrl{display:flex;align-items:center;gap:12px}
.pbtn{
width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);
color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;
}
.pbtn:hover{border-color:var(--purple);color:var(--purple)}
.pbtn.main{
width:50px;height:50px;border:none;
background:linear-gradient(120deg,var(--amber),var(--amber-d));color:#26170a;
box-shadow:0 8px 20px rgba(255,150,40,.32);
}
.pbtn.main:hover{transform:scale(1.06);color:#26170a}
.p-bar{display:flex;align-items:center;gap:12px;margin-top:18px}
.p-bar .t{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.track{
flex:1;height:6px;border-radius:4px;background:#2f2545;position:relative;cursor:pointer;overflow:hidden;
}
.track .fill{
position:absolute;left:0;top:0;bottom:0;width:34%;border-radius:4px;
background:linear-gradient(90deg,var(--amber),var(--pink));
}
.track .knob{
position:absolute;left:34%;top:50%;transform:translate(-50%,-50%);
width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.speed{
font-size:11.5px;padding:3px 9px;border-radius:6px;background:var(--bg2);
border:1px solid var(--line);color:var(--muted);flex:none;
}
/* ---------- 区块 ---------- */
section{padding:60px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:24px;font-weight:750;letter-spacing:-.01em}
.sec-head small{font-size:12.5px;color:var(--muted)}
.more{font-size:13px;color:var(--amber)}
/* ---------- 剧集列表 ---------- */
.eps{display:flex;flex-direction:column;gap:12px}
.ep{
display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;
background:var(--card);border:1px solid var(--line);transition:.24s;cursor:pointer;
}
.ep:hover{transform:translateX(4px);border-color:var(--purple);background:var(--card2)}
.ep .num{
width:44px;height:44px;border-radius:12px;flex:none;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
background:rgba(168,85,247,.14);color:#d8b4fe;
}
.ep:nth-child(1) .num{background:linear-gradient(140deg,var(--amber),var(--amber-d));color:#26170a}
.ep .body{flex:1;min-width:0}
.ep .body .line1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ep .body b{font-size:15.5px;font-weight:600}
.ep .body .new{
font-size:10px;padding:2px 7px;border-radius:5px;background:var(--pink);color:#fff;letter-spacing:.05em;
}
.ep .body p{font-size:13px;color:var(--muted);margin-top:4px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep .body .meta{display:flex;gap:14px;margin-top:8px;font-size:11.5px;color:#8579a3}
.ep .play{
width:40px;height:40px;border-radius:50%;flex:none;
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
color:var(--amber);transition:.2s;
}
.ep:hover .play{background:var(--amber);color:#26170a;border-color:var(--amber)}
/* ---------- 主播 ---------- */
.hosts{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.host{
display:flex;gap:16px;padding:22px;border-radius:18px;
background:var(--card);border:1px solid var(--line);
}
.host .av{
width:66px;height:66px;border-radius:18px;flex:none;
display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#1a1327;
background:linear-gradient(140deg,var(--amber),var(--pink));
}
.host:nth-child(2) .av{background:linear-gradient(140deg,#a855f7,#38bdf8)}
.host b{font-size:16px;font-weight:650}
.host .r{font-size:12px;color:var(--amber);margin-top:2px}
.host:nth-child(2) .r{color:#7dd3fc}
.host p{font-size:13.2px;color:var(--muted);margin-top:8px;line-height:1.75}
/* ---------- 订阅 ---------- */
.subscribe{text-align:center}
.subscribe h2{font-size:28px;font-weight:800;letter-spacing:-.02em}
.subscribe p{color:var(--muted);margin-top:10px;font-size:14.5px}
.sform{
display:flex;gap:10px;max-width:440px;margin:26px auto 0;flex-wrap:wrap;
}
.sform input{
flex:1;min-width:200px;padding:13px 16px;border-radius:11px;
background:var(--card);border:1px solid var(--line);color:var(--text);
font-family:inherit;font-size:14px;outline:none;transition:border-color .2s;
}
.sform input:focus{border-color:var(--purple)}
.sform button{
padding:13px 26px;border-radius:11px;border:none;cursor:pointer;font-family:inherit;
font-size:14px;font-weight:600;color:#26170a;
background:linear-gradient(120deg,var(--amber),var(--amber-d));transition:.22s;
}
.sform button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,160,40,.3)}
.tiny{font-size:11.5px;color:#7d719a;margin-top:14px}
footer{border-top:1px solid var(--line);padding:24px 0;font-size:12.5px;color:#7d719a}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{margin-left:18px}
footer a:hover{color:var(--text)}
@media(max-width:880px){
.hero .container{grid-template-columns:1fr;justify-items:center;text-align:center}
.hinfo .tags,.hstats,.plat{justify-content:center}
.hinfo .desc{margin-left:auto;margin-right:auto}
.hgrid{grid-template-columns:1fr}
.nlinks{display:none}
}
@media(max-width:560px){
.p-top{flex-wrap:wrap}
.p-ctrl{width:100%;justify-content:center}
.ep{flex-wrap:wrap}
.cover-art{width:220px;height:220px}
}
</style>
</head>
<body>
<nav>
<div class="container inner">
<div class="brand">
<span class="w"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v4M8 22h8"/></svg></span>
深夜脑电波
</div>
<div class="nlinks">
<a href="#eps">全部剧集</a>
<a href="#host">关于主播</a>
<a href="#sub">订阅更新</a>
<a href="#">留言板</a>
</div>
<a class="sub-btn" href="#sub">订阅节目</a>
</div>
</nav>
<header class="hero">
<div class="container">
<div class="cover-art">
<div class="moon"></div>
<div class="ct"><b>深夜脑电波</b><span>MIDNIGHT WAVES</span></div>
<div class="waves"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div>
<div class="hinfo">
<div class="tags"><span>科技人文</span><span class="a">每周三更新</span><span>中文播客</span></div>
<h1>深夜脑电波</h1>
<p class="by">主播：老徐 & 阿薇 · 已更新 148 期</p>
<p class="desc">两个失眠的人，在深夜聊聊技术、创作与生活里那些说不清楚的事。不追热点，不给答案，只提供一点点陪伴和一堆没用但有趣的思考。</p>
<div class="hstats">
<div><b>148</b><span>总期数</span></div>
<div><b>62 万</b><span>订阅用户</span></div>
<div><b>4.9</b><span>平台评分</span></div>
<div><b>3 年</b><span>持续更新</span></div>
</div>
<div class="plat">
<a href="#"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 4.6a5.4 5.4 0 0 1 5.4 5.4c0 .6-.5 1.1-1.1 1.1s-1.1-.5-1.1-1.1A3.2 3.2 0 1 0 12 15.2c.6 0 1.1.5 1.1 1.1s-.5 1.1-1.1 1.1A5.4 5.4 0 0 1 12 6.6z"/></svg> Apple Podcasts</a>
<a href="#"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1.6" fill="currentColor" stroke="none"/></svg> 小宇宙</a>
<a href="#"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 12a4 4 0 0 1 8 0"/><path d="M6 15a6 6 0 0 1 12 0"/></svg> 喜马拉雅</a>
<a href="#"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> Spotify</a>
</div>
</div>
</div>
</header>
<div class="container">
<div class="player">
<div class="p-top">
<div class="p-thumb">148</div>
<div class="p-meta">
<small>正在播放 · 最新一期</small>
<b>Vol.148 我们为什么总在深夜才有灵感？</b>
<span>2026 年 7 月 29 日 · 时长 68 分钟</span>
</div>
<div class="p-ctrl">
<button class="pbtn" title="后退 15 秒">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L4 12l7 7"/><path d="M20 12a8 8 0 0 0-8-8H4"/></svg>
</button>
<button class="pbtn main" id="pp" title="播放">
<svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4l13 8-13 8z"/></svg>
</button>
<button class="pbtn" title="前进 30 秒">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 5l7 7-7 7"/><path d="M4 12a8 8 0 0 1 8-8h8"/></svg>
</button>
</div>
</div>
<div class="p-bar">
<span class="t" id="cur">23:12</span>
<div class="track" id="tk"><div class="fill" id="fl"></div><div class="knob" id="kb"></div></div>
<span class="t">68:04</span>
<span class="speed">1.0×</span>
</div>
</div>
</div>
<section id="eps">
<div class="container">
<div class="sec-head">
<div><h2>近期剧集</h2><small>共 148 期 · 按更新时间排序</small></div>
<a class="more" href="#">查看全部 →</a>
</div>
<div class="eps">
<div class="ep">
<div class="num">148</div>
<div class="body">
<div class="line1"><b>我们为什么总在深夜才有灵感？</b><span class="new">最新</span></div>
<p>从多巴胺曲线聊到创作者的生物钟，两个夜猫子试图为自己的熬夜找一点科学依据，最后发现问题可能出在白天。</p>
<div class="meta"><span>2026-07-29</span><span>68 分钟</span><span>4.2 万次播放</span></div>
</div>
<div class="play"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4l13 8-13 8z"/></svg></div>
</div>
<div class="ep">
<div class="num">147</div>
<div class="body">
<div class="line1"><b>做了三年播客，我们赚到钱了吗</b></div>
<p>把后台数据摊开来讲：广告、会员、周边分别贡献多少收入，以及为什么我们还是没辞职去全职做这件事。</p>
<div class="meta"><span>2026-07-22</span><span>74 分钟</span><span>5.8 万次播放</span></div>
</div>
<div class="play"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4l13 8-13 8z"/></svg></div>
</div>
<div class="ep">
<div class="num">146</div>
<div class="body">
<div class="line1"><b>当 AI 会写代码之后，程序员在做什么</b></div>
<p>邀请三位一线工程师聊真实的工作变化：哪些环节被替代了，哪些反而更累了，以及新人还该不该入行。</p>
<div class="meta"><span>2026-07-15</span><span>92 分钟</span><span>11.3 万次播放</span></div>
</div>
<div class="play"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4l13 8-13 8z"/></svg></div>
</div>
<div class="ep">
<div class="num">145</div>
<div class="body">
<div class="line1"><b>搬到县城的第 180 天</b></div>
<p>阿薇从上海搬到浙南小城已经半年，房租降了 80%，通勤变成步行，但也失去了一些东西。一期很生活的闲聊。</p>
<div class="meta"><span>2026-07-08</span><span>56 分钟</span><span>7.1 万次播放</span></div>
</div>
<div class="play"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4l13 8-13 8z"/></svg></div>
</div>
<div class="ep">
<div class="num">144</div>
<div class="body">
<div class="line1"><b>那些被我们高估的效率工具</b></div>
<p>盘点这些年买过、装过、然后彻底遗忘的效率软件，顺便聊聊工具焦虑：为什么整理笔记比读书更让人上瘾。</p>
<div class="meta"><span>2026-07-01</span><span>63 分钟</span><span>6.4 万次播放</span></div>
</div>
<div class="play"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4l13 8-13 8z"/></svg></div>
</div>
</div>
</div>
</section>
<section class="hosts" id="host">
<div class="container">
<div class="sec-head"><div><h2>关于主播</h2><small>两个在深夜清醒的人</small></div></div>
<div class="hgrid">
<div class="host">
<div class="av">徐</div>
<div>
<b>老徐</b>
<div class="r">技术负责人 / 十年码龄</div>
<p>写过后端也带过团队，现在主要负责节目里那些「听起来很有道理但没人验证」的技术观点。收集机械键盘和过期咖啡豆。</p>
</div>
</div>
<div class="host">
<div class="av">薇</div>
<div>
<b>阿薇</b>
<div class="r">自由撰稿人 / 前媒体编辑</div>
<p>负责把老徐的话翻译成人类能听懂的语言。喜欢在深夜写稿，坚信最好的句子都出现在凌晨两点到三点之间。</p>
</div>
</div>
</div>
</div>
</section>
<section class="subscribe" id="sub">
<div class="container">
<h2>每周三，我们在你耳边</h2>
<p>留下邮箱，新一期上线时第一时间收到提醒，附带主播手写的节目笔记</p>
<form class="sform" onsubmit="event.preventDefault();this.querySelector('button').textContent='订阅成功 ✓';">
<input type="email" placeholder="你的邮箱地址" required>
<button type="submit">订 阅</button>
</form>
<p class="tiny">我们不发广告，随时可以一键退订</p>
</div>
</section>
<footer>
<div class="container">
<span>© 2026 深夜脑电波 Midnight Waves · 本页面为演示模板</span>
<span><a href="#">RSS 订阅</a><a href="#">商务合作</a><a href="#">听友群</a></span>
</div>
</footer>
<script>
var playing = false, pct = 34;
var pp = document.getElementById("pp"),
fl = document.getElementById("fl"),
kb = document.getElementById("kb"),
cur = document.getElementById("cur"),
tk = document.getElementById("tk");
var TOTAL = 68*60 + 4;
function fmt(s){
var m = Math.floor(s/60), x = Math.floor(s%60);
return (m<10?"0":"")+m + ":" + (x<10?"0":"")+x;
}
function render(){
fl.style.width = pct + "%";
kb.style.left = pct + "%";
cur.textContent = fmt(TOTAL * pct / 100);
}
pp.addEventListener("click", function(){
playing = !playing;
pp.innerHTML = playing
? '<svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>'
: '<svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4l13 8-13 8z"/></svg>';
});
tk.addEventListener("click", function(e){
var r = tk.getBoundingClientRect();
pct = Math.max(0, Math.min(100, (e.clientX - r.left) / r.width * 100));
render();
});
setInterval(function(){
if(playing){ pct = (pct + 0.06) % 100; render(); }
}, 300);
render();
document.querySelectorAll(".ep").forEach(function(ep){
ep.addEventListener("click", function(){
var t = ep.querySelector("b").textContent;
var n = ep.querySelector(".num").textContent;
document.querySelector(".p-thumb").textContent = n;
document.querySelector(".p-meta b").textContent = "Vol." + n + " " + t;
pct = 0; render();
});
});
</script>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1807.html
微信扫一扫 
支付宝扫一扫 
