TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter un lecteur audio dans un site WordPress sans plugin ?

49

Les médias sont très importants pour attirer les utilisateurs et les fidéliser sur votre site Web. Vous pouvez facilement intégrer YouTube et d’autres vidéos sur votre WordPress. De même, si vous souhaitez intégrer un audio sur votre site, voici comment procéder. WordPress dispose d’un lecteur audio HTML5 intégré pour présenter vos fichiers audio de manière simple. Vous pouvez soit créer un lecteur avec un seul audio, soit avec plusieurs fichiers audio en tant que liste de lecture. Dans cet article, nous expliquerons comment ajouter un lecteur audio sur le site WordPress en utilisant le shortcode audio par défaut.



Ajouter de l’audio dans WordPress sans plugin

WordPress a un shortcode audio intégré pour insérer un lecteur audio HTML5 dans vos publications, pages et widgets. Il prend en charge tous les types de fichiers pris en charge par HTML5, tels que .mp3, .egg et .wav.

Insertion d’un seul fichier audio

Semblable à toutes les autres images et vidéos, téléchargez votre fichier audio via le bouton "Ajouter un média" dans l’éditeur de publication WordPress. Une fois le fichier téléchargé, entrez les détails de la piste sur l’écran multimédia. WordPress vous permet d’ajouter des détails de piste comme le titre de votre audio, le nom de l’artiste, le nom de l’album, la légende et la description de votre fichier audio comme indiqué ci-dessous.

Comment ajouter un lecteur audio dans un site WordPress sans plugin ?

Ajout des détails de la piste du fichier audio dans WordPress

Bien que le lecteur audio à fichier unique n’utilise pas ces détails à l’écran, ces détails sont affichés dans la liste de lecture. Faites défiler jusqu’à la fin du volet et vérifiez que vous avez sélectionné l’option « Intégrer le lecteur multimédia ». Il doit être sélectionné dans la liste déroulante contre « Intégrer ou lier » dans la section « Paramètres d’affichage des pièces jointes ».

Comment ajouter un lecteur audio dans un site WordPress sans plugin ?

Choisissez l’option d’intégration du lecteur multimédia

Il s’agit d’un paramètre important qui permet à WordPress d’insérer un lecteur audio au lieu de créer un lien vers le fichier multimédia ou la page de pièce jointe. Cliquez sur le bouton « Insérer dans la publication » pour ajouter le fichier dans votre publication WordPress. WordPress ajoutera automatiquement un lecteur audio HTML5.

Vous trouverez ci-dessous un exemple de lecteur audio HTML5 par défaut inséré à l’aide d’un shortcode audio.

Le lecteur audio a des commandes minimales avec des boutons de lecture/pause, une barre de progression indiquant la durée, un contrôle du volume et une barre de volume. Le lecteur audio par défaut est réactif et occupe la largeur disponible en fonction de la largeur du navigateur. Et l’article publié aura le même lecteur audio que celui que vous voyez dans l’éditeur de publication.

Personnalisation du shortcode audio

Cliquez maintenant sur l’onglet "Texte" dans l’éditeur pour voir que le fichier audio utilise essentiellement un shortcode pour s’afficher en tant que lecteur.

[if lt IE 9]><script>document.createElement('audio');</script><![endif]

Bien que le shortcode comporte à la fois des balises d’ouverture et de fermeture, la balise audio de fermeture n’est pas obligatoire. Vous pouvez également ajouter les fichiers audio de secours en utilisant le shortcode ci-dessous. Dans ce cas, s’il y a un problème lors de la lecture du fichier .mp3, WordPress choisira l’option de secours .ogg puis .wav.

Audio Player

Les options de bouclage et de lecture automatique peuvent être ajoutées comme ci-dessous :

Audio Player

Assurez-vous d’activer l’option de lecture automatique uniquement si nécessaire afin de fournir une bonne expérience utilisateur.

Insertion d’une liste de lecture

