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

Audio não toca nem por um milagre

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Funções e atividade Clique no botão

por DOMINIQUI ALVES BARBOSA
| 215.3k xp | 28 posts

Eis meu código... Não é erro de digitação nem nada do tipo.

Não retorna erro no navegador. a Função executa corretamente. Porém não há audio algum tocando.

JS

function tocaSomPom(){
    document.querySelector('#som_tecla_pom').play();
}

function tocaSomClap(){
    document.querySelector('#som_tecla_clap').play() 
};



document.querySelector('.tecla_pom');

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="tocaSomPom" 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>

Troquei de navegador, mas adiantou de nada

8 respostas
por LUCAS GERMANO DOS SANTOS
| 34.3k xp | 5 posts
Jovem Aprendiz

O meu também está assim e não toca.

por Deividson Venâncio Magalhães
| 126.2k xp | 4 posts
Desenvolvedor Web PHP | JS

Faltou chamar a função com os parenteses <button onclick="tocaSomPom()" class="tecla tecla_pom">Pom</button>

por DOMINIQUI ALVES BARBOSA
| 215.3k xp | 28 posts

Mas deividson, o Exercício é justamente sobre fazer a busca pelo Js e então executar as coisas corretamente com o código do JS independente , pra nao poluir o html com essas coisas.

Ela explica esse caminho na aula, mas como boas práticas, é recomendado deixar o JS no codigo do JS e o html referenciadinho separados.

por DOMINIQUI ALVES BARBOSA
| 215.3k xp | 28 posts

Lucas. honestamente eu joguei pra cristo essa parada, pq nao fiz nada errado. então assisti o video inteiro. entendi.

e baixei o material do proximo modulo e segui por lá, o código está basicamente identico. Mas por alguma razao funciona.

então é bem isso kkk Se isso estiver atrasando seu aprendizado, como atrasou o meu. recomendo muito simplesmente tocar em frente pra não desanimar.

por Leandro Henrique
| 170.1k xp | 4 posts
Desenvolvedor PL .NET

Boa noite Dominiqui, tudo bem?

Pelo que vi no seu código, está faltando a chamada no carregamento da pagina ou forçar ele via setTimeout

function tocaSomPom() {
    document.querySelector('#som_tecla_pom').play();
}

function tocaSomClap() {
    document.querySelector('#som_tecla_clap').play()
};

//Segue a explicação: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
window.addEventListener('load', function () {
    tocaSomPom();
})

//Segue a explicação: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
setTimeout(() => {
    tocaSomClap();
}, 200);
por DOMINIQUI ALVES BARBOSA
| 215.3k xp | 28 posts

Vou tentar desenhar... Esse código, quando feito pela professora, funciona. Quando feito no meu sublime, não funciona.

Sem adicionar recursos e configuracoes extra, ele é ensinado na aula da professora e funciona perfeitamente durante sua aula.

O que estou procurando aqui, é se não há uma linha, um ponto virgula, um fecha chaves que passou batido, pois até então, está idêntico ao código da aula, e mesmo assim não funciona.

Eu agradeço a todos que se disporam a adicionar solucoes possíveis para contornar a falha. Mas minha curiosidade é saber se existe algum detalhe minimo que está passando batido.

solução!
por Emanuel Nabarrete de Souza
| 55.2k xp | 38 posts
Aprendiz

Fala Dominiqui tudo bom? Eu copiei seu codigo aqui no vs e rodei no Edge. No console eu chamo a função 

tocaSomPom()

no console do navegador. Se ainda estiver errado ai já não sei, pois está rodando certinho aqui. Abraço, espero ter ajudado!!!!!

por DOMINIQUI ALVES BARBOSA
| 215.3k xp | 28 posts

Deve ser o cão atrapalhando eu estudar, Emanuel, De qualquer forma, valeu esclarecer que o meu pc resolveu me pregar uma peça