0 Fusées éclairantes 0 Fusées éclairantes ×

Ce qui est badr?

Badr est un entièrement personnalisable, Responsive HTML5 audio plugin pour WordPress. Son interface est construit autour de la forme d'onde du fichier audio qui joue arrière.

Voici une liste des principales caractéristiques:

  • interface réactive, avec un style moderne à la recherche
  • Prise en charge HTML5
  • quatre différentes tailles qui s’adaptent automatiquement à votre page
  • intégration complète avec le gestionnaire de médias de WordPress
  • Editeur visuel dans l’éditeur de WordPress messages
  • archivage des fichiers peak pour un accès instantané à des formes d’onde

Comment l'installer?

Comment installer badr

pour un guide visuel CLIQUEZ ICI

Étape 1 – Dans WordPress Plugins section, Cliquez sur le Ajouter un nouveau bouton, juste à côté de la Plugins titre de la page.

Étape 2 – Cliquez sur le Télécharger le Plugin bouton, juste à côté de la Ajouter des Plugins titre de la page.

Étape 3 – Cliquez sur le Choisissez fichier bouton pour sélectionner l’emplacement de votre waveplayer.zip fichier.

Étape 4 a – Naviguez jusqu'à l’emplacement où vous avez téléchargé le waveplayer.zip fichier.

Étape 4 b – Cliquez sur le Ouvert bouton.

Étape 5 – Le plugin est maintenant actif. Vous pouvez cliquer sur le Paramètres lien juste en dessous de son nom ou aller à Paramètres-> Badr pour configurer ses options.

Étape 6 – Une fois que WordPress a fini de télécharger les fichiers du plugin, Cliquez sur le Activer le Plugin lien.

Étape 7 – Le plugin est maintenant actif. Vous pouvez cliquer sur le Paramètres lien juste en dessous de son nom ou aller à Paramètres-> Badr pour configurer ses options.

Comment l’utiliser?

Gestionnaire de médias de WordPress

À partir de Version 3.9, WordPress permet de créer des playlists audio directement depuis le gestionnaire de médias de WordPress. Badr profite pleinement de cette capacité en introduisant un waveplayer shortcode qui étend la valeur par défaut playlist shortcode. Cette nouvelle shortcode offre aux utilisateurs une interface plus moderne pour leurs pistes audio, tout en gardant la même facilité d’utilisation pour créer leurs listes de lecture préférées. En plus de cela, Badr substitue également à la fonction intégrée audio shortcode, afin que vous trouverez automatiquement une instance bitube de badr partout où vous avez déjà un audio shortcode dans vos pages. Même dans le backend!

wvpl-wpmediamanager

Comment créer une nouvelle instance de badr

pour un guide visuel CLIQUEZ ICI

Étape 1 – Afin de créer une nouvelle instance de badr, simplement créer ou modifier le poste ou la Page où vous souhaitez ajouter la Badr et cliquez sur le Ajouter des éléments multimédias bouton, juste au-dessus de la barre d’outils Visual Editor.

Étape 2 – Dans la barre latérale gauche, ainsi que tous les autres éléments WordPress vous permet de créer, vous y trouverez un menu pour créer une nouvelle instance de badr. Cliquez sur Créer badr.

Étape 3 – Si vous avez déjà téléchargé des fichiers audio, vous pouvez sélectionner ici. Dans le cas contraire, Cliquez sur le Télécharger des fichiers onglet, afin de télécharger de nouveaux fichiers audio.
(WordPress vous permet d’attacher une photo descriptive aux pistes audio ainsi que tout autre type de poste. Lorsque vous définissez l’image caractéristique d’une piste audio, Badr il utilisera comme la miniature de la piste dans le lecteur).

Étape 4 – Télécharger vos pistes audio en faisant glisser vers la zone de dépôt de WordPress ou Sélection de fichiers de vos disques durs locaux.

Étape 5 – Les fichiers téléchargés pendant que vous êtes en train de créer une nouvelle instance de badr obtenir automatiquement sélectionnées pour la sélection de l’instance.

Étape 6 a – Alors que le téléchargement est encore en traitement, vous pouvez sélectionner plusieurs pistes déjà présents dans votre médiathèque

Étape 6 b – Lorsque le téléchargement est terminé et vous êtes heureux avec vous sélection, vous pouvez enfin créer une nouvelle instance de badr en cliquant sur le Créer un nouveau badr bouton.

Étape 7 a – Maintenant, vous pouvez modifier votre instance de badr, commençant par l’ordre des pistes. Afin de changer l’ordre, tout simplement faire glisser et déposer leurs vignettes autour.

Étape 7 b – Dans le Paramètres de badr panneau, vous pouvez modifier les paramètres par défaut du lecteur, qui va modifier l’aspect de cette instance dans la page.

Étape 7c – Quand vous êtes heureux avec votre configuration, Cliquez sur le Insérer badr bouton Insérer l’instance que vous venez de créer dans votre page ou un message.

Étape 8 – Vous pouvez visionner immédiatement l’instance que vous venez d’insérer dans l’éditeur de messages. Vous pouvez même lire les pistes audio!

Badr vous permet de travailler avec une interprétation visuelle complète et entièrement interactive du droit de joueur dans l’éditeur de messages, vous économisant ainsi le temps d’aller dans les deux sens entre l’éditeur de messages et la page dans la partie frontale.

Si vous souhaitez apporter des modifications à l’instance sélectionnée, Il suffit de cliquer sur le bouton.

Étape 9 – Si vous voulez ajouter plus de pistes à votre playlist, Cliquez sur le Ajouter à la Badr élément de menu.

Étape 10 a – Lors de la modification d’une instance de badr que vous avez déjà inséré dans votre message, vous pouvez encore ajouter plusieurs pistes audio, en les sélectionnant dans la bibliothèque multimédia ou même télécharger de nouveaux fichiers, exactement la même manière que vous l’avez fait lorsque vous créez initialement le joueur.

Étape 10 b – Quand vous êtes heureux avec votre sélection, Cliquez sur le Ajouter à la Badr bouton pour voir vos nouveaux titres ajoutés à la liste de lecture précédente du joueur.

Étape 11 – Bien sûr, vous pouvez toujours changer l’ordre des pistes (draggind les fichiers autour) ou l’aspect du lecteur (modifier les paramètres de badr).

Lorsque vous avez terminé avec vous éditer, Cliquez sur le Mise à jour de badr bouton pour rendre vos modifications efficaces.

Étape 12 – Cliquez sur le Publier (pour les postes nouvellement créés ou pages) ou le Mise à jour bouton (pour déjà publié des messages ou des pages) afin de finaliser vos modifications.

Il est maintenant temps pour vous de visiter la page avec votre résultat final!

Shortcode

Bien que la waveplayer shortcode avec tous ses paramètres est créé automatiquement lorsque vous insérez la Badr à travers le Ajouter des éléments multimédias cadre, Il est utile de comprendre sa structure qui se compose comme suit:

[ Badr ID = "séparées par des virgules ID des pistes sélectionnées" 
             MP3 = "" 
            taille = "LG" | "MD" | "SM" | "XS" 
           style = "lumière" | "sombre" 
           forme = "carré" | "cercle" | "arrondis" 
        AutoPlay = "true" | "faux" 
      repeat_all = "true" | "faux" 
         Shuffle = "true" | "faux" 
      wave_color = "#DDD" 
    wave_color_2 = "#666" 
  progress_color = "#59f" 
progress_color_2 = "#05un" 
   hover_opacity = "0.4" 
    cursor_color = "#EE2" 
  cursor_color_2 = "#D93" 
    cursor_width = "2" 
       wave_mode = "4" 
       gap_width = "1" 
wave_compression = "2" 
  wave_asymmetry = "2" ]
Paramètres

ids – C’est le seul paramètre requis et il est remplie automatiquement avec les ID des titres sélectionnés dans le Ajouter des éléments multimédias cadre. Si laissé vide avec le paramètre suivant mp3, cette instance de la Badr sera masquée.

mp3 – Si le ids paramètre est vide, vous pouvez fournir une URL vers un fichier mp3 par le biais de ce paramètre. Si le fichier est local, Badr va tenter d’accéder aux informations de tags ID et leur montrer dans la barre d’informations du joueur.

size – Définit la taille du lecteur. Les valeurs acceptées sont: lg, md, sm et xs. Si laissé vide, le joueur s’affichera par défaut size réglage, Selon l’option correspondante de Paramètres –> Badr.

style – Peut être réglé sur light ou dark définit la couleur de la zone où s’affichent les informations de la piste en cours. En outre, Badr est entièrement personnalisable grâce à la Custom CSS option de Paramètres –> Badr. Si laissé vide, le joueur utilisera la valeur par défaut style réglage, Selon l’option correspondante de Paramètres –> Badr.

shape – Peut être réglé sur square, circle ou rounded et définit la forme de la vignette, où se trouvent les commandes de lecture. Si laissé vide, le joueur utilisera la valeur par défaut shape réglage, Selon l’option correspondante de Paramètres –> Badr.

