3
respostas

Os sons funcionam perfeitamente mas o código dá erro sempre que clico nas teclas

Quando eu toco no sons ou aperto o tab ou o space aparecem erros no console. Porém os sons tocam normalmente.

main.js:6 Uncaught ReferenceError: elemento is not defined at tocaSom (main.js:6:5) at tecla.onclick (main.js:25:9) tocaSom @ main.js:6 tecla.onclick @ main.js:25 5main.js:29 Uncaught ReferenceError: e is not defined at tecla.onkeydown (main.js:29:9)

function tocaSom (seletorAudio) {
    document.querySelector(seletorAudio).play();


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

    else {
        console.log('Elemento não encontrado ou seletor inválido');
    }
}

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 = function () {
        tocaSom(idAudio);
    };

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

    tecla.onkeyup = function () {
        tecla.classList.remove()
    }
}




3 respostas

Olá, Amanda!

O que está ocorrendo é que você não está declarando as variáveis elemento e e antes de utilizá-las.

Não cheguei a testar, mas dei uma olhada no código da instrutora e tentei adequar. Teste e veja se funciona:

function tocaSom (seletorAudio) {

    const elemento = document.querySelector(seletorAudio);

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

    else {
        console.log('Elemento não encontrado ou seletor inválido');
    }
}

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 = function () {
        tocaSom(idAudio);
    };

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

    tecla.onkeyup = function () {
        tecla.classList.remove()
    }
}

Espero ter ajudado!

Boa sorte em seus estudos!

Oii Xará! Estava com o mesmo problema, até ver que na declaração da variável constante elemento, não é necessário chamar a função .play()

Vou mostrar o pedacinho de código de antes e o depois:

*Antes: *

function tocaSom(seletorAudio) {
   const elemento =  document.querySelector(seletorAudio).play() // aqui está o problema, a função está sendo executada sem atender as condições!

    if (elemento && elemento.localName === 'audio') {
       elemento.play();
    } else {
        console.log('Elemento não encontrado ou seletor inválido!');
    }
}

*Depois: *

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

    if (elemento && elemento.localName === 'audio') {
        elemento.play();
    } else {
        console.log('Elemento não encontrado ou seletor inválido!');
    }
}

Assim, no depois, a função play é chamada apenas quando a condição é atendida. Espero ter ajudado!

faltou o const para armazenar o elemento áudio.

const elemento = document.querySelector(seletorAudio);