Insertar sonido en javascript

amigosweb · #1 (**permalink**) 05/05/2003, 14:53

Necesito ayuda, por favor!!!

Estoy haciendome una web y tengo algunas nociones de javascript, pero me he quedado encallado con los sonidos.

Necesito algun script que haga que al pinchar sobre una imagen reproduzca un midi. Intenté hacer el link directamente y me da errores, por lo que si alguien puede ayudarme se lo agradeceré mucho.

Muchas gracias a todos!!!

caricatos · #2 (**permalink**) 05/05/2003, 16:09

Hola amigosweb:

Bienvenido a los foros:

La etiqueta compatible en todos los navegadores es embed, el archivo debe ir en el atributo src y otros atributos importantes son: autostart=true/false y hidden=true/false...

Se puede hacer de distintas formas, yo suelo usar un frame oculto, pero también puedes ocultar el tag embed, y poner autostart=false, y al pinchar sobre la imagen modificar el valor de autostart...

Dinos como has probado, y si te sirve algo de lo que te he dicho...

Saludos

amigosweb · #3 (**permalink**) 06/05/2003, 13:49

Muchas gracias caricatos por tus comentarios, pero debo decirte que de hecho no se bien donde colocar todo lo que me has dicho.

Necesito el codigo entero,y como pongo el link en la imagen del altavoz para que cuando le clicken empieze a sonar la musica (midis).

Es decir,¿tengo que poner el link entero de la pagina para buscar el midi o puedo poner por ejemplo /midis/midi1.mid? Es que lo he intentado de la segunda manera y no lo he conseguido. Por eso te pido si me puedes pasar el codigo entero explicando un poco como funciona y que parametros hay que poner.

Muchas gracias por tu ayuda!!!!

caricatos · #4 (**permalink**) 07/05/2003, 00:49

Hola amigosweb:

Te preparé esta página de ejemplo...

Espero que te ayude (debes poner tu fichero mid en la zona azul, y tu imagen en la zona roja)...

La forma de buscar el mid es la misma que para las páginas o imágenes (los caminos relativos en teoría deberían ser más eficaces)

Código PHP:

  <html>

<head>

<title>

    Música con una imagen

</title>

<script language=javascript >

var estado=false;

var sones = "<embed id=sonido src=[COLOR=blue]TU_MID.MID[/COLOR]  autostart=true loop=true >";

function cambiar()    {

    estado = !estado;

    document.getElementById("fantasma").innerHTML = (estado) ? sones : "";

}

</script>

</head>

<body>

<img src=[COLOR=red]tu_imagen.gif[/COLOR]  onclick=cambiar()>

<div id=fantasma style="width:1; height:1; visibility:visible; overflow: hidden"></div>

</body>

</html>

Saludos

amigosweb · #5 (**permalink**) 07/05/2003, 11:18

Te estoy muy agradecido por pasarme el ejemplo. Lo probaré y ya te diré si me ha funcionado (que no lo dudo pero igual soy un poquito torpe :))

Gracias de nuevo
Un saludo

Hola Caricatos!!!

Perdona por ser tan pesado pero es que no lo consigo. He probado con el codigo que me has pasado del tipo:

++++++++++++++++++++++++++++++++++++++++++++++
<script language=javascript >
var estado=false;
var sones = "<embed id=sonido src=ringtones/lista/s club 7 bring it all back.mid autostart=true loop=true >";
function cambiar() {
estado = !estado;
document.getElementById("fantasma").innerHTML = (estado) ? sones : "";
}
</script>
++++++++++++++++++++++++++++++++++++++++++++++

y

++++++++++++++++++++++++++++++++++++++++++++++
<img src="img_peq/altavoz.bmp" onclick=cambiar() width="23" height="16">
<div id=fantasma style="width:1; height:1; visibility:visible; overflow: hidden"></div>
++++++++++++++++++++++++++++++++++++++++++++++

Como verás, el mid lo tengo en mis documentos, en la carpeta ringtones y en lista ; y la imagen está en mis documentos,img_peq y se llama altavoz.bmp (o tengo otra que es altavoz1.gif).

Si lo pongo en frontpage y hago Propiedades de la imagen, al examinar y poner el altavoz me sale una ruta asi:
file:///C:/Documents and Settings/Dani/Mis documentos/img_peq/altavoz.bmp y no se hasta que punto esta ruta es correcta una vez colgada la pagina.

