Intégrez un lecteur MP3 dans votre article de blog avec WordPress
Durée de lecture: 3 minutes
Avec le podcasting et le partage de musique si répandus en ligne, il existe une excellente occasion d'améliorer l'expérience de vos visiteurs sur votre site en intégrant de l'audio dans vos articles de blog. Heureusement, WordPress continue de faire évoluer son support pour l'intégration d'autres types de médias – et les fichiers mp3 sont l'un de ceux qui sont faciles à faire! un fichier audio peut ne pas être recommandé. La plupart des hébergeurs Web pour les sites WordPress ne sont pas optimisés pour la diffusion multimédia en continu – ne soyez donc pas surpris si vous commencez à rencontrer des problèmes où vous atteignez les limites d'utilisation de la bande passante ou vos blocages audio. Je vous recommande d'héberger le fichier audio réel sur un service de streaming audio ou un moteur d'hébergement de podcast. Et… assurez-vous que votre hôte prend en charge SSL (un chemin https: //)… un blog hébergé en toute sécurité ne lira pas un fichier audio qui n'est pas hébergé en toute sécurité ailleurs.
Cela dit, si vous connaissez l'emplacement de votre fichier , l'intégrer dans un article de blog est assez simple. WordPress a son propre lecteur audio HTML5 intégré directement dans celui-ci afin que vous puissiez utiliser un shortcode pour afficher le lecteur.
Voici un exemple d'un récent épisode de podcast que j'ai réalisé:
Avec la dernière itération de l'éditeur Gutenberg dans WordPress, je viens de coller le chemin du fichier audio et l'éditeur a en fait créé le shortcode. Le shortcode réel suit, où vous remplaceriez le src par l'URL complète du fichier que vous voulez lire.
WordPress prend en charge les types de fichiers mp3, m4a, ogg, wav et wma. Vous pouvez même avoir un shortcode qui fournit une solution de secours si vous avez des visiteurs utilisant des navigateurs qui ne prennent pas en charge l'un ou l'autre:
Vous pouvez également améliorer le shortcode avec d'autres options:
loop – une option pour boucle l'audio.
autoplay – une option pour lire automatiquement le fichier dès qu'il se charge.
preload – une option pour précharger le fichier audio avec la page.
Mettez tout cela ensemble et voici ce que vous obtenez :
Listes de lecture audio dans WordPress
Si vous souhaitez avoir une liste de lecture, WordPress ne prend actuellement pas en charge l'hébergement externe de chacun de vos fichiers à lire, mais ils le proposent si vous hébergez vos fichiers audio en interne:
Il existe des solutions que vous pouvez ajouter à votre thème enfant qui permettront le chargement de fichiers audio externes.
Ajouter le flux RSS de votre podcast à votre barre latérale
En utilisant le lecteur WordPress, J'ai écrit un plugin pour afficher votre podcast automatiquement dans une barre latérale wi dget. Vous pouvez lire à ce sujet ici et télécharger le plugin depuis le dépôt WordPress.
Personnalisation du lecteur audio WordPress
Comme vous pouvez le voir sur mon propre site, le MP3 player est assez basique dans WordPress. Cependant, comme il s'agit de HTML5, vous pouvez l'habiller un peu en utilisant CSS. CSSIgniter a écrit un excellent tutoriel sur la personnalisation du lecteur audio donc je ne vais pas tout répéter ici… mais voici les options que vous pouvez personnaliser:
/ * Arrière-plan du lecteur * /
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
couleur d'arrière-plan: #efefef;
}
/ * Commandes du lecteur * /
.mytheme-mejs-container .mejs-button> bouton {
image de fond: url ("images / mejs-controls-dark.svg");
}
.mytheme-mejs-container .mejs-time {
couleur: # 888888;
}
/ * Progression et barres audio * /
/ * Progression et arrière-plan de la barre audio * /
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
couleur de fond: #fff;
}
/ * Arrière-plan de la barre de progression de la piste (quantité de piste entièrement chargée)
Nous préférons les coiffer avec la couleur d'accent principale de notre thème * /
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-shared {
couleur d'arrière-plan: rgba (219, 78, 136, 0,075);
}
/ * Progression de la piste actuelle et barre de niveau de volume audio actif * /
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
arrière-plan: # db4e88;
}
/ * Réduit la hauteur de la progression et des barres audio * /
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-shared,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
hauteur: 3px;
}
.mytheme-mejs-container .mejs-time-handle-content {
haut: -6px;
}
.mytheme-mejs-container .mejs-time-total {
margin-top: 8px;
}
.mytheme-mejs-container .mejs-horizontal-volume-total {
haut: 19px;
}
Améliorez votre lecteur MP3 WordPress
Il existe également des plugins payants pour afficher votre audio MP3 dans des lecteurs audio absolument époustouflants:
Divulgation: J'utilise mes liens d'affiliation pour les plugins ci-dessus via Codecanyon un site de plugins fantastique qui a des plugins bien pris en charge et un service et une assistance exceptionnels.
