一个纯粹的音频播放按钮网站模板，基于原生JavaScript开发，支持音频缓存、循环播放、随机播放等功能。
项目演示：https://yandujun363.github.io/mai-button/
- 纯原生实现：无框架依赖，性能优异
- 现代化架构：使用ES6模块系统
- 智能缓存：IndexedDB音频缓存，提升加载速度
- 响应式设计：完美适配各种屏幕尺寸
- 模块化配置：轻松管理音频和界面
- 简洁美观：现代化UI设计，支持主题定制
audio-button-template/
├── index.html # 主页面模板
├── styles.css # 样式文件（可主题化）
├── app.js # 主应用程序（ES模块）
├── favicon.jpg # 网站图标
├── README.md # 说明文档
├── public/ # 公共资源目录
│ └── voices/ # 音频文件目录（存放音频文件）
│ ├── example1.mp3
│ └── example2.mp3
└── src/ # 源码目录
├── config/
│ ├── cdns.js # CDN配置文件
│ └── voices.js # 音频配置文件
└── locales/
└── zh.js # 中文语言包
# 克隆项目
git clone https://github.com/yandujun363/audio-button-template.git
# 进入目录
cd audio-button-template
# 启动本地服务器（使用Python）
python -m http.server 8000
# 或使用Node.js
npx serve .在 index.html 中修改以下标记：
<!-- 修改这些标记 -->
<title>{{title}}</title> <!-- 页面标题 -->
<h1>{{title}}</h1> <!-- 主标题 -->
<!-- 在页脚部分 -->
<a href="{{href}}" ...>主播空间</a> <!-- 主播链接 -->
<p class="copyright">{{copyright}}</p> <!-- 版权信息 -->- 将音频文件放入
public/voices/目录 - 在
src/config/voices.js中添加配置：
{
messages: {
zh: "按钮显示文本", // 必填：中文显示
en: "Button Text", // 可选：英文显示
ja: "ボタンテキスト" // 可选：日文显示
},
path: "文件名.mp3", // 相对于public/voices的路径
tag: "分类标签" // 用于分组分类
}- 如果添加了新的分类标签，在
src/locales/zh.js中定义中文显示名称
如果使用CDN托管音频，修改 src/config/cdns.js：
export const CDN_CONFIGS = [
{
id: 'cdn1',
name: '主CDN',
url: 'https://your-cdn.com/path/to/audio/',
description: '主要音频源',
priority: 1 // 优先级，数字越小优先级越高
},
// 更多CDN配置...
];如果不需要CDN，保持空数组 [] 即可使用本地文件模式。
messages: 多语言按钮文本path: 音频文件路径（支持子目录）tag: 分类标签（需要在语言包中定义）
tags: 分类标签的中文显示名称- 可扩展支持更多语言
url: CDN基础URL（必须以/结尾）priority: 优先级（1最高）- 留空则使用本地模式
通过修改CSS变量快速定制主题：
:root {
--primary-color: #7aacdd; /* 主色调 */
--bg-color: #f5f5f5; /* 背景色 */
--card-bg: #ffffff; /* 卡片背景 */
--text-primary: #333333; /* 主要文字颜色 */
--border-radius: 8px; /* 圆角大小 */
/* ... 更多变量 */
}- 点击播放：点击按钮播放对应音频
- 随机播放：随机选择并播放一个音频
- 停止所有：停止所有正在播放的音频
- 洗脑循环：开启后当前音频会循环播放
- 多音频叠加：支持同时播放多个音频
- 使用IndexedDB缓存音频文件
- 30天自动清理旧缓存
- 切换CDN时自动清理相关缓存
- 支持多个CDN源
- 自动选择最优CDN
- 支持本地回退
- 用户可选择和记住偏好
- 桌面端：多列布局，充分利用空间
- 平板端：自适应单列/双列布局
- 手机端：优化触摸体验，单列布局
-
扩展语言支持：
- 创建新的语言文件如
en.js - 在主程序中导入并添加到locales对象
- 添加语言切换界面
- 创建新的语言文件如
-
添加音频效果：
- 在播放逻辑中添加音频处理
- 考虑添加音量控制、播放速度等
-
主题系统：
- 扩展CSS变量系统
- 添加主题切换功能
- 音频文件压缩（建议使用MP3格式）
- 图片资源优化
- 懒加载非必要资源
- 使用Service Worker进行缓存
# 简单部署到GitHub Pages
git add .
git commit -m "部署到GitHub Pages"
git push origin main然后在仓库设置中启用GitHub Pages
- Nginx、Apache等传统服务器
- Vercel、Netlify等现代部署平台
- 任何支持静态文件的托管服务
- 仅使用浏览器本地存储（IndexedDB）
- 不收集用户个人信息
- 所有数据保存在用户本地设备
- 完全客户端运行，无需后端
- 符合GDPR等隐私法规要求
- 不依赖第三方追踪服务
欢迎贡献代码！以下是贡献流程：
- Fork本仓库
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启Pull Request
- 修复bug
- 添加新功能
- 优化性能
- 改进文档
- 翻译本地化
本项目采用 MIT许可证 - 查看 LICENSE 文件了解详情。
注意：音频文件版权归原作者所有，仅用于学习和交流目的。请勿将本项目用于商业用途。
- CaoMeiYouRen/shirakami-haruka-button - 灵感来源
- 所有贡献者和用户
- 开源社区
A: 首次访问会预加载所有音频，后续访问会从缓存加载，速度很快。
A: 浏览器开发者工具 → Application → Storage → Clear site data
A: 支持所有现代浏览器支持的格式：MP3、WAV、OGG等。
A: 在 voices.js 中使用新tag，然后在 zh.js 中添加对应的翻译。
A: 确保 zh.js 中定义了对应的tag翻译，且tag拼写完全一致。
A: CDN服务器必须配置CORS（跨域资源共享），否则浏览器会阻止加载。
如有问题或建议，请：
- 查看GitHub Issues
- 提交新的Issue
- 或通过Pull Request贡献代码
快乐玩耍，文明使用！
希望这个模板能帮助你快速搭建自己的音频按钮网站！