autoplay – Si la valeur true, le joueur commencera à la lecture de la piste dès que la page termine le chargement. Si la valeur false, l’utilisateur devra commencer la lecture manuellement. Si laissé vide, le joueur utilisera la valeur par défaut autoplay réglage, Selon l’option correspondante de Paramètres –> Badr.

repeat_all – Si la valeur true, le joueur va continuer à jouer arrière les pistes en continu, redémarrage de la première piste lorsque le dernier d'entre eux est terminée. Si la valeur false, la lecture s’arrête après que la dernière piste est terminée. Si laissé vide, le joueur utilisera la valeur par défaut repeat_all réglage, Selon l’option correspondante de Paramètres –> Badr.

shuffle – Si la valeur true, le joueur va mélanger les pistes chaque fois que le visiteur recharge la page. Si la valeur false, l’ordre des pistes sera celui fourni avec le ids paramètre. Si laissé vide, le joueur utilisera la valeur par défaut shuffle réglage, Selon l’option correspondante de Paramètres –> Badr.

wave_color, wave_color_2 – Définit la couleur de début et de finale du dégradé vertical remplissant la forme d’onde. Si laissé vide, le joueur utilisera la valeur par défaut wave_color et wave_color_2 Paramètres, Selon l’option correspondante de Paramètres –> Badr. Pour une meilleure compréhension de l’onde en régime à colorier, Veuillez vous référer à la Section Options de forme d’onde de la Paramètres.

progress_color, progress_color_2 – Définit le début et fin de couleur du dégradé vertical remplissant la partie réalisée de l’onde. Si laissé vide, le joueur utilisera la valeur par défaut progress_color et progress_color_2 Paramètres, Selon l’option correspondante de Paramètres –> Badr. Pour une meilleure compréhension de l’onde en régime à colorier, Veuillez vous référer à la Section Options de forme d’onde de la Paramètres.

hover_opacity – Définit l’opacité de la superposition d’ondes lorsque l’utilisateur déplace le pointeur sur la vague. Définissez ce paramètre à 0 d’avoir une forme d’onde continue régulière. Si laissé vide, le joueur utilisera la valeur par défaut hover_opacity réglage, Selon l’option correspondante de Paramètres –> Badr.

cursor_color, cursor_color_2 – Définit les couleurs de début et de fin d’un gradient vertical pour le curseur de défilement sur la forme d’onde. Si laissé vide, le joueur utilisera la valeur par défaut cursor_color et cursor_color_2 Paramètres, Selon l’option correspondante de Paramètres –> Badr. Pour une meilleure compréhension de l’onde en régime à colorier, Veuillez vous référer à la Section Options de forme d’onde de la Paramètres.

cursor_width – Définit la largeur des barres affichant la forme d’onde. Définissez ce paramètre à 0 d’avoir une forme d’onde continue régulière. Si laissé vide, le joueur utilisera la valeur par défaut cursor_width réglage, Selon l’option correspondante de Paramètres –> Badr.

