Problemas para silenciar música de fondo.

haga41 · #1 (**permalink**) 10/03/2009, 13:12

Hola a todos,

Estoy pensando en usar música de fondo para una web próximamente y de momento he conseguido en una web un código que hace que funcionen las canciones en formato wav y mp3 sin necesidad de plugins ni Quicktime en Explorer, Firefox y Opera.

El caso es que quiero darle la opción al usuario mediante el típico icono de silencio de poder quitar el sonido si así lo desea y no acabo de entender como hacerlo, luego ya estaría también bien que si ha quitado el sonido al volver a pulsar volviese a sonar pero vamos que de momento con saber como quitarlo ya me valdría. El código es este:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function silencio(){
document.getelementbyid("musica").mute = 1;

}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<object type="application/x-mplayer2" id="musica" height="0" width="0">
<param name="fileName" value="cancion1.wav">
<param name="autostart" value="1">
<param name="playcount" value="5">
<param name="mute" value="0">
</object>
<a href="#" onclick="silencio();">Silencio</a>
</body>

Si alguien pudiese ayudarme se lo agradecería.

Saludos

Panino5001 · #2 (**permalink**) 10/03/2009, 16:07

Podrías probar así:

Código:

function detener(){
document.getElementById('musica').getElementsByTagName('param')[0].setAttribute('value','');
}

caricatos · #3 (**permalink**) 10/03/2009, 16:18

Hola:

A pesar de que los object son los tags recomendados para "objetos", con respecto a la música, por mi experiencia puedo aconsejarte el tag embed, que he comprobado que funciona en todos los navegadores sin problemas, y para poner y quitar, otra cosa que he comprobado es que con los iframes es con los únicos elementos que he conseguido el efecto... puedes verlo en esta página: Música en la web, en construcción porque tengo pendiente controlar el sincronismo.

Saludos

haga41 · #4 (**permalink**) 11/03/2009, 06:21

Gracias a ambos por responder tan rápido:

He estado intentadolo de las 2 formas que me decis, o al menos de la forma que yo lo he entendido pero aún no lo he conseguido, os cuento:

Panino5001
He modificado el código que me diste para acceder al param mute pero aunque me lo cambia, no quita el sonido, se que lo para porque lo compruebo con el alert. Este es el código que he probado:

Código HTML:

<script language="javascript" type="text/javascript">
function detener(){
var silencio
document.getElementById('musica').getElementsByTagName('param')[3].setAttribute('value','1');
silencio = document.getElementById('musica').getElementsByTagName('param')[3].value;
alert(silencio);

}
</script>
</head>

<body>
<object type="application/x-mplayer2" id="musica" height="0" width="0" name="musica">
<param name="fileName" value="cancion1.wav">
<param name="autostart" value="1">
<param name="playcount" value="5">
<param name="mute" value="0">
</object>
<a href="#" onclick="detener();">Silencio</a>
</body>

caricatos

La verdad es que use object porque había entendido lo contrario que funcionaba mejor que embed pero vamos que sólo es lo que había oído, de todas formas sí que es verdad que para este caso concreto lo que más me interesa es que el usuario que acceda a la web no tenga que descargarse plug-ins ni programas de ningún tipo. Ayer con usando el código de tu web, puede que hiciera algo mal pero vamos creo que lo copie bien, en firefox me pedio un plug-in para escuchar la canción, también es verdad que lo del iframe creo que no lo he pillado bien de l todo. En Explorer van bien tanto los mp3 como los wav y en Opera va bien el wav pero no el mp3 y en Firefox no me va bien ninguno pero curiosamente ayer me pedía el plug-in cuando lo hice sin iframe y hoy no me lo pide tanto si uso iframa como si no lo uso y que yo sepa no lo he instalado, no se porque pasará esto.

El código que he usado ha sido en un primero archivo: musica.php, he puesto en el body el formulario tal y como lo tienes, simplemente cambienado el nombre de la canción por la que tengo yo y después he añadido esto:

Código HTML:

<iframe height="100%" width="100%" name="playurl">
&nbsp;
</iframe>

Después he creado el otro archivo con el mismo código que pones y el mismo nombre y de esa forma se carga ahí. Lo que no acabo de entender bien es como controlar lo de las imágenes de encendido y apagado.

Saludos

caricatos · #5 (**permalink**) 11/03/2009, 10:44

Hola:

La verdad es que los plugins son un auténtico coñazo, pero los que navegamos con alguno de esos navegadores que lo requieren, los tenemos instalados... Y la polémica entre object y embed, cierto es que se puede encontrar detractores del segundo, pero como te he puesto antes, se trata de "experiencia personal"...

Lo del altavoz es solo poner una imagen u otra dependiendo de que haya música o nó... te paso el código original... en él hay una especie de precarga con ajax (una de esas curiosidades...), donde se cambia la imagen al terminarse la carga del fichero de música:

playfilemp3.php

Código php:

Ver original<?
session_start();
$sonar = $_FILES["f"];
$tmp = $sonar["tmp_name"];
$tipo = $sonar["type"];
$url = urlencode($sonar["name"]);
$titulo = ($sonar == "") ? "No hay Música": "Canción: $sonar[name]";
$altavoz = ($sonar == "") ? "altavozApagado.gif" : "altavoz.gif";
if ($sonar != "")   {
    $fichero = $sonar["name"];
    $_SESSION["tip"] = $tipo;
    $_SESSION["son"] = file_get_contents($tmp);
}
?>
<html>
<head>
<title>
<?=$titulo; ?>
 
</title>
<style type="text/css" >
*   {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>
<?
if ($sonar != "")   echo <<< ajax
 
<script type="text/javascript" >
function objetoAjax()   {
    if (window.XMLHttpRequest)
        _ajax = new XMLHttpRequest();
    else
        if (window.ActiveXObject)
            _ajax = new ActiveXObject("Microsoft.XMLHTTP");
        else
            _ajax = false;
    return _ajax;
}
 
window.onload = function()  {
    ajax = objetoAjax();
    if (ajax)   {
        ajax.open("get", "playtempmp3.php?$url", true);
        ajax.onreadystatechange = function()    {
            if (ajax.readyState == 3)   {
                parent.espera_terminada();
                document.images[0].src = "../dibujos/altavoz.gif";
            }
        }
        ajax.send(null);
    }
    else    {
        document.images[0].src = "../dibujos/altavoz.gif";
        parent.espera_terminada();
    }
 
}
</script>
 
ajax;
?>
</head>
<body>
<img src="../dibujos/altavozApagado.gif" alt="<?=$titulo["name"]; ?>" />
 
<?
if ($sonar != "")   echo <<< sonido
<embed src="playtempmp3.php?$url" autostart="true" type="$tipo" style="width: 0; height: 0" /></embed>
 
sonido;
?>
</body>
</html>

Saludos

haga41 · #6 (**permalink**) 11/03/2009, 13:28

Hola de nuevo:

Gracias por la ayuda,

He usado el código que me has dado para esa página pero ahora no me suena en ningún navegador no se porque. Cuando le doy al Play aparece la imagen de "Altavozapagado.gif" en el iframe y el botón de Play se convierte en el de Stop pero no suena nada, algo se me ha debido de pasar pero no se que puede ser. Te pongo el códigos del fichero que llama a playfilemp3.php el archivo playtempmp3.php lo he copiado entero como el playfilemp3.php.

musica.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<form action="playurlmp3.php" name="porurl" method="get"
	target="playurl"
	style="display: inline; text-indent: 0"
	onsubmit="envio.innerHTML = (url.disabled) ? 'stop' : 'play';
	url.disabled = !url.disabled"
>
<input type="hidden" name="url" value="cancion1.wav" disabled />

<button type="submit" name="envio" style="padding: 0.2em; margin: 0" >play</button>
</form >
<iframe height="100%" width="100%" name="playurl">
&nbsp;
</iframe>
</body>
</html>

Saludos