🌙 助眠音频播放器#

一个纯前端的Vue3音频播放器，专为辅助睡眠设计。支持单曲循环、后台播放和锁屏控制。

项目地址: GitHub - Elaina2003/help-sleep-player

✨ 特性#

🔄 单曲循环播放 - 自动循环播放选中的音频
⏰ 定时停止功能 - 设置播放时长，自动停止
🌙 淡出模式 - 在播放结束前逐渐降低音量，避免突然停止导致惊醒（IOS不支持）
🎨 暗黑模式 - 护眼的夜间模式
🔒 后台播放 - 支持锁屏后继续播放
🎵 Media Session API - 锁屏界面显示播放信息和控制按钮
💤 Screen Wake Lock API - 防休眠功能，保持屏幕常亮
🌐 支持在线音频 - 可以添加本地或在线音频URL
💾 数据持久化 - 自动保存音量、主题和上次播放的音频
📊 可视化进度条 - 实时显示播放进度

🚀 快速开始#

启动本地服务器（必须）#

由于浏览器安全限制，必须使用本地服务器运行：

1
# 使用 Node.js
2
npx serve

然后在浏览器访问：http://localhost:8000

在线部署#

可以部署到以下平台获得更好体验：

GitHub Pages - 免费，推荐
Vercel - 免费且快速
Netlify - 免费托管
Cloudflare Pages - 全球CDN加速

🎵 添加音频#

内置音频#

播放器已包含以下白噪音：

助眠白噪音
纯白噪音
嘘声（Shush Sound）
雨声系列（大雨、小雨）
火车系列（绿皮火车、雨天火车、坐火车、雪国列车）
自然声音（海上暴风雨、夏夜、露营、露营小雨）
舒缓声音（柴火煮水、水疗、小鸭子）

音频URL格式#

本地音频: 使用相对路径，如 './assets/music.mp3'
在线音频: 使用完整URL，如 'https://example.com/music.mp3'
确保: 每个音频有唯一的 id

支持的音频格式#

MP3 ✅
WAV ✅
OGG ✅
AAC ✅
M4A ✅

⚠️ 注意事项#

iOS 设备特别说明#

⚠️ iOS 系统限制：

🔊 音量控制：由于 iOS 系统限制，网页无法通过 JavaScript 控制音量
- 请使用设备侧边的物理音量键调节音量
- 音量滑块在 iOS 设备上会自动隐藏
🔇 静音开关：请确保设备侧边的静音开关已关闭，否则可能没有声音
🌙 淡出模式：由于音量控制限制，iOS 设备不支持淡出模式功能

建议使用方式：

关闭设备静音开关
使用物理音量键调节到合适音量
点击播放按钮开始播放
设置定时停止功能

关于后台播放#

iOS Safari
- 需要手动点击播放按钮才能开始
- 锁屏后会继续播放
- 锁屏界面可使用媒体控制
- 音量仅可通过物理按键调节
Android Chrome
- 同样需要用户交互才能播放
- 支持后台播放
- 支持网页音量控制
- 支持淡出模式功能
- 部分设备可能有省电限制
微信/QQ 内置浏览器
- 可能限制后台播放
- 建议使用系统浏览器（Safari/Chrome）

屏幕常亮#

需要 HTTPS 环境（localhost 除外）
部分旧设备可能不支持
低电量时系统可能强制关闭

淡出模式#

淡出功能会在最后3分钟内逐渐降低音量
每10秒降低一次音量，直到完全停止
可以在设置定时后随时开启或关闭淡出模式
淡出模式设置会自动保存，下次使用时保持生效
⚠️ iOS 设备不支持淡出模式（由于系统音量控制限制）

📂 项目结构#

1
baby-sleep-player/
2
├── index.html          # 主页面
3
├── src/
4
│   ├── main.js         # Vue 应用逻辑（在这里修改音频列表）
5
│   └── style.css       # 样式文件
6
├── assets/             # 音频文件目录
7
│   └── 哄睡白噪音.mp3
8
└── README.md           # 项目说明