Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Add lofi/focus music toggle in Pomodoro timer🎵

Aberta Para iniciantes
  • Algo errado?
#648 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 2 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
68/100
Tipo de issue
Funcionalidade
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
javascript, react
Domínio
frontend

Direção de pesquisa

Comece por client/src/components/Pomodoro/PomodoroTimer.jsx, o arquivo mencionado na issue, e inspecione como o timer renderiza os controles e gerencia o estado do componente. Adicione um controle para alternar o som ambiente usando a abordagem com Web Audio API descrita na issue; o trabalho estará concluído quando for possível ativá-lo e desativá-lo sem pacotes adicionais e o timer continuar utilizável.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

enhancement good first 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!! 🔥

Linguagem predominante
JavaScript
Estrelas
39
Forks
105
Merge médio
1d 12h
PRs com merge (30d)
45

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de anoopcodehack/DevBoard

Todas as issues de anoopcodehack/DevBoard

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.