[Projeto] Minha Solução: Alura MIDI

HTML

<h1>Alura Midi</h1>

    <img src="https://media.tenor.com/HJvqN2i4Zs4AAAAj/milk-and-mocha-cute.gif" alt="">

    <section class="teclado">
        <button class="tecla tecla_pom"onclick="apertei('#som_tecla_pom')">Pom</button>
        <button class="tecla tecla_clap"onclick="apertei('#som_tecla_clap')">Clap</button>
        <button class="tecla tecla_tim"onclick="apertei('#som_tecla_tim')">Tim</button>
        <button class="tecla tecla_puff"onclick="apertei('#som_tecla_puff')">Puff</button>
        <button class="tecla tecla_splash"onclick="apertei('#som_tecla_splash')">Splash</button>
        <button class="tecla tecla_toim"onclick="apertei('#som_tecla_toim')">Toim</button>
        <button class="tecla tecla_psh"onclick="apertei('#som_tecla_psh')">Psh</button>
        <button class="tecla tecla_tic"onclick="apertei('#som_tecla_tic')">Tic</button>
        <button class="tecla tecla_tom"onclick="apertei('#som_tecla_tom')">Tom</button>
    </section>

Javascript

    function apertei(som) {
    document.querySelector(som).play();
    console.log(som)
}

Preview