Foros del Web - >> Apagar/encender música de fondo <<

Foros del Web (http://www.forosdelweb.com/)

- Javascript (http://www.forosdelweb.com/f13/)

- - >> Apagar/encender música de fondo << (http://www.forosdelweb.com/f13/apagar-encender-musica-fondo-223575/)

seoista

12/08/2004 06:27

>> Apagar/encender música de fondo <<

Hola a tod@s.
NOTA: Cómo no sé donde va esta pregunta, la pongo aquí.
Si no corresponde, que los moderadores la cambien
¡¡¡Gracias!!!
Mi pregunta es:

¿Cual sería el código para poner música de fondo (esto lo sé), pero que se pudiera ENCENDER y APAGAR haciendo click en una misma IMAGÉN (no dos imágenes diferentes) y que estén posicionadas en el mismo sitio (o sea, que una esté encima de la otra, ocupando el mismo sitio) ... ?

He estado mirando la página de caricatos (¡¡¡Hola :adios:!!!) www.sucaricatura.com, a la izquierda-abajo donde está el piano (eso es lo que quiero), pero no logro descifrar de cual es el código (me lio, ¡torpe, torpe! :si: que soy :-( y no doy para más :no: ).

Gracias a tod@s y un abrazo :adios:

caricatos

12/08/2004 12:13

Hola seoista:

Justamente mi primera participación en estos foros, era respondiéndo esa misma pregunta formulada en esa ocasión por KarlanKas (¡Hola :adios: !)

Sencillamente se trata de un frame oculto en donde al pinchar en el piano se carga una página con un fondo musical cambiándose la imágen por el pianito, y al volver a pinchar se cambia la imagen otra vez cargándose otra página sin fondo musical... :pensando:

Si no quieres usar marcos propuse hace un tiempo un tema sobre precarga de sonidos (supongo que lo podrás buscar) y el código es bastante más complejo... o tal vez la página de las postales que hay aquí: http://www.pepemolina.com/postales

Intenta implementarlo (sé que puedes) y si tienes problemas avisa...

Saludos :arriba:

seoista

13/08/2004 03:48

Gracias caricatos, lo miraré y ya te diré.

Saludos :adios:

seoista

13/08/2004 05:59

Cita:

Iniciado por caricatos

Hola seoista:

Justamente mi primera participación en estos foros, era respondiéndo esa misma pregunta formulada en esa ocasión por KarlanKas (¡Hola :adios: !)

¡Esta no la encuentro!.

Cita:

Iniciado por caricatos

Si no quieres usar marcos propuse hace un tiempo un tema sobre precarga de sonidos (supongo que lo podrás buscar) y el código es bastante más complejo... o tal vez la página de las postales que hay aquí: http://www.pepemolina.com/postales

Intenta implementarlo (sé que puedes) y si tienes problemas avisa...

¿Te refieres a este?:

Código:

<script type="text/javascript">

var sones;
 

function _desactivar()        {

        this.sonido.innerHTML = "";

}
 

function _activar()        {

        var son = "<embed src='" + this.son[_activar.arguments[0]].src + "' autostart='true' hidden='true' style='display: inline'></embed>";

        this.sonido.innerHTML = son;

}
 

function preSonidos()        {

        this._entradas = preSonidos.arguments;

        this.total = this._entradas.length;

        this.son = new Array(this.total);

        for (var i = 0; i < this.total; i ++)        {

                this.son[i] = document.createElement("embed");

                this.son[i].src = this._entradas[i];

                this.son[i].autostart = false;

                this.son[i].style.display = "none";

                document.body.appendChild(this.son[i]);

        }

        this.sonando = false;

        this.incrustado = false;

        this.activar = _activar;

        this.desactivar = _desactivar;

        this.sonido = document.createElement("div");

        document.body.appendChild(this.sonido);

}
 

function ini()        {

        sones = new preSonidos('celtic0.mid', 'celtic1.mid', 'celtic2.mid', 'celtic3.mid', 'Starway_to_Heaven.mp3');

}

</script> 
 

y el body de ejemplo:
 

<body onload="ini();">
 <button onclick="sones.activar(0)">celtic0.mid</button>

<button onclick="sones.activar(1)">celtic1.mid</button>

<button onclick="sones.activar(2)">celtic2.mid</button>

<button onclick="sones.activar(3)">celtic3.mid</button>

<button onclick="sones.activar(4)">Starway_to_Heaven.mp3</button>

<button onclick="sones.desactivar()">desactivar</button>

<br />

</body>

Pero yo lo quiero sin button (lo que he puesto en rojo), sino con un solo sónido y una imagen para apagar y encender, cómo tienes en tu pàgina (www.sucaricatura.com - EL PIANO).

Perdona que te moleste tanto.

Saludos caricatos :adios:

caricatos

13/08/2004 09:46

Hola otra vez:

El tema que no encuentras es este: http://www.forosdelweb.com/f13/intercambiar-sonidos-para-que-no-solapen-69783/
... y dice lo que te dije antes, pero tal como dije, se trata de usar frames... :pensando:

Con respecto al otro código, es fácil adaptarlo en una imagen:

function ini() {
sones = new preSonidos('tuMusica.mid');
}

... y si usas las imágenes: activo.gif e inactivo.gif:

<img src=inactivo.gif onclick="if (this.src == 'activo.gif') {this.src = 'inactivo.gif'; sones.desactivar()} else {this.src = 'activo.gif'; sones.activar(0)}" />

Saludos :arriba:

seoista

13/08/2004 23:54

Otra vez aquí caricatos.

He puesto este código:

Código:

<html>

<head>
 

<title>#</title>
 

<script type="text/javascript">

var sones;
 

function _desactivar()        {

        this.sonido.innerHTML = "";

}
 

function _activar()        {

        var son = "<embed src='" + this.son[_activar.arguments[0]].src + "' autostart='true' hidden='true' 
 

style='display: inline'></embed>";

        this.sonido.innerHTML = son;

}
 

function preSonidos()        {

        this._entradas = preSonidos.arguments;

        this.total = this._entradas.length;

        this.son = new Array(this.total);

        for (var i = 0; i < this.total; i ++)        {

                this.son[i] = document.createElement("embed");

                this.son[i].src = this._entradas[i];

                this.son[i].autostart = false;

                this.son[i].style.display = "none";

                document.body.appendChild(this.son[i]);

        }

        this.sonando = false;

        this.incrustado = false;

        this.activar = _activar;

        this.desactivar = _desactivar;

        this.sonido = document.createElement("div");

        document.body.appendChild(this.sonido);

}
 

function ini() {

sones = new preSonidos('grease.mid');

}
 

</script> 
 

</head>
 

<body onload="ini();">
 

<img src=desactivar.gif onclick="if (this.src == 'activar.gif') {this.src = 'desactivar.gif'; sones.desactivar()} else 
 

{this.src = 'activar.gif'; sones.activar(0)}" />
 

</body>

</html>

Es lo que quiero y funciona ... ¡pero! ...

1.- Al abrir la página comienza la música y la imagen que se vé es "PARAR MUSICA" (CORRECTO).

2.- Al hacer click en la imagen "PARAR MUSICA", la para, ... pero ... ¡sólo durante unos segundos! y sigue sonando, y aunque continue pinchando la imagen que está en ese momento ("OIR MUSICA"), ... no hace "ná de ná" ..., la imagen no cambia y la musica continua indefinidamente (INCORRECTO]). :ojotes: :ojotes:

Vaya coñazo que te estoy dando, pero, es que no me funciona bien.

Muchas gracias por las molestias que te estoy causando.

Hasta luego :adios:

caricatos

14/08/2004 02:35

Hola otra vez:

Con qué navegador lo has probado... me parece que con opera no va bien...

Cuando pueda poner los altavoces lo pruebo... de todos modos te paso un enlace con otro código parecido: http://www.pepemolina.com/sonidos/index5.html

Saludos :arriba:

seoista

14/08/2004 03:10

Hola de nuevo caricatos y gracias por las molestias que te estás tomando.

Cita:

Iniciado por caricatos

Con qué navegador lo has probado... me parece que con opera no va bien...

Con "Internet Eexplorer 6.0", no uso otro.

Cita:

Iniciado por caricatos

Cuando pueda poner los altavoces lo pruebo...

Veo que han cortado el servidor (www.iespana.es). ¡Estarán en mantenimiento!.

Cita:

Iniciado por caricatos

de todos modos te paso un enlace con otro código parecido: http://www.pepemolina.com/sonidos/index5.html

Lo probaré también y ya te contaré.

Ruego perdones mis molestias, soy un :-p plasta :-p .

Mientras tanto, recibe un abrazos :adios:

caricatos

14/08/2004 04:05

Hola otra vez:

Creo que sé la razón de que no funcione... :pensando:

Al comparar el valor del src de una imagen el navegador, aunque se le dé una ruta corta, te devuelve la ruta completa.

En vez de usar src, prueba con otra cosa, incluso puedes crearte un atributo o usar una variable global...

<img src=desactivar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar()} else
{activo = 'si'; sones.activar(0)}" />

y en otra parte de la página inicializar la variable activo:
var activo = "si"

Saludos :arriba:

seoista

14/08/2004 05:49

caricatos, otra vez el :-p :-p :-p

He tardado un poco en contestar porque he estado probando de distintas formas, pero ... psee ... , no lo entiendo bien. Hay que machacármelo :-( .

Te digo:

Cita:

Iniciado por caricatos

Veo que solo hay una imagen (desactivar.gif)
http://es.geocities.com/alsapaweb/desactivar.gif

Le falta la otra imagen (activar.gif)
http://es.geocities.com/alsapaweb/activar.gif
(las he puesto en otro servidor para que la veas, ya que sigue sin funcionar w w w.iespana.es).

Quiero que cuendo esté funcionando la música, aparezca la imagen "PARAR MUSICA" y cuando pulse esta, se pare y aparezca la imagen "OIR MUSICA", para que esta vuelva a comenzar. --> (no sé si me he explicado bien)

Cita:

y en otra parte de la página inicializar la variable activo:
var activo = "si"

¿Esto donde lo pongo?. ¿Aquí? (lo he señalado en rojo):

<html>
<head>

<title>#</title>

<script type="text/javascript">
var sones;

function _desactivar() {
this.sonido.innerHTML = "";
}

function _activar() {
var son = "<embed src='" + this.son[_activar.arguments[0]].src + "' autostart='true' hidden='true' style='display: inline'></embed>";
this.sonido.innerHTML = son;
}

function preSonidos() {
this._entradas = preSonidos.arguments;
this.total = this._entradas.length;
this.son = new Array(this.total);
for (var i = 0; i < this.total; i ++) {
this.son[i] = document.createElement("embed");
this.son[i].src = this._entradas[i];
this.son[i].autostart = false;
this.son[i].style.display = "none";
document.body.appendChild(this.son[i]);
}
this.sonando = false;
this.incrustado = false;
this.activar = _activar;
this.desactivar = _desactivar;
this.sonido = document.createElement("div");
document.body.appendChild(this.sonido);
}

function ini() {
sones = new preSonidos('grease.mid');
}
var activo = "si" //------> (DIME SI VA AQUI o DONDE)

</script>

</head>

<body onload="ini();">

<img src=desactivar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar()} else
{activo = 'si'; sones.activar(0)}" />
<br />

</body>
</html>

Te diré que funciona bastante bien, pulsando en "PARAR MUSICA" se para la música y pulsando otra vez "PARAR MUSICA" (ya que no cambia a "OIR MUSICA"), vuelve a oirse (TODO ESTO CORRECTO). Menos el cambio de imagen.

Un abrazo :arriba: y paciencia conmigo.

P.D.: Joder, que "coñazo" te estoy dando

caricatos

14/08/2004 10:48

Hola otra vez:

Se trata de volver a poner el this.src... :pensando:

Lo quité en el script por hacer otra comparación y usar una variable nueva... tan solo tienes que poner:

<img src=desactivar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar(); this.src = 'sactivar.gif'} else
{activo = 'si'; sones.activar(0); this.src = 'desactivar.gif'}" />

Saludos :arriba:

seoista

14/08/2004 13:27

Vuelvo otra vez :si: :-D .

Cita:

Iniciado por caricatos

Esto es una pregunta tonta (como todas las mías), pero la "s" que está en rojo sobra, ¿verdad?.

Bueno, mañana lo miraré y diré como me ha ido (ahora estoy en mi trabajo, de 0900 de la noche hasta las 0900 de mañana).

¡Esperemos que ahora funcione!.

Hasta mañana y cierro :adios: .

Un abrazo :arriba:

seoista

15/08/2004 01:58

Hola caricatos.

Con este código: (:arriba:) (:arriba:) (:arriba:)

Código:

<html>

<head>
 

<title>Musica</title>
 

<script type="text/javascript">

var sones;
 

function _desactivar()        {

        this.sonido.innerHTML = "";

}
 

function _activar()        {

        var son = "<embed src='" + this.son[_activar.arguments[0]].src + "' autostart='true' hidden='true' style='display: inline'></embed>";

        this.sonido.innerHTML = son;

}
 

function preSonidos()        {

        this._entradas = preSonidos.arguments;

        this.total = this._entradas.length;

        this.son = new Array(this.total);

        for (var i = 0; i < this.total; i ++)        {

                this.son[i] = document.createElement("embed");

                this.son[i].src = this._entradas[i];

                this.son[i].autostart = false;

                this.son[i].style.display = "none";

                document.body.appendChild(this.son[i]);

        }

        this.sonando = false;

        this.incrustado = false;

        this.activar = _activar;

        this.desactivar = _desactivar;

        this.sonido = document.createElement("div");

        document.body.appendChild(this.sonido);

}
 

function ini() {

sones = new preSonidos('grease.mid');

}

var activo = "si"
 

</script> 
 

</head>
 

<body onload="ini();">
 

<img src=desactivar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar(); this.src = 'activar.gif'} else 

