WidgetsPlayer


Import de morceaux

  1. Inscrivez-vous gratuitement sur Winky
  2. Connectez-vous à votre espace d'administration
  3. Cliquez sur l'onglet Musique du menu déroulant
  4. Vous pouvez ajouter une liste de lecture en cliquant sur Nouvelle liste de lecture puis ajouter un morceau ou directement ajouter un morceau à la liste de lecture créée par défaut appelée Morceaux seuls
    Une liste de lecture permet de regrouper plusieurs morceaux. Elle peut-être un album, un thème ou autres.
  5. Pour ajouter un morceau, cliquez sur Ajouter un morceau sur la liste de lecture choisie
  6. Remplissez les champs et choisissez le fichier à uploader
  7. Cliquez sur Valider

Une fois l'upload terminé, la page se rafraichit automatiquement et vous voyez alors votre morceau uploadé.
Lorsqu'une liste de lecture contient plusieurs morceaux, vous pouvez modifier l'ordre de ceux-ci simplement en glissant un morceau (bouton de clic gauche laissé enfoncé, vous déplacez la souris, puis vous relachez le bouton).

Personnalisation des formes d'onde

Méthode simple

  1. Inscrivez-vous gratuitement sur Winky
  2. Connectez-vous à votre espace d'administration
  3. Cliquez sur l'onglet Design du menu déroulant, section Lecteurs audio
  4. Cochez le paramètre Waveform
  5. Vous pouvez modifier l'apparence des forme d'onde via les paramètres présents dans cette section :

    • Player_waveform Couleur par défaut des formes d'onde
    • Player_waveform_loaded Couleur de la parie chargée des morceaux
    • Player_waveform_played Couleur de la partie jouée des morceaux
    Ces modifications s'appliquent à tous les lecteurs de musique.

Méthode avancée

  1. Inscrivez-vous gratuitement sur Winky
  2. Connectez-vous à votre espace d'administration
  3. Cliquez sur l'onglet Musique du menu déroulant
  4. Cliquez sur le bouton Editer du morceau dont vous désirez personnaliser le lecteur de musique
  5. Le champs Forme d'onde vous permet d'insérer un object en langage JavaScript
  6. Cliquez sur Valider
Documentation JavaScript
Prérequis : Vous devez connaître les notions de base du langage JavaScript.

L'objet JavaScript représente le lecteur de musique dont les principaux attributs sont les suivants :

NomTypeValeur par défautDescription
visibleBooléen
Ecrase depuis l'onglet Design de votre espace d'administration via le paramètre Waveform.
Affiche la forme d'onde si positionné à true, la cache sinon.
bottomBooléentrue Scinde la forme d'onde en 2 parties inégales haute et basse, cette dernière n'étant pas cliquable.
Positionnez ce paramètre à false si vous désirez une forme d'onde horizontalement symétrique.
colorsObjet
Editable depuis l'onglet Design de votre espace d'administration via les paramètres respectifs Player_waveform,Player_waveform_loaded et Player_waveform_played.
Object contenant les couleurs utilisées pour dessiner la forme d'onde, de la forme suivante :
{
		//Couleur par défaut
		default:Player.Color,
		//Couleur de la partie chargée du morceau
		loaded:Player.Color,
		//Couleur de la partie jouée du morceau
		played:Player.Color
	}
Player.Color est un objet de la forme suivante :
NomArgumentsDescription
[constructeur]rouge : Nombre,
vert : Nombre,
bleu : Nombre,
alpha : Nombre
Construit une instance de couleur avec les constantes RVBA passées en paramètres. Chaque constante RVB doit être comprise entre 0 et 255, la constante d'opacité A est comprise entre 0 et 1.
Par exemple, une couleur rouge écarlate semi-transparente s'écrit ainsi :
var color=new Player.Color(255,0,0,0.5);
@fromRGBAStringcouleur : texte Construit une instance de couleur à partir du texte passé en paramètre.
Par exemple, une couleur rouge écarlate semi-transparente s'écrit ainsi :
var color=Player.fromRGBAString("rgb(255,0,0,0.5)");
#clone Clone la couleur courante dans une nouvelle instance.
Par exemple :
var color=other_color.clone();
ratioNombre | Fonction(...) Cet attribut est appelé à chaque redimensionnement du lecteur de musique.
Il permet de définir un ratio avant affichage.
Scope :this est l'instance du lecteur de musique courant
Retour (Nombre) : Ratio largeur / hauteur du lecteur de musique.
Par exemple, un ratio de 1/2 s'écrit ainsi :
var ratio=3;
Un lecteur de musique de hauteur fixe de 190px s'écrit ainsi :
var ratio=function(){
		//this.container : noeud DOM contenant le code HTML du lecteur de musique
		return this.container.offsetWidth/190;
	};
