WordPress: intégrez un lecteur MP3 dans votre article de blog

Blog Post Lecteur MP3 avec WordPress

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 mp3 les fichiers sont parmi ceux qui sont faciles à faire!

Bien que l'affichage d'un lecteur pour une interview récente soit génial, l'hébergement du fichier audio réel peut ne pas être conseillé. La plupart des hébergeurs Web pour les sites WordPress ne sont pas optimisés pour le streaming multimédia - 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 recommanderais 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.

[audio src="audio-source.mp3"]

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:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

Vous pouvez également améliorer le shortcode avec d'autres options:

  • loop - une option pour boucler 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:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]

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:

[playlist ids="123,456,789"]

Il y a quelques solutions là-bas que vous pouvez ajouter à votre thème enfant qui permettra le chargement de fichiers audio externes.

Ajoutez le flux RSS de votre podcast à votre barre latérale

En utilisant le player WordPress, j'ai écrit un plugin pour afficher automatiquement votre podcast dans un widget de la barre latérale. Vous pouvez Lisez à ce sujet ici et d' télécharger le plugin à partir du référentiel WordPress.

Personnalisation du lecteur audio WordPress

Comme vous pouvez le voir sur mon propre site, le lecteur MP3 est assez basique dans WordPress. Cependant, comme c'est du HTML5, vous pouvez l'habiller un peu en utilisant CSS. CSSIgniter a écrit un excellent tutoriel sur personnalisation du lecteur audio donc je ne vais pas tout répéter ici ... mais voici les options que vous pouvez personnaliser:

/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
  background-color: #efefef;
}

/* Player controls */
.mytheme-mejs-container .mejs-button > button {
  background-image: url("images/mejs-controls-dark.svg");
}

.mytheme-mejs-container .mejs-time {
  color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
  background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #db4e88;
}

/* Reduce height of the progress and audio bars */
.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-loaded,
.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 {
  height: 3px;
}

.mytheme-mejs-container .mejs-time-handle-content {
  top: -6px;
}

.mytheme-mejs-container .mejs-time-total {
  margin-top: 8px;
}

.mytheme-mejs-container .mejs-horizontal-volume-total {
  top: 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.

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..