semPlayList Plugin de Jquery

semPlayList Plugin de Jquery

Solo Tu Alabanzas al Rey Dios con Nosotros El Regalo En un Establo Gloria Que Dirías Sánanos

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.

Fecha: Sep 06, 2016 Nro de Vistas: 2334
Invítame un Café

Si nuestros tutoriales te ayudaron una manera de dar gracias es apoyándonos. Esto nos permitirá seguir publicando mas tutoriales.