{activo = 'si'; sones.activar(0); this.src = 'desactivar.gif'}" />
 

</body>

</html>

Lo que pasa es que NO ABRE LA PAGINA CON LA MUSICA YA FUNCIONANDO (que es lo que me interesaría), hay que pinchar primero en la imagen y después SI va bien, así como los cambios de imagenes.

Muchas gracias por la paciencia que estas teniendo ... con este "zoquete".

Un abrazo :adios:

caricatos

15/08/2004 03:31

Hola otra vez:

Para que suene al principio habría que hacer pequeñas modificaciones... :pensando:

function ini() {
sones = new preSonidos('grease.mid');
sones.activar(0);
}
var activo = "no";

...

<img src=activar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar(); this.src = 'activar.gif'} else
{activo = 'si'; sones.activar(0); this.src = 'desactivar.gif'}" />

Supongo que con lo marcado sería suficiente...

Saludos :arriba:

seoista

15/08/2004 06:16

Ahora Si

Ahora "SI" caricatos.

¡¡¡ Muchisiiiiisimas gracias !!! :si:

Cómo ya sabes, aquí tienes un amigo para lo que quieras
(¡¡¡ menos para que te proporcione códigos !!!) :-D :-D :-D :-D :-D :-D

Un abrazo y :adios:

