Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

156
Vistas
¿Cómo hacer que el elemento de audio responda mejor?

Introducción

Saludos, he mirado algunas preguntas similares que hay en esta plataforma y ninguna de ellas parece coincidir con mi problema o tal vez me perdí algo, pero haré todo lo posible para intentarlo porque soy nuevo en esta plataforma.

Visión general

Esta aplicación de audio asigna las teclas del teclado a muestras de audio.

Problema

Hay un retraso de audio cuando se presionan las teclas rápidamente y, después de cada presión, el sonido de muestra continúa reproduciéndose durante 4 a 6 segundos antes de llamar a otro sonido y no elimina el sonido inmediatamente después de soltar el botón del teclado.

Código

Esto es lo que probé:

 const dump = console.log.bind(console); const sample = new Object ({ drum: "/samples/drums/trance01/BD_Trance.wav", clap: "/samples/drums/trance01/Clap_trance.wav", }); const keymap = new Object ({ "KeyD": "drum", "KeyC": "clap", }); Object.keys(sample).forEach((smpl)=> { let node = document.createElement("audio"); node.id = (smpl+"Sample"); node.className = "instrument"; node.src = sample[smpl]; document.body.appendChild(node); }); document.body.addEventListener("keydown", function keyListener(event) { event.preventDefault(); // kill it event.stopPropagation(); // seal it's ashes in a capsule event.stopImmediatePropagation(); // and hurl it into the sun! let key = event.code; // console.log("pressed: "+key); let tgt = keymap[key]; if (!tgt){ dump(key+" - is unused"); return }; var intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2'); function myCallback(a, b) { let nde = document.getElementById(tgt+"Sample"); nde.play(); dump("play: "+tgt); } });
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Seguir lo que sucede en la lógica y cómo los elementos responden a su manera (y tiempo) es importante para analizar cuál puede ser el problema.

En este caso, creo que esto se puede resolver clonando el nodo de origen, sin esperar que reproduzca varias instancias de sí mismo (o eso es lo que creo que debería suceder), pero podemos obligarlo a:

 const dump = console.log.bind(console); const sample = new Object ({ drum: "/samples/drums/trance01/BD_Trance.wav", clap: "/samples/drums/trance01/Clap_trance.wav", }); const keymap = new Object ({ "KeyD": "drum", }); (Object.keys(sample)).forEach((item,indx)=> { let node = document.createElement("audio"); node.id = (item+"Sample"); node.className = "instrument"; node.src = sample[item]; document.body.appendChild(node); }); function keyHandler(event) { if (event.ctrlKey){ return }; // whew .. that was annoying as f*ck event.preventDefault(); // kill it event.stopPropagation(); // seal it's ashes in a capsule event.stopImmediatePropagation(); // and hurl it into the sun! let key = event.code; let tag = keymap[key]; let nde,tgt; tgt = document.getElementById(tag+"Sample"); if (!tgt){ dump(key+" - is unused"); return }; nde = tgt.cloneNode(true); nde.id = (tgt.id+"Clone"); nde.addEventListener("ended",function() { this.parentNode.removeChild(this); }); document.body.appendChild(nde); nde.play(); dump("playing: "+tgt); } document.body.addEventListener("keydown", keyHandler);
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda