WidgetsGallery

SOON...
WidgetsPlayer
Import de morceaux
- Inscrivez-vous gratuitement sur Winky
- Connectez-vous à votre espace d'administration
- Cliquez sur l'onglet Musique du menu déroulant
-
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 seulsUne liste de lecture permet de regrouper plusieurs morceaux. Elle peut-être un album, un thème ou autres.
- Pour ajouter un morceau, cliquez sur Ajouter un morceau sur la liste de lecture choisie
- Remplissez les champs et choisissez le fichier à uploader
- 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
- Inscrivez-vous gratuitement sur Winky
- Connectez-vous à votre espace d'administration
- Cliquez sur l'onglet Design du menu déroulant, section Lecteurs audio
- Cochez le paramètre Waveform
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
- Inscrivez-vous gratuitement sur Winky
- Connectez-vous à votre espace d'administration
- Cliquez sur l'onglet Musique du menu déroulant
- Cliquez sur le bouton Editer du morceau dont vous désirez personnaliser le lecteur de musique
- Le champs Forme d'onde vous permet d'insérer un object en langage JavaScript
- Cliquez sur Valider
Documentation JavaScript
L'objet JavaScript représente le lecteur de musique dont les principaux attributs sont les suivants :
Nom | Type | Valeur par défaut | Description | ||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
visible | Boolé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.
| |||||||||||||||||||||||||||||||||||||||||||
bottom | Booléen | true |
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.
| ||||||||||||||||||||||||||||||||||||||||||
colors | Objet |
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 :
Player.Color est un objet de la forme suivante :
| |||||||||||||||||||||||||||||||||||||||||||
ratio | Nombre | 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 courantRetour (Nombre) : Ratio largeur / hauteur du lecteur de musique. Par exemple, un ratio de 1/2 s'écrit ainsi :
Un lecteur de musique de hauteur fixe de 190px s'écrit ainsi :
| ||||||||||||||||||||||||||||||||||||||||||
formatData | Fonction |
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 courantParamè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 :
| |||||||||||||||||||||||||||||||||||||||||||
customColor | Fonction |
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 courantParamètre (Objet) : Objet contenant les attributs suivants :
|
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
- Inscrivez-vous gratuitement sur Winky
- Connectez-vous à votre espace d'administration
- Importez vos créations musicales
- Personnalisez chacun de vos lecteurs de musique en fonction de vos envies
- Cliquez sur le bouton Partager associé à chaque lecteur de musique
- Exportez vos lecteurs de musique où vous le désirez via un simple copier/coller
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
- Inscrivez-vous gratuitement sur Winky
- Connectez-vous à votre espace d'administration
- Ajoutez vos événements au calendrier
- Personnalisez votre calendrier en fonction de vos envies
- Cliquez sur le bouton Partager associé à ce calendrier
- Exportez vos événements où vous le désirez via un simple copier/coller
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>