formatDataFonction Cet attribut est appelé à chaque redimensionnement du lecteur de musique.
Il permet de formater les données avant affichage.
Scope :this est l'instance du lecteur de musique courant
Paramètre (Tableau) : Tableau d'amplitude Y (comprise entre 0 et 1) par position X.
Retour (Nombre) : Tableau d'amplitude Y par position X.
Par exemple, diviser l'amplitude générale par 2 s'écrit ainsi :
var formatData=function(_data){
		var data=[];
		for(var x=0;x < _data.length;x++) {
			data[x]=_data[x]/2;
		}
		return data;
	};
customColorFonction Cet attribut est appelé à chaque redimensionnement du lecteur de musique.
Il permet de personnaliser l'affichage du lecteur de musique point par point.
Scope :this est l'instance du lecteur de musique courant
Paramètre (Objet) : Objet contenant les attributs suivants :
NomTypeDescription
xNombrePosition X courante, en secondes.
yNombrePosition verticale de l'axe de symétrie horizontal, en pixels.
wNombreLargeur du lecteur de musique, en pixels.
hNombreHauteur de l'amplitude par rapport à l'axe de symétrie horizontal, en pixels.
valueNombreAmplitude Y courante, comprise entre 0 et 1.
hoverBooléenEgal à true si le lecteur de musique est survolé par la souris, false sinon.
bottomBooléen Egal à true si la forme d'onde est horizontalement symétrique, false sinon.
Ce paramètre est configurable via l'attribut bottom de l'objet global JavaScript.
loadingNombreDurée de la partie du morceau chargée, en secondes.
positionNombrePosition courante du morceau, en secondes.
durationNombreDurée totale du morceau, en secondes.
cptNombrePosition de l'instant X dans le tableau d'amplitude Y.
colorsObjetObjet contenant les couleurs définies via l'attribut colors de l'objet global JavaScript.
ctxObjet Object de contexte du noeud DOM <canvas> associé au lecteur de musique. Pour plus d'informations: http://www.w3schools.com/html/html5_canvas.asp
Retour (Objet) : Objet contenant la couleur à appliquer et le décalage en pixels par rapport à l'axe de symétrie horizontal, de la forme suivante :
{
		//Couleur à appliquer
		color:Player.Color,
		//Décalage
		offset:Nombre
	}

D'autres attributs sont accessibles, mais il est recommandé de ne pas les modifier.

A titre d'exemple, voici l'objet global JavaScript utilisé par défaut :

{
	colors:{
		default:Player.Color.fromRGBAString("rgba(75,75,75,1)"),
		loaded:Player.Color.fromRGBAString("rgba(45,45,45,1)"),
		played:Player.Color.fromRGBAString("rgba(204,51,63,1)")
	},
	ratio:function(){
		var width=this.container.offsetWidth,
			result=width/190;
		try {
			if (!window.frameElement) {
				var viewport=window.top.document.body.dataset.viewport;
				if (viewport === "xs")
					result=3;
				else if (viewport === "sm")
					result=6;
				else if (viewport === "md")
					result=3;
				else if (viewport === "lg")
					result=3;
			}
		}
		catch(_e) {}
		return result;
	},
	bottom:true
}

Export de lecteurs de musique

  1. Inscrivez-vous gratuitement sur Winky
  2. Connectez-vous à votre espace d'administration
  3. Importez vos créations musicales
  4. Personnalisez chacun de vos lecteurs de musique en fonction de vos envies
  5. Cliquez sur le bouton Partager associé à chaque lecteur de musique
  6. Exportez vos lecteurs de musique où vous le désirez via un simple copier/coller
Pas de site web ? Utilisez celui associé à votre compte perso et personnalisez-le comme un site pro !
Exemple du morceau Pedale du site de démonstration
<iframe width="100%" height="220" scrolling="no" frameborder="no" src="http://demo.winky.fr/player/?sound_id=1&show_controls=1&show_title=1"></iframe>
Résultat

WidgetsProject


SOON...


WidgetsCalendar


Export d'événements

  1. Inscrivez-vous gratuitement sur Winky
  2. Connectez-vous à votre espace d'administration
  3. Ajoutez vos événements au calendrier
  4. Personnalisez votre calendrier en fonction de vos envies
  5. Cliquez sur le bouton Partager associé à ce calendrier
  6. Exportez vos événements où vous le désirez via un simple copier/coller
Pas de site web ? Utilisez celui associé à votre compte perso et personnalisez-le comme un site pro !
Exemple du calendrier du site de démonstration pour le mois de Décembre 2015
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="http://demo.winky.fr/calendar/?month=12&year=2015"></iframe>
Résultat

404

Sorry, this page is not available