Cliquez sur le bouton "Ajouter un média" dans votre éditeur de publication, puis cliquez sur l’option "Créer une liste de lecture audio". Téléchargez ou sélectionnez les fichiers audio requis à afficher dans la liste de lecture et cliquez sur le bouton « Créer une nouvelle liste de lecture ».

Comment ajouter un lecteur audio dans un site WordPress sans plugin ?

Créer une liste de lecture audio dans WordPress

Vous serez redirigé vers l’écran de modification de la liste de lecture comme indiqué ci-dessous. Faites glisser et déposez les fichiers pour réorganiser la séquence de lecture et modifier les légendes si nécessaire.

Comment ajouter un lecteur audio dans un site WordPress sans plugin ?

Modification de la liste de lecture audio dans WordPress

Sous le volet « Paramètres de la liste de lecture » ​​sur le côté droit, activez ou désactivez la liste des pistes, le nom de l’artiste et les images en vedette à afficher ou non dans le lecteur audio.

Enfin, cliquez sur « Insérer une liste de lecture audio » et vous verrez le lecteur audio avec la liste de lecture comme ci-dessous :

Comment ajouter un lecteur audio dans un site WordPress sans plugin ?

Lecteur audio avec liste de lecture dans WordPress

Remarque : afin d’ajouter une image en vedette pour les fichiers audio, accédez au menu « Média > Bibliothèque ». Modifiez les fichiers audio que vous avez téléchargés et ajoutez une image en vedette à chaque fichier audio.


Articles Liés:


Personnalisation du shortcode de la liste de lecture

Lorsque vous passez à l’onglet « Texte », vous constaterez à nouveau que WordPress utilise un code court pour insérer une liste de lecture comme ci-dessous :

[playlist ids="xxx,xxx,xxx"]

Vous pouvez ajouter les paramètres suivants pour personnaliser la playlist :

Paramètre Valeur par défaut Autres valeurs possibles La description
taper l’audio vidéo Changez le lecteur audio en lecteur vidéo (vous devez avoir téléchargé les vidéos requises).
ordre ASC DESC Ordre croissant ou décroissant
identifiants ID des pièces jointes Séparé par une virgule
exclure vide Saisir les identifiants des pièces jointes Les identifiants saisis seront exclus de la liste de lecture
liste des pistes vrai faux Afficher ou masquer la liste de lecture
numéros de piste vrai faux Afficher ou masquer les numéros de piste dans la liste de lecture
images vrai faux Afficher ou masquer l’image en vedette dans le lecteur
artistes vrai faux Afficher ou masquer le nom de l’artiste dans la liste de lecture
style léger foncé Appliquer une peau claire ou foncée

Par exemple, vous pouvez remplacer le lecteur de style clair par défaut par un style sombre et désactiver les numéros de piste dans la liste en utilisant le shortcode suivant :

[playlist ids="xxx,xxx,xxx" style="dark" tracknumbers="false"]

Insérer un lecteur audio dans la barre latérale et le pied de page

Le but de l’utilisation du shortcode est très simple – il peut être inséré dans n’importe quelle zone de votre site, comme la barre latérale et le pied de page. Sous « Apparence > Widgets », faites glisser et déposez le widget « Texte » sur la barre latérale ou la zone de pied de page où vous souhaitez ajouter le lecteur.

Comment ajouter un lecteur audio dans un site WordPress sans plugin ?

Ajouter un lecteur audio dans la zone des widgets

Insérez les shortcodes audio ou playlist avec votre personnalisation comme expliqué ci-dessus. Enregistrez votre widget et le lecteur sera affiché sur la zone de widget sélectionnée.

Derniers mots

Bien que l’intégration audio intégrée soit une bonne option, elle est simple et peut ne pas fonctionner lorsque vous avez besoin d’une configuration complète du lecteur audio. Les autres options consistent à utiliser un plug-in de lecteur audio ou à intégrer un lecteur audio à partir de sites Web tiers tels que SoundCloud.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails