Files
fj/index.html
T
selfreleaseandDevin 198ee1c911 feat: 循环播放、单音频拼接播放、程序合成晨钟暮鼓配乐
- 播放改为全文拼接成单个 WAV:段间 0.8s/尾部 3s 静音写入文件,
  audio.loop 原生循环,解决手机锁屏/后台时定时器冻结导致的中断
- 新增"循环"开关与"配乐"开关
- 背景音乐 Web Audio 实时合成:低频 drone 垫底(相邻根音慢滑),
  晨钟(大钟非谐泛音簇)+ 暮鼓(膜鸣+击边噪声)+ 引磬稀疏点缀
- deploy.sh 一键部署(rsync + 重启 + 健康检查,不同步 .env)
- 新增页签图标与桌面 logo

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-09-29 09:28:55 +08:00

87 lines
4.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心经</title>
<link rel="icon" type="image/svg+xml" href="icon.svg">
<link rel="apple-touch-icon" href="icon-180.png">
<link rel="stylesheet" href="style.css?v=4">
</head>
<body>
<div class="site-logo" aria-hidden="true">
<img src="icon.svg" alt="" class="logo-mark">
<span class="logo-text">佛经诵读</span>
</div>
<main class="page">
<section class="hero">
<div class="seal" id="seal" aria-hidden="true">心经</div>
<div class="hero-text">
<h1 class="sutra-title" id="sutra-title">般若波罗蜜多心经</h1>
<p class="subtitle" id="sutra-sub">唐三藏法师 玄奘 译</p>
</div>
</section>
<section class="panel player-card" id="player-card" aria-label="语音诵读">
<div class="player-row">
<button id="btn-play" class="btn-play" type="button" aria-label="播放或停止">
<svg viewBox="0 0 24 24" class="icon icon-play"><path d="M8 5v14l11-7z"/></svg>
<svg viewBox="0 0 24 24" class="icon icon-stop"><rect x="6" y="6" width="12" height="12" rx="1.5"/></svg>
<span class="play-label">播 放</span>
</button>
<div class="tool-group" role="group" aria-label="经典">
<span class="tool-name">经典</span>
<button type="button" data-sutra="xinjing" class="sutra-btn active">心经</button>
<button type="button" data-sutra="jingang" class="sutra-btn">金刚经</button>
</div>
<div class="player-meta">
<label class="voice-label" for="voice-select">诵读音色</label>
<select id="voice-select"></select>
</div>
<span class="flex-break" aria-hidden="true"></span>
<div class="tool-group" role="group" aria-label="字号">
<span class="tool-name">字号</span>
<button type="button" data-size="lg" class="size-btn">大</button>
<button type="button" data-size="md" class="size-btn active">中</button>
<button type="button" data-size="sm" class="size-btn">小</button>
</div>
<div class="tool-group" role="group" aria-label="排版">
<button type="button" id="btn-layout" class="layout-btn">切换竖排</button>
</div>
<div class="tool-group" role="group" aria-label="模式">
<button type="button" id="btn-loop" class="layout-btn" aria-pressed="false">循环</button>
<button type="button" id="btn-bgm" class="layout-btn" aria-pressed="false">配乐</button>
</div>
<div id="status" class="status" role="status"></div>
<button type="button" id="btn-expand" class="expand-btn" aria-expanded="false" aria-label="展开设置" title="设置">
<span class="expand-label">设置</span>
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</button>
</div>
<div id="progress" class="progress" aria-hidden="true"></div>
</section>
<article class="sutra-paper">
<div id="sutra" class="sutra size-md" role="document"></div>
</article>
<nav class="pager" id="pager" aria-label="分页" hidden>
<button type="button" id="btn-prev" class="pager-btn">‹ 上一页</button>
<span id="page-info" class="page-info"></span>
<button type="button" id="btn-next" class="pager-btn">下一页 ›</button>
</nav>
</main>
<footer class="site-footer">
<p>点击段落可从该段起诵读 · ← → 键翻页 · 语音由千问 Qwen3-TTS 合成 · 经文来源:<a id="sutra-source" href="https://www.dpm.org.cn/lemmas/243222.html" target="_blank" rel="noopener">故宫博物院</a></p>
</footer>
<audio id="audio" preload="auto"></audio>
<script src="app.js?v=4"></script>
</body>
</html>