Realizei a interação do JavaScript com o HTML da seguinte forma. Só fiquei com algumas duvidas, achei o código meio extenso sem tanta necessidade, estou ainda tentando diminuir as chamadas desnecessárias.
const teclaPom = document.querySelector(".tecla_pom")
const teclaClap = document.querySelector(".tecla_clap")
const teclaTim = document.querySelector(".tecla_tim")
const teclaPuff = document.querySelector(".tecla_puff")
const teclaSplash = document.querySelector(".tecla_splash")
const teclaToim = document.querySelector(".tecla_toim")
const teclaPsh = document.querySelector(".tecla_psh")
const teclaTic = document.querySelector(".tecla_tic")
const teclaTom = document.querySelector(".tecla_tom")
function playPom() {
document.getElementById("som_tecla_pom").play()
}
function playClap() {
document.getElementById("som_tecla_clap").play()
}
function playTim() {
document.getElementById("som_tecla_tim").play()
}
function playPuff() {
document.getElementById("som_tecla_puff").play()
}
function playSplash() {
document.getElementById("som_tecla_splash").play()
}
function playToim() {
document.getElementById("som_tecla_toim").play()
}
function playPsh() {
document.getElementById("som_tecla_psh").play()
}
function playTic() {
document.getElementById("som_tecla_tic").play()
}
function playTom() {
document.getElementById("som_tecla_tom").play()
}
teclaPom.addEventListener("click", playPom)
teclaClap.addEventListener("click", playClap)
teclaTim.addEventListener("click", playTim)
teclaPuff.addEventListener("click", playPuff)
teclaSplash.addEventListener("click", playSplash)
teclaToim.addEventListener("click", playToim)
teclaPsh.addEventListener("click", playPsh)
teclaTic.addEventListener("click", playTic)
teclaTom.addEventListener("click", playTom)