semPlayList Plugin de Jquery

semPlayList Plugin de Jquery

Una de las cosas de html5 que me gusta es la etiqueta <audio> o <video>. Gracias a esta etiqueta ya no necesitaremos implementar reproductores externos si queremos mostrar sonido o videos.

Igual que insertar una imagen podemos hacer uso del src de audio o video para poder mostrar el archivo multimedia que queremos.

Sin embargo realizar una Lista de Reproducción no a sido implementada ahun por lo que tenemos que valernos de javascript para poder crear nuestras listas de reproducción.

Somo siempre busque en internet como hacer listas y lo que encontré fueron grandes y engorrosos códigos que no siempre uno necesita cuando diseña una web. Asi que se me ocurrio hacerla desde cero y gracias a Jquery e podido desarrollar un pedazo de código que nos permitirá implementar esta tarea en pocos pasos.

De Paso matamos 2 pájaros de un tiro y aprenderás a crear tu propio Plugin para Jquery. Es decir el pequeño codigo que hice es un plugin para jquery de modo que solo tienes que copiar y pegar el codigo.

(function ( $ ) {
	$.fn.semPlayList = function(options) {
        var settings = $.extend({play: false,visible:false,looplist: false,selector:'.mp3file'},options);
		var clase = settings.selector; 
		var playlist = [];
		var player = document.createElement('audio');
		var controles;
		this.each(function(e) {
			/*Diseñado por Jose Luis Gonzales Rimachi semsoft-peru.com*/
			playlist.push($(this).attr("href"));
		});
		this.click(function(e){
			var pista = $(clase).index(this);
			reproducir(pista);
			e.preventDefault();
		});	
		if(settings.play && playlist.length > 0){
			reproducir(0);
		}
		if(settings.visible){
			player.controls=true;		
			$(player).insertBefore($(clase).first());
		}
		player.addEventListener("ended", function(){
			next();
		});	
		function next(){
			var next = Number($(player).data('pista')) + 1;
			if(next < playlist.length){
				reproducir(next);
			}else{
				if(settings.looplist){
					reproducir(0);
				}				
			}		
		}
		function fback(){
			var next = Number($(player).data('pista')) - 1;
			if(next >= 0){
				reproducir(next);
			}
		}		
		function reproducir(index){
			$(clase).removeClass('in-play');
			$(clase).eq(index).addClass('in-play');
			$(player).data('pista',index);
			player.src = playlist[index];
			player.play();
		}	

		return player;
    }
}( jQuery ));

(Editado: Actualizamos este Plugin para que funcione con Jquery 3x debido a que la funcion this.selector a sido eliminado. Ahora en las opciones debemos indicarle el nombre de la clase: selector: ".lista")

Eres libre de usar este codigo en tus paginas y solo pido respetes el crédito que esta comentado. 

La forma de implementarlo en tu web es simplemente agregando links hacia tu archivo de musica.

<a class="lista"  href="http://tudominio.com/musica1.mp3">Musica2</a>
<a class="lista"  href="http://tudominio.com/musica2.mp3">Musica2</a>

Observa que le pusimos la clase lista. Ahora utilizamos el Plugin de la siguiente forma:

var miplayer = $(".lista").semPlayList({
	selector:".lista",/*Mismo nombre de clase*/
	play: false,/*Reproducir al carga*/
	visible:true,/*Ver el Reproductor*/
	looplist: false /*Repetir Lista*/
});

Y eso es todo. El plugin se encargará de repoducir el sonido y además de eso saltará a la siguiente canción una vez terminada de tocar la primera.

¿Porque implementamos asi? var miplayer=

Porque el plugin solo realizará la tarea de PlayList y nos devolverá el objeto Reproductor. Con esto nos aseguramos de manipular el reproductor desde afuera. Ejm.

miplayer.pause();

miplayer.addEventListener("tuevento", function(){
	/*tucodigo*/
});

Asi que tu puedes agregar controles personalizados con css para tu reproductor o insertarlo directamente este ombjeto miplayer donde quieras. Tambien te recomiendo que le pongas flores y css decente a la lista que archivos que hiciste.

Por ultimo: si quieres implementar botones de siguiente canción o anterior simplemente haz click en la siguiente cancion de la lista jejejeje.. No, mentira.

function playNext(sum){
	if(sum){
		pista = Number($(player).data('pista')) + 1;
	}else{
		pista = Number($(player).data('pista')) - 1;
	}
	$('.lista').eq(pista).click();
/*fijate si pusiste otro nombre de clase $('.lista') cambia también aqui*/
}

No lo veo de mucha importancia pero inserta esa función de modo que si quieres que pase a la siguiente canción implementa un botón que haga:

playNext(true) /*Para pasar a la siguiente canción*/
playNext(false) /*Para regresar a la canción anterior*/

Cualquier consulta abajo en los comentarios.