Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

não está saindo som dá erro javascript

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Iterando em listas e atividade Repetição otimizada com For

por Pablo Salazar Pinho
| 44k xp | 6 posts

está aparecendo o seguinte erro no console e os sons não estão reproduzindo:

Uncaught TypeError: Cannot read properties of null (reading 'play') at tocaSom (main.js:4:44) at HTMLButtonElement.tecla.onclick (main.js:29:9)

meu main.js 

// 

function tocaSom (idElementoAudio) {
    document.querySelector(idElementoAudio).play();  
}


const listaDeTeclas = document.querySelectorAll('.tecla');


let contador = 0;
while ( contador < listaDeTeclas.length) {

    const tecla = listaDeTeclas[contador];

    const instrumento = tecla.classList[1];

    const idAudio = `#som_${instrumento}`;

    tecla.onclick = function(){

        tocaSom(idAudio);
    }
    contador = contador + 1;

}

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="shortcut icon" href="images/bateria.png" type="image/x-icon">

    <title>Mindi</title>
</head>
<body class="fundo">
  <h2 class="titulo">Alura Midi</h2>  

  <section class="teclado">
      <button class="tecla pom" >Pom</button>
      <button class="tecla clap" >Clap</button>
      <button class="tecla tim">Tim</button>
      <button class="tecla puff">Puff</button>
      <button class="tecla splash">Splash</button>
      <button class="tecla toim">Toim</button>
      <button class="tecla psh">Psh</button>
      <button class="tecla tic">Tic</button>
      <button class="tecla tom">Tom</button>
  </section>

  <audio src="sounds/keyq.wav" id="som_tecla_pom"></audio>
  <audio src="sounds/keyw.wav" id="som_tecla_clap"></audio>
  <audio src="sounds/keye.wav" id="som_tecla_tim"></audio>
  <audio src="sounds/keya.wav" id="som_tecla_puff"></audio>
  <audio src="sounds/keys.wav" id="som_tecla_splash"></audio>
  <audio src="sounds/keyd.wav" id="som_tecla_toim"></audio>
  <audio src="sounds/keyz.wav" id="som_tecla_psh"></audio>
  <audio src="sounds/keyx.wav" id="som_tecla_tic"></audio>
  <audio src="sounds/keyc.wav" id="som_tecla_tom"></audio>
 <script src="main.js"></script>
</body>
</html>
6 respostas
solução!
por Arthur Fabris peluque
| 94.4k xp | 27 posts

O erro presente em seu código esta no html, em cada button possui o atributo class com duas classes uma com denominada tecla e outra denominada com o som da tecla em questão, como no exemplo:

<button class="tecla pom" >Pom</button>

O correto seria antes do nome do som da tecla em questão estar seguindo o padrão tecla_nomeDoSom como no exemplo: 

<button class="tecla tecla_pom">Pom</button>
por Pasquale Milone Netto
| 167.8k xp | 8 posts

Também estou com o mesmo problema! Cheguei na parte que usa o For, comparei o código que eu fiz com o final da aula 5, são basicamente iguais, mas não sai o som.

por Arthur Fabris peluque
| 94.4k xp | 27 posts

veja se o código HTML está correto como eu avia passado acima

por Pasquale Milone Netto
| 167.8k xp | 8 posts

Oi Arthur, sim, está da mesma forma.

aqui o HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Alura MIDI</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap" rel="stylesheet">

    <link rel="icon" type="image/png" href="images/bateria.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">

</head>
<body>

    <h1>Alura Midi</h1>

    <section class="teclado">
        <button  onclick="alert('Pom')"  class="tecla tecla_pom">Pom</button>
        <button class="tecla tecla_clap">Clap</button>
        <button class="tecla tecla_tim">Tim</button>

        <button class="tecla tecla_puff">Puff</button>
        <button class="tecla tecla_splash">Splash</button>
        <button class="tecla tecla_toim">Toim</button>

        <button class="tecla tecla_psh">Psh</button>
        <button class="tecla tecla_tic">Tic</button>
        <button class="tecla tecla_tom">Tom</button>
    </section>

    <audio src="sounds/keyq.wav" id="som_tecla_pom"></audio> 
    <audio src="sounds/keyw.wav" id="som_tecla_clap"></audio> 
    <audio src="sounds/keye.wav" id="som_tecla_tim"></audio> 
    <audio src="sounds/keya.wav" id="som_tecla_puff"></audio> 
    <audio src="sounds/keys.wav" id="som_tecla_splash"></audio> 
    <audio src="sounds/keyd.wav" id="som_tecla_toim"></audio> 
    <audio src="sounds/keyz.wav" id="som_tecla_psh"></audio>
    <audio src="sounds/keyx.wav" id="som_tecla_tic"></audio>
    <audio src="sounds/keyc.wav" id="som_tecla_tom"></audio>


    <script src="main.js"></script>
</body>
</html>

E aqui o main.js:

function tocaSom (seletorAudio){
   const elemento =  document.querySelector(seletorAudio);

   if(elemento && elemento.localName ==='audio'){
        elemento.play();
   }

   else{
       console.log('Elemento nao encontrado')
   }
}

const listaDeTeclas = document.querySelectorAll('.tecla');

for (let contador = 0; contador < listaDeTeclas.length; contador++) {
    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `som_${instrumento}`;

    tecla.onclick = ()=>{
        tocaSom(idAudio);
    }

    tecla.onkeydown = function(evento){
        console.log(evento.code==='Space')

        if(evento.code ==='Space' || evento.code === 'Enter'){
            tecla.classList.add('ativa');
        } 

    }

    tecla.onkeyup = function(){
        tecla.classList.remove('ativa');
    }
}
por Pablo Salazar Pinho
| 44k xp | 6 posts

Arthur Fabris peluque Obrigado, deu certo do jeito que você disse nos nomes das classes, agora está saindo som. obrigado

por Arthur Fabris peluque
| 94.4k xp | 27 posts

imagine precisando não existe em perguntar aqui no fórum