Add lofi/focus music toggle in Pomodoro timer🎵
维护者通常 2 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 68/100
- Issue 类型
- 功能
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- javascript, react
- 领域
- frontend
调研方向
从 issue 中提到的文件 client/src/components/Pomodoro/PomodoroTimer.jsx 开始，检查计时器如何渲染控件以及管理组件状态。使用 issue 中描述的 Web Audio API 方法添加环境音开关；完成标准是无需额外软件包即可开启和关闭环境音，且计时器仍然可以正常使用。
由索引模型根据 Issue 内容生成。
描述
Add lofi/focus music toggle in Pomodoro timer
File: client/src/components/Pomodoro/PomodoroTimer.jsx
Pomodoro timer runs silently 💀
Add ambient focus sounds using Web Audio fr!!
Fix: generate lofi-style ambient tone:
const playAmbient = () => {
const ctx = new AudioContext()
// create soft rain-like white noise:
const bufferSize = 2 * ctx.sampleRate
const buffer = ctx.createBuffer(
1, bufferSize, ctx.sampleRate
)
const data = buffer.getChannelData(0)
for (let i = 0; i < bufferSize; i++) {
data[i] = Math.random() * 2 - 1
}
const source = ctx.createBufferSource()
source.buffer = buffer
source.loop = true
// lowpass filter for "rain" effect:
const filter = ctx.createBiquadFilter()
filter.type = 'lowpass'
filter.frequency.value = 400
const gain = ctx.createGain()
gain.gain.value = 0.05 // very quiet
source.connect(filter)
filter.connect(gain)
gain.connect(ctx.destination)
source.start()
return { source, ctx }
}
const [ambient, setAmbient] = useState(null)
const toggleAmbient = () => {
if (ambient) {
ambient.source.stop()
ambient.ctx.close()
setAmbient(null)
} else {
setAmbient(playAmbient())
}
}
<button onClick={toggleAmbient}
className={text-xs transition ${ambient ? 'text-green-400' : 'text-[#555]'}}>
{ambient ? '🎵 on' : '🎵 off'}
Zero packages — pure Web Audio API ✅
~30 lines! No backend needed 🎯
People will use DevBoard JUST for this!! 🔥
- 主要语言
- JavaScript
- 星标
- 39
- 派生
- 105
- 平均合并
- 1 天 11 小时
- 30 天内合并 PR
- 47
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
anoopcodehack/DevBoard 的其他 Issue
-
enhancement good first issue
难度 2/5 1-3 小时 新手友好度 72/100
anoopcodehack/DevBoard#647 ·
维护者通常 2 天内回复
-
Show "No snippets yet" empty state in task modal 💻可能已有人在做 @tu-lasizzzz 于 2 天前认领。 未关闭good first issue
难度 1/5 1 小时以内 新手友好度 96/100
anoopcodehack/DevBoard#639 · 2 条评论 · 已指派 1 人 ·
维护者通常 2 天内回复
-
good first issue
难度 1/5 1 小时以内 新手友好度 96/100
anoopcodehack/DevBoard#637 ·
维护者通常 2 天内回复
-
enhancement good first issue
难度 2/5 1-3 小时 新手友好度 70/100
anoopcodehack/DevBoard#630 ·
维护者通常 2 天内回复
-
enhancement good first issue
难度 2/5 1-3 小时 新手友好度 85/100
anoopcodehack/DevBoard#627 ·
维护者通常 2 天内回复
查看 anoopcodehack/DevBoard 的全部 Issue
相似的 Issue
-
status: waiting for maintainer
难度 2/5 1-3 小时 新手友好度 74/100
mui/material-ui#49547 ·
维护者通常 1 天内回复
-
type/bug
难度 2/5 1-3 小时 新手友好度 84/100
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 66/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 67/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
rescript-lang/rescript#8996 ·
维护者通常 1 天内回复