Sonido con Javascript

Aquí tienes lo necesario para hacer sonar archivos desde Javascript (al cargar la página, al pasar el usuario el ratón por una imagen, etc..).

Cómo hacerlos sonar

Muchas cosas son imposibles de lograr con los métodos habituales de JavaScript. Y allí donde llega el HTML pero el Javascript no tendremos que usar el viejo (y algo cutre) método de escribir HTML con Javascript para obtener lo que queremos.

Con esta idea, y sabiendo cual es el código HTML que debemos escribir en un documento para que haga sonar un archivo de sonido, lo único que debemos hacer es preparar un frame escondido donde escribirlo:

<FRAMESET COLS="1,*" FRAMEBORDER=0 FRAMESPACING=0
  BORDER=0>
  <FRAME SRC="blanco.htm" NAME="sonido" NORESIZE
    MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="NO"
    FRAMEBORDER=0>
  <FRAME SRC="principal.htm" NAME="principal" FRAMEBORDER=0>
</FRAMESET>

Añadiendo a principal.htm el siguiente código en Javascript:

function play(fichero) {
  sonido = parent.sonido.document;
  sonido.open();
  sonido.write('<HTML><HEAD>');
  sonido.write('</HEAD><BODY BGCOLOR="#ffffff">');
  sonido.write('<EMBED SRC="' +fichero+'" HIDDEN=TRUE'+
    + 'AUTOSTART=TRUE HEIGHT=0 LOOP=FALSE>');
  sonido.write('</BODY></HTML>');
  sonido.close();
}

function stop() {
  sonido = parent.sonido.document;
  sonido.open();
  sonido.write('<HTML><HEAD>');
  sonido.write('</HEAD><BODY BGCOLOR="#ffffff">');
  sonido.write('</BODY></HTML>');
  sonido.close();
}

Como podéis ver, el código no hace nada más que escribir en el frame escondido el código necesario para hacer sonar un fichero (necesitarás para que funcione un navegador de versión 3 o superior con las capacidades necesarias para hacer sonar ficheros WAV o MID).

Cómo usar el código

Ahora tan sólo necesitamos llamar a nuestras recén creadas funciones play y stop desde el controlador del evento que mejor nos caiga. En el siguiente ejemplo, cuando paséis el ratón por encima del altavoz que aparecerá sonará una melodía, y dejará de hacerlo cuando alejeis el mismo.

Ya sé que la música es mala, pero... ¿qué esperabais? Es mía. Bueno, a lo que ibamos; el código que hace esto es el siguiente:

<A HREF="loquesea"
  onMouseOver="play('cpet.mid')" onMouseOut="stop()">
    <IMG SRC="altavoz.gif" BORDER=0>
</A>

Simplemente con llamarlo desde el evento adecuado, podréis hacer tocar lo que queráis. No conviene abusar, no obstante, ya que los sonidos no se precargan y puede resultar algo lento para el usuario.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
HAY 22 COMENTARIOS
  • adrian torres dijo:

    hola soy un principiante en este de javascript y al intentar hace uno de los temas no lo consigo espero que me puedas hechar una mano y decirme en que me puedo confundir gracias el tema es "sonido" puesto que al hacerlo no se pe escucha GRACIAS ADRIAN TORRES

  • Eduardo dijo:

    HOLA FELICITACIONES SIGAN ASI ,QUISIERA SABER COMO PONER EL SONIDO DE FONDO EN MI PAGINA WEB ES DECIR QUE CUANDO SE ABRA LA PAGINA SUENE UNA CANCION DE FONDO ........AYUDAAAAAAAAAAAME GRACIAS *_*

  • Andres Farfan dijo:

    por favor si me pueden ayudar necesito colocarle seguridad a mi pagina web, necesito quitar las barras de herramientas cuando abran mi pagina, en resumen lo que necesito es que nadie pueda copiar de ninguna forma lo que tenfgo en mi pagina, que no exista las teclas control c, contro v, control e, ni siquiera que pueda servir la tecla impt pant, les agradezco muchisimo su ayuda gracias me han ayudado mucho con su pagina

  • César dijo:

    Como hago para reproducir sonidos al pasar el mouse por una imagen. Gracias.

  • jo dijo:

    Quiero que al pinchar sobre una imagen se puedan bajar un archivo de música que está en .swf

  • eva dijo:

    hola! NECESITO SABER COMO SE PODRIA HACER PARA UNA PAG WEB UN ICONO QUE CUANDO LO PULSAS C APAGA LA MUSICA Y AL PULSARLO OTRA VEZ SE VUELVE A ENCENDER. ESPERO QUE ME PODAIS RESPONDER DE FORMA CLARA.

  • Salvatore dijo:

    Una vez finalizada la ejecución de un archivo midi, ¿Que debo hacer para que continue, pero con otro archivo midi?.

  • sara dijo:

    como puedo crear una pag web? gracias

  • sara dijo:

    pero como se puede crear el sonido de fondo en la pag?no lo he visto. pero lo demás SB.ADIOS ya no molestaré más.

  • Alex dijo:

    He probado este javascript y cuando lo tengo en el ordenador funciona, pero cuando lo cuelgo en la red, no funciona. Sabes por que puede pasar esto. Gracias.

  • Alex dijo:

    No es mia, la encontre buscando lo mismo, pero es mucho mas sencilla.... Usa el propio bgsound de la pagina para reproducir el audio deseado, aun que lo mas probable es que no funcione en Netscape... =(

  • Alex dijo:

    ... ....

  • Daniel Rodríguez dijo:

    Hola, Alex. El caso es que si funciona cuando lo cuelgas, pero como no se puede "precargar" el sonido, es en el momento de pasar el ratón por encima cuando lo carga y hay un lapso de tiempo en que no suena. En cuanto a tu código prueba a escribirlo con &amp;lt; en lugar de &lt;

  • Asenat dijo:

    Hola, quiero saber cómo hago para que la música que tengo en mi página siga reproduciéndose cuando cambio a otra. También quiero saber cómo hago para que caundo termine la canción se reproduzca otra, ya que en el código las tengo y al momento de abrir la página se escuchan todas al mismo tiempo. Gracias.... Asenat

  • d dijo:

    asdfg

  • M.Jesus dijo:

    alguien prodria explicarme como se puede

  • M.jesus dijo:

    alguien sabria explicarmen como puede quitarle el sonido al raton, ya que me molesta mucho el clip que hace?.

  • wachuMachuchu dijo:

    alguien sabe como puedo hacer para cayar a la bola de pendejos de arriba :S

  • wachuMachuchu dijo:

    alguien sabe como puedo hacer para cayar a la bola de pendejos de arriba :S

  • rojo112 dijo:

    As explicado como añadir un sonido y hacerlo funcionar al pasar el raton. Si quisiera que cuando salga un color determinado en la web, sonara ¿como deveria hacerlo?

  • Lola dijo:

    Quiero ejecutar un sonido en una pagina .aspx ¿como lo hago?

  • Angeles dijo:

    necesito ponerle sonido a una web hecha con un template sin que se cargue nuevamente en cada seccion. COMO HAGO ????

Conéctate o Regístrate para dejar tu comentario.