1
resposta

[Projeto] Help numa coisa

Oi, pessoal.

Podem me ajudar numa coisa. É com o js que eu consigo colocar um som na página, certo?

Estou fazendo um cartão e também o portifólio com currículo, e gostaria de colocar uma música na página inicial. No caso do cartão, será uma página com vários cartões de toda turma. Eu consigo deixar que toque uma música só quando a pessoa clicar no meu cartão, ou colocar o cursor em cima da minha foto, por exemplo?

Devo vou usar: document.querySelector(‘#som_musica_inicio’).play() ?

1 resposta

Oi Milena!

Sim, você pode usar JavaScript para adicionar áudio seja um simples som ou uma música em sua página. Para reproduzir um som quando alguém clica no seu cartão ou passa o cursor sobre alguma foto, você precisará adicionar alguns eventos e manipular o áudio usando JavaScript.

Deixo um exemplo para ti:

  • No seu HTML: Primeiro, certifique-se de ter o elemento de áudio em seu HTML, com um id que você possa selecionar usando querySelector. Por exemplo:
<audio id="som_musica_inicio" src="caminho/para/musica.mp3"></audio>
  • JavaScript: Em seguida, você precisa adicionar o JavaScript para manipular o áudio e os eventos. Se você deseja reproduzir o áudio quando alguém clica no seu cartão, você pode adicionar um evento de clique ao elemento do cartão:
const cartao = document.querySelector('#seu_cartao_id');

cartao.addEventListener('click', () => {
    const audio = document.querySelector('#som_musica_inicio');
    audio.play();
});

Se você deseja que o áudio seja reproduzido quando alguém passa o cursor sobre a sua foto, você pode usar o evento mouseover:

const foto = document.querySelector('#sua_foto_id');

foto.addEventListener('mouseover', () => {
    const audio = document.querySelector('#som_musica_inicio');
    audio.play();
});

Lembrando quealguns endereçamentos foram apenas fornecidos como um esboço, você deve alterá-los conforme o seu projeto. Acredito que o conteúdo abordado no curso vai conseguir lhe enriquecer de ideias e lhe atender muito bem para gerar concluir essa atividade.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!