caricatos

16/08/2004 03:51

:arriba: :-D :arriba:

¡Hasta otra!

Cizeron

20/10/2004 06:15

Despues de tantos cambios en el codigo... ¿como queda al final?

Gracias.

robert0907

09/10/2008 22:51

Respuesta: >> Apagar/encender música de fondo <<

chamos de verdad son unos craneos en cuanto a codigo y demas pero dejenme decirles es demaciado para lo que realmente se nesecita que es parar y poner play ala musica de fondo si quieren que esta interactue que se cambie cada ves que entre un usuario es valido todo ese scrip pero en fin a cada quien lo suyo de mi parte este es mi aporte .

<HTML>
<HEAD>
</HEAD>
<BODY onLoad="document.all.sound.src='ub-40.mp3'">
<bgsound id='sound'>
<FORM>
<INPUT TYPE=BUTTON VALUE="SHHHHHHHHHHHHH!!!!!!" onClick="document.all.sound.src=null">
<INPUT TYPE=BUTTON VALUE="musica!!!!!!" onClick="document.all.sound.src='ub-40.mp3'">
</FORM>
</body>
</html>

robert0907

09/10/2008 23:17

Respuesta: >> Apagar/encender música de fondo <<

Chamos de verdad son unos craneos en cuanto a codigo y demas pero dejenme decirles es demaciado para lo que realmente se nesecita que es parar y poner play ala musica de fondo si quieren que esta interactue que se cambie cada ves que entre un usuario es valido todo ese scrip pero en fin a cada quien lo suyo de mi parte este es mi aporte .