Mi problema es que no logro encontrar el hipervinculo, es decir, con este codigo cuando pasas el raton por encima
no hace nada de nada, y aun menos sonar la musica. Necesito que de un listado de 8-10 midis, con sus respectivos
altavoces, cada vez que clique en un altavoz suene el correspondiente midi, o bien que alguien me explique como funciona el midi jukebox que he visto en varias webs de melodias de moviles.

Te agradezco enormemente tu ayuda y paciencia y las molestias q te estás tomando.
Muchas gracias
Amigosweb

caricatos · #6 (**permalink**) 07/05/2003, 13:26

Hola otra vez:

Cuando quieras colgar la página, tendrás que usar nombres de ficheros y carpetas que no lleven espacios en blanco, y seguramente sea ese el problema en tu máquina...

El ejemplo que te dí no usaba nombres de ficheros o carpetas, y por eso no he necesitado "encomillarlos"

Si quieres que funcione en tu máquina tan sólo pon comillas en los nombres de ficheros (no es necesario cuando el nombre no lleva espacios en blanco)

Código PHP:

  var sones = "<embed id=sonido src=[COLOR=blue]'[/COLOR] ringtones/lista/s club 7 bring it all back.mid[COLOR=blue]'[/COLOR]  autostart=true loop=true >";

Como imagen procura usar gif o jpg, ya que las bmp no se visualizan en todos los navegadores.

El camino en el servidor es otro, así que es mejor usar el nombre normal y no el nombre que te da las propiedades.

Para que suene la música no es suficiente pasar el ratón sino pinchar... Si quisieras que funcionase con el paso deberías cambiar el onclick de la imagen por onmouseover.

Dime si progresas con esto, y si necesitas más cosas, las haremos de a poco.

Saludos

amigosweb · #7 (**permalink**) 08/05/2003, 12:29

Hola Caricatos!!!!

No hay manera de que me salga bien. Ante todo muchisimas gracias por toda tu colaboración y disculpa las molestias.

Estoy poniendo este código y no me funciona:

<html>
<head>
<title> Música con una imagen
</title>
<script language=javascript >
var estado=false;
var sones = "<embed id=sonido src=TU_MID.MID autostart=true loop=true >";
function cambiar() {
estado = !estado;
document.getElementById("fantasma").innerHTML = (estado) ? sones : "";
} </script>
</head>
<body>
<a href= "javascript:"cambiar()">
<img src=tu_imagen.gif onclick=cambiar() style="cursor:hand">
</a>
<div id=fantasma style="width:1; height:1; visibility:visible; overflow: hidde n"></div>
</body>
</html>

En frontpage se ve exactamente asi, con estos colores. Al poner el <a href= ....> se cambia de color todo lo de la imagen.
Además el link no me funciona. Me aparece la mano pero en la barra de estado me sale javascript: y ya está.

Sabes que puede estar pasando?????

Muchisimas gracias por todo.
Amigosweb

caricatos · #8 (**permalink**) 08/05/2003, 16:21

Hola amigosweb:

No sé si yo me equivoqué al pasarte el código, y llevo unos pocos días que solo me conecto unos pocos ratos, pero cuando pones el tag "a", tienes que quitar el evento onclick de la imagen...

<a href= "javascript:"cambiar()">
<img src=tu_imagen.gif onclick=cambiar() style="cursor:hand" >
</a>

Lo que está en rojo tienes que quitarlo... y lo que está en azul también, porque es para que el cursor se ponga "mano" y al usar la etiqueta "a" consigues ese resultado...

... Si en el mismo click, haces que se "cambie" una cosa con valores opuestos, en definitiva no haces nada.

Si usas <a href=algo...> y a la vez pones onclick=algo... se hace algo 2 veces, y ese algo en este caso son cosas opuestas.

Por último, comprueba los enlaces, y acuérdate de no usar nombre de ficheros que contengan espacios en blanco.

Saludos

Kaopectate · #9 (**permalink**) 08/05/2003, 16:26

Hola amigosweb, Caricatos.

Yo lo que veo raro es esto: <a href= "javascript:"cambiar()">

Yo lo pondría asi:

Código PHP:

  <a href= "#" onclick="cambiar()">

Pruébalo a ver si funciona.

Saludos.

caricatos · #10 (**permalink**) 08/05/2003, 17:27

Hola kao (tanto tiempo)...

Tienes razón en que estaba raro, y es que las comillas no estaban bien... (hay unas por el medio que no deberían estar)... pero está bien que haya alternativas.

Un abrazo.

Saludos

amigosweb · #11 (**permalink**) 09/05/2003, 11:05

Hola Caricatos y Kaopectate!!!

Ante todo pediros disculpas por duplicar los mensajes, renviar tantos y algunos por los privados, pero es que me estoy volviendo loco

mirar la página http://www.amigosweb.net/intentoponersonido.htm
y lo probais. Vereis que no funciona.

Insertando el siguiente código no me va:
<html>
<head>
<title> Música con una imagen
</title>
<script language=javascript >
var estado=false;
var sones = "<embed id=sonido src=http://www.amigosweb.net/ringtones/varios/eeuu.mid autostart=true loop=true >";
function cambiar() {
estado = !estado;
document.getElementById("fantasma").innerHTML = (estado) ? sones : "";
} </script>
</head>
<body>
<a href= "#" onclick="cambiar()">
<img src=img_peq/altavoz1.gif border="0" width="23" height="16">
</a>
<div id=fantasma style="width:1; height:1; visibility:visible; overflow:hidden"></div>
</body>
</html>

Los midis los tengo subidos en http://www.amigosweb.net/ringtones/varios/

Por favor, necesito MAS ayuda. Siento mucho los dolores de cabeza que os estoy provocando pero es que necesito poder poner sonidos en mid.

Agradeciendo de nuevo vuestra colaboración, saludos
Amigosweb

caricatos · #12 (**permalink**) 09/05/2003, 15:53

amigosweb:

¡Enhorabuena!

Acabo de pinchar en el enlace que has puesto y funciona perfectamente.

Con Netscape me muestra la consola de quicktime, pero que sepas que ya funciona.

Antes de tratar de mejorar las cosas, comprueba que suena en tu máquina (tal vez tengas que retocar tu configuración)

Saludos

amigosweb · #13 (**permalink**) 09/05/2003, 16:06

Hola Caricatos!!!

te agradezco la felicitación pero siento decirte que yo uso IE 6.0 y no me funciona. En cuanto pulso la imagen me cambia de http://www.amigosweb.net/intentoponersonido.htm a http://www.amigosweb.net/intentoponersonido.htm#, pero ni suena ni nada.

Cual crees que puede ser el problema??? Y como puedo cambiar la configuracion esa que dices!!!!

Es que me consta que los pocos visitantes que tengo lo hacen desde IE y no desde Netscape, por lo que no lo podrán usar.

Muchisimas gracias de nuevo!!!!!

Amigosweb

caricatos · #14 (**permalink**) 09/05/2003, 16:31

Hola otra vez:

La verdad es que bastante me cuesta enterarme de cosas de mi configuración, y llevo más de 15 años trasteando ordenadores...

Tal vez sea mejor que preguntaras en el foro de sistemas operativos o tal vez el de software (lamento no poder orientarte mejor)

Pero desde explorer 6 funciona correctamente.

El cambio en la dirección es normal... para evitar ese cambio tendrías que usar la opción que te propuse, aunque no creo que tenga importancia...

Bueno...

... lo dicho... cuando quieras hacer arreglos, aquí estaremos, pero desde javascript creo que el problema lo has resuelto...

Saludos

amigosweb · #15 (**permalink**) 10/05/2003, 05:23

Hola Caricatos y Alsapa!!!!

Teneis toda la razón!!! Es que de tanto probarlo he perdido la paciencia y no esperaba a que se cargara correctamente la página.

Quizás abuse un poco de vosotros, pero sabeis alguna manera de que suene más rápido?. O es que depende exclusivamente de la velocidad de conexión del usuario.

Muchisimas gracias por vuestra ayuda.

Saludos
Amigosweb

caricatos · #16 (**permalink**) 11/05/2003, 03:39

Hola amigo alsapa ¡Cuanto tiempo!...

Es evidente que amigosweb, subió otras versiones de la página, y en alguna de ellas no me extrañaría que hubiese puesto algo que necesitase un plugin...
Acabo de probarla, y se nota que es la que tiene de prueba de forma local, y por la función que usa, la rebuscó con algún programa de macromedia (los "MM_" de las funciones lo delatan)

