O que vais construir
Um leitor de música a funcionar: lista de faixas, tocar/pausar, próxima/anterior e uma barra de progresso — feito só com HTML, CSS e JavaScript.
O som é criado pelo navegador (melodias simples) — sem ficheiros nem direitos de terceiros. Numa app real, usarias as TUAS faixas (ou músicas com licença livre).
Em quase todas as apps repetimos as mesmas camadas, como construir uma casa: o HTML põe as coisas na mesa (a estrutura), o CSS veste-as (a aparência), e o JavaScript é a linguagem que lhes dá vida (o que reage ao toque). No fim, a memória guarda o que importa. Não precisas de decorar — vais reconhecê-las em cada passo. E há um truque de criador: antes de cada passo, diz em voz alta “quando eu faço X, a app deve fazer Y”. Isso transforma-te de quem copia em quem cria.
Pomos na mesa: a capa e o nome da faixa lá em cima, os botões de tocar/anterior/próxima ao meio, uma barra de progresso, e por baixo a lista das músicas. A lista é como a da app de tarefas — já sabes fazê-la.
<div class="capa" id="capa">🎵</div>
<div class="titulo" id="titulo"></div>
<div class="barra"><div class="progresso" id="progresso"></div></div>
<button id="anterior">⏮</button> <button id="play">▶</button> <button id="proxima">⏭</button>
<ul id="lista"></ul>Acrescenta uma quarta faixa à lista de músicas. Mexeste só nos dados — como na app de tarefas.
Montaste a casa seguindo o plano. O salto a criador é mudá-la sozinho. Tenta estas três — da mais simples à mais corajosa — sem receita. Se travares, pede à tua IA; mas tenta primeiro, e diz antes «quando eu fizer isto, a app deve…».
O que construíste é teu. Abre a Prova Viva, clona para a tua IA, e faz crescer — uma cor nova, um botão novo, ou O Player de Música no teu telemóvel.