lo de la imagen , bueno la verdad es que en este momento estoy full

lo que te puedo decir es que es facil te dare una idea
una tabla con el borde 0 en ella una imagen
la tabla que tenga onmuseover(funcion javascrip X) y onmouseout(llaman a una funcion javasecrip Y) donde en la funcion cuando entras prende la musica y cuando sales nullo cuando entras en la segunda ves null cuando sales apaga la musica no es de mucha ayuda pero es para que tengas mas o menos una idea.

esto es lo de la musica

HTML>
<HEAD>
</HEAD>
<BODY onLoad="document.all.sound.src='ub-40.mp3'">
<bgsound id='sound'>
<FORM>
<INPUT TYPE=BUTTON VALUE="SHHHHHHHHHHHHH!!!!!!" onClick="document.all.sound.src=null">
<INPUT TYPE=BUTTON VALUE="musica!!!!!!" onClick="document.all.sound.src='ub-40.mp3'">
</FORM>
</body>
</html>

caricatos

10/10/2008 00:20

Respuesta: >> Apagar/encender música de fondo <<

Hola:

robert0907: fíjate que el tema es de hace más de 4 años. Por eso lo cierro, siempre puedes abrir temas nuevos y referenciar los viejos.

Sobre tu aporte, parece que solo pruebas tus códigos con explorer, ya que tanto document.all, como el tag bgsound son para ese navegador... aunque sea el más usado, cada vez hay más usuario de firefox, safari y el nuevo chrome... y tu código en esos navegadores no funciona.

Saludos :arriba:

La zona horaria es GMT -6. Ahora son las 08:45.