0:00 0 0
Efectos de sonido con HTML5 y JAVASCRIPT

Efectos de sonido con HTML5 y JAVASCRIPT

  DrUalcman |  noviembre 202018

Estaba programando en Windows Form y cuando el usuario hace algo incorrecto suene un sonido de "ERROR", y esto es algo que al usuario le viene muy bien para darse cuenta de que eso no se puede hacer. Luego abri otro proyecto web y pense: Que bien quedaria aqui el mismo efecto de error que en Windows Form. Por lo que me puse manos a la obra y la verdad que encontree una forma  fácil y transparente para poder hacer esto.

Agregar sonidos con HTML5

Como imagino que sabreis, agregar efectos sonos en una página web no suele ser una tarea muy fácil. Con la llegada en HTML5 de las etiquetas multimedia de audio y video nos facilitaron mucho esta labor. Ya no se necesitaba de un SILVERLIGHT o FLASH para poder reproducir archivos multimedia en la web. Pero un detalle que he observado, es que al incluir estos tags se muestran los controles al usuario y que hay un archivo de audio. Por lo que, como siempre busco soluciones fáciles y rápidas, me punse a pensar como soluionar esto sin mucho código de por medio y sobre todo sin tener que utilizar librerías externas.

La solución se me antojó más sencilla aún de lo que cabría de esperar. Se me ocurrió agregar dos efectos sonoros, uno cuando algo sale mal, y otro para cuando sale bien. Estos archivos son muy ligeros y no demoran la carga de la página. Los incluí dentro de un DIV el cual lo tengo oculto. De esta forma al entrar en la página carga los archivos pero no los muestra al usuario.

Luego desde JAVASCRIPT reproduces el sonido que deseas llamando a la funcion .play() y listo.

El truquito

Aqui os dejo el poco código que he utilizado para implementar esta idea.

    < div style="display:none">
< audio controls="controls" id="SoundFail">

< /audio>
< audio controls="controls" id="SoundOk">

< /audio>
< /div>

Y en el JAVASCRIPT done quieras reproducir el sonido.

//OK
try {
var soundOk = document.getElementById('SoundOK');
soundOk.play();
} catch (e) {
console.error('Cannot play sound');
}
//fallo
try {
var soundOk = document.getElementById('SoundOK');
soundOk.play();
} catch (e) {
console.error('Cannot play sound');
}

Conclusión

Bueno esto es todo por hoy, no hay mas que decir, espero que os guste este truco.

Happy Coding


#javascript #html #web #trucos

0 Comentarios

 
 
 

Archivo