wave_mode – Définit le mode de visualisation de la vague. Si la valeur 0 (' Continue’ dans la page Paramètres), la forme d’onde s’affiche comme une forme d’onde continue régulière. D’autres réglages de 1 À 10 représente la largeur une les barres permet d’afficher la forme d’onde dans un mode histogramme. Si laissé vide, le joueur utilisera la valeur par défaut wave_mode réglage, Selon l’option correspondante de Paramètres –> Badr.

gap_width – If wave_mode est défini sur une valeur autre que 0 (« Continuous »), ce paramètre définit la largeur du fossé entre les barres représentant la forme d’onde. Si laissé vide, le joueur utilisera la valeur par défaut gap_width réglage, Selon l’option correspondante de Paramètres –> Badr.

wave_compression – Définit la compression de la vague. Cette option n’affecte pas le fichier audio, mais seulement le mode d’affichage d’obtient sa forme d’onde. Un niveau plus bas de compression montre une différence plus évidente entre la faible intensité et haute intensité dans la forme d’onde. À l'inverse, un niveau plus élevé de compression aplatit ces différences, montrant une vague plus uniforme. Si laissé vide, le joueur utilisera la valeur par défaut wave_compression réglage, Selon l’option correspondante de Paramètres –> Badr.

wave_asymmetry – Définit le rapport entre la hauteur de la moitié supérieure de la vague et la hauteur de la partie inférieure des ondes. Si laissé vide, le joueur utilisera la valeur par défaut wave_asymmetry réglage, Selon l’option correspondante de Paramètres –> Badr.

Paramètres

Paramètres de badr – Situé à la Paramètres –> Badr page de la zone de WordPress Admin – définir l’affichage d’un shortcode sans paramètre condition autre que les ID des pistes audio que vous voulez inclus dans cette instance particulière du joueur, comme la suivante:

Veuillez noter que changer le quelconque de ces paramètres affectent la façon dont chaque instance avec N’IMPORTE QUEL paramètre manquant s’affichera sur votre site Internet.

Options de lecteur par défaut

pour un guide visuel CLIQUEZ ICI

Dans le premier panneau de la Badr paramètres vous pouvez définir les options par défaut pour la size, style, shape, autoplay, repeat_all et shuffle paramètres. Chaque fois que vous insérez une instance de la Badr sans fournir aucun de ces paramètres, l’instance s’affiche selon ces paramètres.

Schéma de couleur et les options de forme d’onde par défaut

pour un guide visuel CLIQUEZ ICI

Dans le deuxième panneau des paramètres Badr, vous pouvez définir toutes les valeurs par défaut qui définissent comment la forme d’onde va être rendu. Chaque fois que vous insérez une instance de la Badr sans fournir aucun de ces paramètres dans le shortcode, l’instance s’affiche selon ces paramètres.

Grâce à ces options, vous pouvez avoir la forme d’onde correspondant parfaitement à votre thème WordPress actuel et grâce à l’aperçu en temps réel, vous pouvez voir le résultat de vos modifications sans même avoir à enregistrer les paramètres.

En outre, tous ces paramètres peuvent être ajoutés en tant que paramètres à chaque shortcode badr, personnalisation de chaque instance du lecteur, Quels que soient ces paramètres par défaut.

HTML & Personnalisation du CSS

pour un guide visuel CLIQUEZ ICI

Dans le dernier panneau, vous trouverez deux différents textareas.

La première d'entre, Modèle de barre d’informations, permet de personnaliser les informations affichées dans l’info bar quand une piste commence la lecture de. Vous pouvez utiliser à peu près chaque balise ID3 que sont enregistrés dans le fichier audio que vous avez téléchargé, vous le savez. Vous écrivez simplement modèle HTML dont chaque balise entouré d’un “%” caractère. Par exemple, Si vous souhaitez afficher le titre de la chanson suivie du nom de l’artiste, vous pouvez écrire le code HTML suivant dans le composant textarea:

%title% by %artist%

La deuxième zone de texte, Custom CSS, vous permet d’ajouter vos propres règles CSS de la feuille de style par défaut qui vient avec le plugin. Vous pouvez personnaliser les règles CSS par défaut ou créer votre propre ensemble de règles pour être ajouté dans le modèle de barre d’informations.

Entretien

pour un guide visuel CLIQUEZ ICI

Un pic est sauvegardé par badr dans le ‘pics‘ sous-dossier du plugin, chaque fois qu’une piste audio est chargée pour la première fois. Cela permet à badr restituer la forme d’onde de chaque fichier audio beaucoup plus vite les fois suivantes.

Si vous supprimez une piste audio qui était autrefois à badr, le fichier PIC reste inutilisé pour toujours dans le sous-dossier pic du plugin. Bien que les fichiers peak sont de très petites taille (habituellement environ 30 Ko), Il peut être un gaspillage de votre espace d’hébergement, s’il vous arrive de télécharger et supprimer les pièces jointes audio régulièrement. Il est recommandé de supprimer des fichiers orphelins pic en cliquant sur le Supprimer des fichiers orphelins peak bouton chaque fois que vous supprimez une quantité massive de pièces jointes audio de votre site Internet.

If, pour une raison quelconque, vous voulez s’assurer que badr régénère tous les fichiers de pointe, vous devez les supprimer à l’aide de la Supprimez tous les fichiers peak bouton.

Crédits

Badr utilise les projets suivants:

Wavesurfer.js – La capacité de conception de forme d’onde dans que vous trouver Badr est construit autour de Waveform.js, par katspaugh, optimisé pour une gestion plus efficace des capacités toile et étendu pour être intégré comme un plugin WordPress. Vous pouvez en apprendre davantage sur ce projet à la Page officielle de Wavesurfer.js ou à la Wavesurfer.js GitHub Ppage.

Wavesurfer.js est distribué sous licence un Creative Commons Attribution 3.0 Unported License.

Polices-Awesome – Boutons et icônes apparaissant dans Badr sont fournis par Police génial, une boîte à outils CSS basé sur une police emblématique. La police est distribuée sous une SIL OFL 1.1 Licence.

Le code CSS est distribué sous une Licence MIT.

Changelog

v1.0.18
* Première version

0 Fusées éclairantes Twitter 0 Facebook 0 Google 0 Broche il partager 0 LinkedIn 0 Messagerie -- 0 Fusées éclairantes ×

Laisser une réponse

Votre adresse email ne sera pas publié. Les champs obligatoires sont marqués *