Si tuviste que instalar un plugin, es evidente que falló algo, así que tendrás que reinstalar el viejo...

En esas cosas, muy poco puedo ayudarte.

Si amigosweb puede indicarnos qué pasos dió, tal vez se pueda plantear en el foro software o sistemas operativos...

Un abrazo

caricatos · #17 (**permalink**) 11/05/2003, 05:06

Hola alsapa:

Lo copié en local, pero puse mi ficherito *.mid, y funciona...
el formato wma es de microchoff, así que quicktime tal vez no sea el plugin adecuado...
Prueba escuchar la música desde windows, a ver si te da problemas, o pásame el link del aserejé, si quieres que lo pruebe.

... Más abrazo...

amigosweb · #18 (**permalink**) 11/05/2003, 06:55

hola a los dos!!!!

Estuve haciendo pruebas con el dreamweaver y lo colgué con esas pruebas, por lo que ni se ve la imagen ni funciona nada.

Pensé que quizás iria más rápido haciendo un boton en flash (podeis ver los mensajes en el foro de flash).

Tal y como iba antes de hacer los cambios, funcionaba pero un poco demasiado lento, por lo que prefiero intentarlo por otra via si me es posible.

Si necesitais algo de mi (sobre los codigos que finalmente puse o asi, porque de lo demás me dais mil vueltas) ya sabeis donde encontrarme.

Muchas gracias por todo vuestro apoyo y colaboracion.

Saludos

caricatos · #19 (**permalink**) 13/05/2003, 06:39

Hola alsapa:

Lo que pasa es que cuando intento bajarlo del mensaje, lo ejecuta windows media player, pero no está habilitada la opción guardar, y si quiero guardar el enlace le cambia la extensión y se queda un ficherito de pocos bytes... supongo que se debe tratar de algún tipo de protección de los ficheros wma...

Voy a ver si tengo alguno wma o mp3 para probar en mi servidor, y te cuento...

Saludos

Alsapa:

Fíjate en este link (lo acabo de subir)

Perdona por el dibujo, pero puse el primero que vi. Hay 2 canciones una mp3 y otra wma (tampoco me fije en estilos musicales sino en tamaño -y sin buscar mucho-)

A mi me funciona, así que si a ti te funciona (y es el mismo script) definitivamente se trata de tu servidor o del "wma"... alguna protección o restricción.

Bueno: Voy a comer...

Saludos

caricatos · #20 (**permalink**) 13/05/2003, 11:04

Amigo alsapa...

No te disculpes, porque todos hemos dado alguna paliza en alguna ocasión y además, también aprendo yo.

Bueno, espero que mires y compruebes tus dudas, y nos las comuniques.

Un abrazo

caricatos · #21 (**permalink**) 15/05/2003, 11:08

Alsapa:

No creo que sea tirar la toalla, sino que el servidor es así... Si te llegas a enterar de las restricciones, dilas, y si es posible (y quieres) intentamos hacer algo.

Un abrazote

caricatos · #22 (**permalink**) 18/05/2003, 06:01

Hola alsapa:

Te diré lo que hice:

Abrí la página y pinché en el enlace (el dibujito), y hizo lo que se esperaba (se añadió en # a la dirección, pero sin sonido.
Cambié la dirección del index por el fichero de música chiwawa.mp3, para bajarlo, y me salió un mensaje de geocities diciendo que el fichero no existe...

Esté es el enlace a mi fichero mp3: http://www.pepemolina.com/pruebas/Bob_Schneider.mp3

Dime si te lo puedes bajar... (o al menos lo escuchas)
No creo que hayas puesto mal el enlace, pero son cosas que pasan en las mejores familias...

Prueba a poner el enlace con la ruta completa (La verdad es que ya no sé que decirte, sino que son problemas del servidor o de la ruta)... No sé si los ficheros puedan tener alguna protección... haz la prueba de poner el fichero que yo uso...
Si usas explorer, puedes bajártelo pulsando en el botón derecho y darle a la opción "guardar destino cómo"...

Tenme al corriente y un abrazo...

Saludos

caricatos · #23 (**permalink**) 18/05/2003, 10:57

Alsapa:

Felicidades

No sé si descorcharé una botella de Cava, pero de alguna manera celebraré haber escuchado la canción en tu web.

Un abrazo