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 於 1 天前認領。 未關閉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
-
難度 2/5 1-3 小時 新手友好度 67/100
uoftblueprint/canada-basketball#67 ·
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 61/100
Fei2411/DeepSeek-Bot#456 ·
維護者通常 1 天內回覆
-
área:app área:produto sem-fase tipo:decisão
難度 2/5 1-3 小時 新手友好度 63/100
Varanda-org/varanda#91 ·
-
0️⃣ phase/new
難度 2/5 1-3 小時 新手友好度 78/100
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 65/100
auth0/express-openid-connect#901 ·
維護者通常 1 天內回覆