Y muy cutre, porque aún estoy haciendo pruebas y enseñándome esto de los componentes canvas y el tag audio. Pero funcional, oiga.

A mi ya se me ha ocurrido con esto hacer un gestor de podcasts en HTML5 súper guapo. Lo pongo en la lista de proyectos pendientes. Vamos a ver la primera aproximación.

Lo primero que necesitamos es una fuente de audio. Yo las pruebas que he hecho ha sido con un podcast en MP3, con lo que no funcionará en Firefox. Sí funciona, sin embargo, en Chrome y Safari. Muchos sitios tienen fuentes tanto en MP3 como en OGG para dar soporte a múltiples navegadores, con lo que esto se resolvería poniendo múltiples fuentes para la misma pista de audio.

Bien, nuestro reproductor va a tener los siguientes elementos:

  • Un botón de play/pause. Como soy un mal diseñador, cambiaré el botón por dos enlaces. Generar esto será bastante sencillo. Serán dos enlaces que llamen a funciones de javascript llamadas play() y pause(). El uno ocultará al otro para que sólo se muestre una de estas dos acciones en pantalla.
  • Un contador de tiempo transcurrido/tiempo total. El componente audio nos proporciona información del instante de tiempo en que nos encontramos, así como del tiempo total de la fuente de audio. Como se nos proporciona en segundos, lo pasaremos al formato hh:mm:ss.
  • Una barra de progreso que se irá llenando conforme pase el tiempo. Además, si hacemos clic en cualquier parte de la barra iremos a ese instante de tiempo. Esto lo conseguiremos con el objeto canvas. Capturaremos los clics que se den en él para ver en qué punto de la barra nos encontramos, e irnos así a ese instante de tiempo en la pista de audio.
  • Dos controles de volumen: uno para subirlo y otro para bajarlo.
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="player.js"></script>
</head>
<body>
<a href="#" id="play" class="audio_control">Play</a>
<a href="#" id="pause" class="audio_control" style="display:none">Pause</a>
(<span id="currentTime">00:00:00</span> / <span id="duration">00:00:00</span>) (<a href="#" id="volUp" class="audio_control">+</a> <span id="vol"></span> <a href="#" id="volDown" class="audio_control">-</a>)
<audio id="player" preload="auto" controls="controls">
	<source src="http://www.arcadiagamers.com/descargas/ArcadiaGamers7203_16dic.mp3"></source>
	<!-- Si tuviésemos la fuente en ogg, la pondríamos aquí -->
</audio>
<canvas id="timer" width="500" height="80"></canvas>
</body>
</html>

Y aquí el fichero player.js, que tiene todo el meollo de la cuestión

	var player = false;
	var canvas = false;
	var context = false;
	var paused = false;

	var updateCanvas = function(percent){
		//Obtenemos la anchura del canvas
		var w = canvas.width * percent / 100;

		//Dibujamos un rectángulo relleno de blanco (limpiamos la imagen)
		context.fillStyle = "#FFFFFF";
		context.fillRect(0, 0, canvas.width, canvas.height);

		//Dibujamos un rectángulo de relleno gris 
		context.fillStyle = "#BEBEBE";
		context.fillRect(0, 0, w, canvas.height);

		//Lo envolvemos con una caja de color naranja
		context.strokeStyle = "#FF8800";
		context.strokeRect(0, 0, canvas.width, canvas.height);
	}

	var canvasClicked = function(event){
		//Hacemos una regla de tres para colocar el timer del reproductor 
		//en un tiempo directamente proporcional a la zona que hemos pinchado
		player.currentTime = player.duration * event.offsetX / canvas.width;
	}

	//Convierte segundos (double) a hh:mm:ss
	var toHMS = function(it){
		if(isNaN(it)){
			return "00:00:00";
		}

		var hours = parseInt(it / 3600);
		var minutes = parseInt((it % 3600) / 60);
		var seconds = parseInt((it % 3600) % 60);

		return ((hours<10?"0"+hours:hours) + ":" + (minutes<10?"0"+minutes:minutes) + ":" + (seconds<10?"0"+seconds:seconds));
	}
	
	var pause = function(){
		//Pausamos la reproducción
		player.pause();
		paused = true;

		//Escondemos el pause y mostramos el play
		$('#pause').hide(); $('#play').show();
	}
	
	var play = function(){
		//Iniciamos la reproducción
		player.play();
		paused = false;

		//Escondemos el play y mostramos el pause
		$('#play').hide(); $('#pause').show();
	}

	var updateTimes = function(){
		//Actualizamos el display de tiempo transcurrido
		$('#currentTime').html(toHMS(player.currentTime));
		
		//La línea se rellenará con el porcentaje de tiempo transcurrido
		updateCanvas(parseInt(player.currentTime * 100 / player.duration));		
	}

	var addVol = function(inc){
		//Añadimos un incremento al volumen actual
		player.volume+= inc;

		//Actualizamos el display de volumen
		$('#vol').html(parseInt(player.volume*100));
	}

	//
	var init = function(){
		//Inicializamos el player
		player = document.getElementById('player');

		//Asociamos eventos a los botones de play y pause
		$('#play').click(play);
		$('#pause').click(pause);
		$('#volUp').click(function() { addVol(0.1) } );
		$('#volDown').click(function(){ addVol(-0.1) });

		//Definimos la duración de la pista de audio, así como el valor del volumen (de 0 a 100)
		$('#duration').html(toHMS(player.duration));
		$('#vol').html(parseInt(player.volume*100));

		//Actualizamos cada 100ms
		setInterval(function(){ updateTimes(); }, 100);

		//Inicializamos el canvas
		canvas = document.getElementById('timer');	
		$('#timer').click(canvasClicked);
		context = canvas.getContext('2d');
	};
	
	$(document).ready(function(){
		$('.audio_control').click(function(event){
			event.preventDefault(); //Evitamos que se mueva la ventana al hacer clic en los enlaces
		});

		$('#player').bind('loadedmetadata', init); //Lanzamos la función init cuando se hayan cargado los metadatos

	});

Así, nos quedará algo tan espectacular como esto:

Con un poco de buen gusto y la gráfica adecuada, ya podemos convertir esto en nuestro primer player online.

Anuncios