Música en la web


Sin música Con música

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 >

playtempmp3.php (Fichero subido)

<?php
	session_start();
	$sones = $_SESSION["son"];
	$tipo = $_SESSION["tip"];
	header("Content-type: ".$tipo);
	echo $sones;
	session_destroy();
?>

Sobre la validación de los ficheros musicales que se van a subir, el tratamiento en el navegador puede verse en el siguiente artículo: Revisar las imágenes antes de subirlas.

Reproducir mp3 y lrc

Teniendo los ficheros mp3 y lrc podemos incrustar un reproductor que a la vez de hacer sonar nuestro fichero mp3, nos vaya mostrando la letra que se lee desde el fichero lirics asociado.

Para este objetivo hemos tenido que resolver un problema añadido: la sincronización entre el comienzo del tema mp3 y el comienzo del temporizador que vaya mostrando las líneas de la canción... y para conseguirlo nos hemos servido de la tecnología "ajax"

El reproductor que se muestra a la derecha (se trata de un iframe) consta entre otras cosas el mismo altavoz de los ejemplos anteriores, y en un principio un selector de canciones y una serie de botones de los cuales solo está activo el botón cargar. Cuando se pulsa sobre este se actualizan los campos previamente leídos del fichero lrc sobre la canción seleccionada, y se hace una llamada "ajax" para cargar la canción (mientras se muestra una animación representativa). Al completarse la carga se activa el botón del reproductor que no es otra cosa que un botón submit, deshabilitando a la vez tanto el selector de las canciones como el botón "cargar"... -Notese que el botón "parar" todo el momento estuvo deshabilitado.

Al hacer submit solo al cargarse la página receptora del formulario se activa el botón de parada (a la vez se desactiva el de envío) y se activa la temporización que muestra la letra de la canción.

Creando lirics a partir de las canciones (texto) y los ficheros mp3

Tan solo tenemos que seleccionar el fichero de texto (.txt) con la letra de la canción en el siguiente control "file".

También tenemos que subir el fichero mp3.

... Y pulsar el botón "crear lrc" para enviar los ficheros seleccionados a una ventana de edición, donde después de chequear la validez de ambos ficheros, nos permitirá crear las marcas de tiempo para la generación del fichero "lirics":

Fuentes

Para obtener mp3's libres de royalties: creativecommons.org. Para letras de canciones: letrascanciones.org. Obtener información de mp3: Source Rally PHP Community. Información sobre el formato lrc (lirics) wiki