Para tener un reproductor mp3 en una página, basta con tener una etiqueta object/embed o
bgsound en el caso de explorer, pero si pretendemos elegir un tema concreto para su
reproducción debemos hacer algunas piruetas, entre otras razones por las implementaciones
de los distintos navegadores.
Ya he comentado que hay algunas diferencias entre los navegadores y un problema añadido es
que la única etiqueta que en mis pruebas funciona bien, sin necesidad de usar "objetos externos"
es embed, y está desaprobada por W3 consortium. De todos modos será esa la etiqueta que usaremos
en esta página, quedando a elección de quien implemente este script el uso de uno u otro tag.
Reproducir desde Internet
Si queremos un reproductor sencillo que permita seleccionar un tema (opcional) con un par de botones
para reproducir/detener el sonido (incluso solo uno que alterne las funcionalidades mencionadas) tan
solo necesitamos un formulario y un iframe donde se reciba el mismo.
Como ejemplo tenemos un iframe a la izquierda de este párrafo, con la página que será nuestro
reproductor: playurlmp3.php, esta página recibirá el fichero
Yesterday.mp3 como variable url (url es un campo oculto que quedará
deshabilitado al enviarse el formulario).
Por consiguiente el formulario solo dispondrá del típico botón submit (envío), y por cada pulsación
se realizarán un par de acciones además del envío: habilitar/deshabilitar el campo url y modificar
la leyenda del botón (play/stop).
Este es el formulario:
. Véase el código a continuación.
<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="Yesterday.mp3" disabled />
<button type="submit" name="envio" style="padding: 0 .2em; margin: 0" >play</button>
</form >
También se puede ver a continuación el código de playurlmp3.php:
<?
$sonar = $_GET["url"];
$titulo = ($sonar == "") ? "No hay Música": "Canción: $sonar";
$altavoz = ($sonar == "") ? "altavozApagado.gif" : "altavoz.gif";
?>
<html>
<head>
<title>
<?=$titulo; ?>
</title>
<style type="text/css" >
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style
</head>
<body>
<img src="../dibujos/" alt="" />
<?
if ($sonar != "") echo <<< sonido
<embed src="$sonar" autostart="true" style="width: 0; height: 0" />
sonido;
?>
</body >
</html >
Escuchar nuestros propios ficheros online
Para poder escuchar nuestros propios mp3 desde una página web de internet (por ejemplo esta misma)
obligatoriamente debemos subirlos a la red. En consecuencia el campo url (ahora lo llamaremos f)
debe ser un campo de entrada del tipo file, a la vez que -también obligatoriamente- el formulario debe
tener el método post y el enctype="multipart/form-data"
Con este sistema la apariencia del reproductor sería la misma, incluso también puede tener la
misma apariencia el botón de encendido pero el campo que debe procesarse ahora no solo debe
ser visible, sino que nos obliga a cambiar nuestro formulario.
El formulario que facilita nuestro objetivo se muestra a continuación:
<form
action="playfilemp3.php"
name="porfile"
method="post"
target="playfile"
enctype="multipart/form-data"
style="display: inline; text-indent: 0"
>
<label for="fichero">Fichero:</label>
<input type="file" name="f" id="fichero" onchange="chequear_extension(this, 'audio')" /><br />
<button
type="submit"
name="ejecutar" disabled
onclick="sonando(this.form)" >ejecutar</button>
<button
type="submit"
name="detener" disabled
onclick="parar(this.form)" >detener</button>
</form >
Los siguientes listados se corresponden con el fichero que recibe el formulario en primer lugar,
y luego mostramos el que ejecuta el fixhero subido (solo vale para ficheros pequeños de música
(mid, au, mp3 con muy poco tamaño).
playfilemp3.php (receptor del formulario)
<?
session_start();
$sonar = $_FILES["f"];
$tmp = $sonar["tmp_name"];
$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"] = $sonar["type"];
$_SESSION["son"] = file_get_contents($tmp);
}
?>
<html >
<head >
<title >
<?=$titulo; ?>
</title >
<style type="text/css" >
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style >
</head >
<body >
<img src="../dibujos/<?=$altavoz; ?>" alt="<?=$titulo["name"]; ?>" />
<?
if ($sonar != "") echo <<< sonido
<embed src="playtempmp3.php?$url" autostart="true" style="width: 0; height: 0" />
sonido;
?>
</body >