ElementsKit est un module complémentaire Elementor complet qui comprend presque tous les types de fonctionnalités pour les sites Web WordPress, notamment le widget Elementor Audio Player.

À l'aide du widget Lecteur audio, vous pouvez intégrer de la musique sur votre site Web avec un contrôle de lecteur audio convivial. Le widget comprend quelques options pour télécharger de l'audio, de nombreuses options audio et de contrôle, et bien plus encore.

Caractéristiques du widget de lecteur audio : #

• Téléchargez de l'audio via la médiathèque WordPress.
• Intégrez l'audio à l'aide de l'URL.
• Options audio, notamment la lecture automatique, la boucle et la sourdine.
• Contrôle de lecture et de pause.
• Contrôle du volume.
• Contrôle de la barre de progression.
• Afficher la durée de lecture et la durée totale.
• Personnalisez l'apparence du lecteur audio.

Étape 1 : Activer le widget du lecteur audio #

Tout d’abord, vous devez activer le widget depuis le tableau de bord WordPress. Pour activer le widget Lecteur audio :

1. Aller vers ElementsKit > Widgets.
2. Trouvez le Lecteur audio dans la liste et activez le widget.
3. Clique sur le SAUVEGARDER LES MODIFICATIONS.

Étape 2 : glissez et déposez le widget #

Après cela, faites glisser et déposez le widget ElementsKit Audio Player dans l'éditeur Elementor.

Étape 3 : Configurer le widget du lecteur audio Elementor #

Sous l'onglet Contenu, vous pouvez télécharger l'audio et configurez le Options audio et Options de contrôle du lecteur audio. Vous pouvez utiliser les options suivantes pour configurer le lecteur audio WordPress dans Elementor.

3.1 Origine #

Vous pouvez soit télécharger le fichier audio, soit utiliser une URL pour ajouter de l'audio au lecteur. Deux options sont disponibles pour la source audio.

Source – Auto-hébergé : #

Lorsque vous choisissez Auto-hébergé comme source audio, vous pouvez télécharger un fichier audio depuis votre bibliothèque multimédia WordPress.

Choisir « Auto-hébergé » comme source > Cliquez sur le bouton de téléchargement > ajouter un fichier audio de la médiathèque.

Source – Externe : #

En choisissant la source externe, vous pouvez intégrer l'audio d'Internet avec son URL.

Choisir « Externe » comme source > entrez l'URL audio dans le champ requis.

3.2 Options audio #

Voici les options audio disponibles avec le widget Audio Player :

1. Lecture automatique: Activez la lecture automatique, afin que l'audio soit automatiquement lu lors du chargement de la page.
2. Boucle: Activez cette option pour lire l'audio en boucle.
3. Muet: Lorsqu'il est activé, le son est initialement coupé au démarrage du lecteur. Les utilisateurs doivent réactiver le son manuellement.

3.3 Options de contrôle #

Voici les options de contrôle disponibles avec le widget Audio Player :

1. Jouer pause: Active le contrôle lecture/pause (bouton) pour les utilisateurs.
2. Barre de progression: Pour afficher la barre de progression audio sur le lecteur.
3. Heure actuelle: Cela indique la durée de lecture actuelle sur le lecteur audio Elementor.
4. Durée totale: Cela montre la durée totale de l'audio.
5. Barre de volume : Pour afficher et contrôler le niveau de volume audio.
6. Masquer le volume sur les appareils tactiles :
7. Disposition du curseur de volume : Deux dispositions sont disponibles pour la barre de volume : horizontale et verticale.
8. Volume de démarrage : Réglez le niveau de volume initial au démarrage du lecteur.

Étape 4 : Personnaliser les styles du lecteur audio Elementor #

Vous pouvez personnaliser le bouton Lecture Pause, la barre de progression, l'heure et les styles de volume sur le widget Elementor Audio Player.

4.1 Bouton Pause de lecture #

Pour personnaliser le bouton Lecture Pause,

1. Ajuste le Taille du bouton.
2. Choisissez le bouton Couleur, Couleur de l'arrière plan, Boîte ombre, et Type de bordure pour le bouton.
3. Met le Rayon de frontière, Rembourrage, et Marge.

4.2 Barre de progression #

Pour personnaliser la barre de progression,

1. Vous pouvez ajuster le Hauteur de la barre de progression.
2. Choisir la Couleur de l'arrière plan de la barre de progression.
3. Met le Type de bordure, Largeur de la bordure, et Couleur de la bordure.
4. Ajuste le Rayon de frontière de la barre de progression.

5. Barre de progression chargée : Vous pouvez choisir la couleur d'arrière-plan de la barre de progression chargée.
6. Barre de progression actuelle : Définissez la couleur d'arrière-plan et le rayon de bordure pour la barre de progression actuelle.
7. Survol temporel : Sélectionnez la couleur d’arrière-plan pour le survol temporel.

4.3 Temps #

Pour personnaliser les styles temporels du lecteur audio Elementor,

1. Met le Typographie pour les chiffres du texte.
2. Choisissez une couleur et ajustez la marge pour le Heure actuelle.
3. Choisissez une couleur et ajustez la marge pour le Durée.

4.4 Volumes #

Pour personnaliser les styles des boutons de volume,

1. Vous pouvez ajuster le Hauteur du bouton de volume.
2. Choisir la Couleur de l'arrière plan du bouton de volume.
3. Met le Type de bordure, Largeur de la bordure, et Couleur de la bordure.

4. Barre de volume : Ajustez la hauteur, la largeur, la couleur et les styles de bordure de la barre de volume.
5. Barre de volume actuelle : Définissez la couleur et le rayon de bordure de la barre de volume actuelle.

Enfin, vous pouvez utiliser le lecteur audio de votre site Web avec toutes les fonctionnalités utiles. Le widget Elementor Audio Player est livré avec ElementKits Pro. Obtenez le plugin pour ajouter de l'audio et de la musique à votre site WordPress de la manière la plus simple.