Comment ajouter un widget lecteur de musique audio dans WordPress (2 méthodes)

Si vous êtes musicien, podcasteur ou que vous gérez un blog où le son joue un rôle important, vous avez probablement remarqué que l'audio par défaut de WordPress est assez limité.

Vous pouvez télécharger des fichiers, bien sûr. Mais créer cette expérience d'écoute soignée et transparente que vos visiteurs méritent ? C'est là que ça se complique.

Nous avons vu ce défi se présenter encore et encore en aidant au lancement de blogs musicaux et de sites de podcasts.

Heureusement, il existe des solutions simples qui fonctionnent. Après avoir recherché les meilleurs outils et plugins musicaux, nous avons trouvé 2 options simples : le bloc Audio et le plugin Lecteur Audio HTML5.

Dans ce guide, nous vous présenterons 2 méthodes pour ajouter un widget lecteur de musique audio dans WordPress. Ainsi, vous pourrez choisir celle qui correspond à vos besoins et avoir votre lecteur audio opérationnel en un rien de temps. 🎶

Pourquoi ajouter un widget lecteur de musique audio dans WordPress

Un widget lecteur audio permet à vos visiteurs d'écouter facilement votre contenu sans quitter votre site.

C'est particulièrement utile pour les musiciens, les podcasteurs et les créateurs de contenu qui souhaitent présenter leur travail de manière professionnelle et accessible. Au lieu d'envoyer les gens vers des plateformes externes, vous pouvez les garder engagés sur votre propre site Web, où vous avez plus de contrôle.

Un lecteur audio musical peut même vous aider à gagner plus d'argent en affichant des publicités sur votre site ou en vendant vos fichiers audio comme téléchargements numériques directement.

Et si vous ne créez pas d'audio original, intégrer des pistes de plateformes comme Spotify reste un moyen intelligent de rendre votre site plus dynamique et engageant.

Cela peut aider à garder les visiteurs plus longtemps sur votre site, ce qui améliore les métriques clés comme le temps passé sur le site.

Le meilleur de tout, c'est que les widgets audio ne servent pas qu'à la musique. 💡

Vous pouvez les utiliser pour intégrer des podcasts, des livres audio, des méditations guidées ou du contenu éducatif. Cela rend votre site plus polyvalent et attrayant pour les utilisateurs axés sur l'audio, y compris ceux ayant des déficiences visuelles.

Dans cet esprit, nous allons vous montrer comment ajouter un lecteur audio musical dans WordPress en utilisant 2 méthodes. Vous pouvez utiliser les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1. Comment ajouter un widget de lecteur audio musical à l'aide du bloc Audio (Facile)
• Méthode 2. Comment ajouter un widget lecteur de musique audio à l'aide d'un plugin (plus personnalisable)
• Astuce bonus : Rendez votre site plus amusant en utilisant des galeries d'images et de vidéos
• FAQ : Comment ajouter un widget lecteur audio dans WordPress
• Plus de guides sur l'utilisation de l'audio sur WordPress

Explorons comment apporter la puissance de la musique à votre site WordPress ! 🎧

Méthode 1. Comment ajouter un widget de lecteur audio musical à l'aide du bloc Audio (Facile)

Avec cette méthode, vous pouvez créer un lecteur audio simple en utilisant le bloc Audio intégré de WordPress. Ce bloc peut lire tous les formats de fichiers audio, y compris les fichiers .mp3, .m4a, .ogg ou .wav.

Le lecteur audio intégré de WordPress est très simple par rapport à la plupart des plugins. Il dispose d'un bouton lecture/pause, de commandes de volume, d'un bouton de téléchargement et d'un bouton pour changer la vitesse de lecture.

C'est un bon choix si vous souhaitez ajouter quelques courts clips audio à votre site sans avoir besoin de fonctionnalités avancées.

Si vous intégrez du contenu provenant d'une plateforme tierce prise en charge telle que Spotify ou SoundCloud, le bloc Audio affichera les commandes de lecture de cette plateforme. Il peut également afficher du contenu supplémentaire de la plateforme, tel que le nom de l'artiste et l'image de couverture.

Par exemple, voici un bloc Audio avec du contenu SoundCloud intégré.

Pour ajouter un simple lecteur de musique audio à votre site WordPress, vous pouvez ouvrir n'importe quelle page ou publication et cliquer sur l'icône ‘+’.

Dans la fenêtre contextuelle qui apparaît, tapez ‘Audio’ dans la barre de recherche pour trouver le bon bloc. Vous pouvez ensuite cliquer sur le bloc Audio pour l'ajouter à votre page.

À ce stade, vous pouvez soit ajouter un fichier audio, soit intégrer un clip audio d'une autre plateforme.

Pour ajouter un fichier audio depuis votre ordinateur, cliquez sur ‘Télécharger’ puis choisissez le fichier sur le disque local de votre ordinateur.

Une autre option est de cliquer sur le bouton ‘Médiathèque’ puis de choisir un fichier existant dans votre médiathèque WordPress.

Si vous téléversez l'audio complet, vous voudrez peut-être donner aux visiteurs la possibilité de soutenir votre travail en tant que musicien ou podcasteur en vous envoyant un don. Pour un guide étape par étape, vous pouvez consulter notre guide sur comment ajouter un bouton de don Stripe dans WordPress.

Voulez-vous plutôt intégrer de l'audio d'une autre plateforme ?

Cela fonctionne comme l'ajout de vidéos à WordPress. Il vous suffit de coller le lien YouTube, et WordPress affichera automatiquement le lecteur sur votre page.

Sachez simplement que la plupart des plateformes n'intègrent qu'un aperçu du fichier audio complet. Le bloc peut même encourager les utilisateurs à quitter votre site Web et à visiter la plateforme tierce afin d'écouter l'audio complet.

Dans l'image suivante, le bloc Audio dirige les visiteurs vers le site Web de Spotify.

Si vous êtes musicien, cela pourrait augmenter vos redevances en encourageant les visiteurs à écouter votre contenu sur d'autres plateformes. Cependant, cela peut aussi éloigner les utilisateurs de votre site Web vers d'autres plateformes.

Pour intégrer de l'audio à partir d'une plateforme tierce, vous pouvez commencer par cliquer sur le bouton « Insérer depuis l'URL ». Cela ouvrira une petite barre « Coller ou taper l'URL ».

Vous pouvez maintenant entrer l'URL du clip audio que vous souhaitez intégrer sur votre blog WordPress.

Généralement, il vous suffit de visiter la chanson ou l'audio que vous souhaitez intégrer, puis d'ouvrir ses paramètres « Partager ».

Après cela, vous pouvez copier l'URL fournie.

Par exemple, voyons comment vous pouvez intégrer n'importe quelle chanson Spotify sur votre site.

Pour commencer, trouvez la chanson ou la playlist que vous souhaitez ajouter à votre site Web WordPress. Ensuite, cliquez simplement sur les trois points que Spotify affiche à côté de la playlist ou de la chanson.

Une fois que vous avez fait cela, cliquez sur Partager » Copier la chanson.

Pour ajouter l'audio au widget du lecteur de musique, collez le lien dans le bloc Audio.

Dans notre exemple Spotify, WordPress transformera le bloc Audio en bloc Spotify.

Ce changement se produit automatiquement, vous n'avez donc pas à vous en soucier.

Après avoir ajouté un fichier audio, vous pouvez cliquer sur le bloc Audio pour voir les paramètres que vous pouvez configurer pour ce bloc.

Les paramètres que vous voyez peuvent varier selon que vous avez téléchargé un fichier audio ou intégré un aperçu d'un site tiers.

Par exemple, vous pouvez souvent régler l'audio pour qu'il se lance automatiquement en cliquant sur le bouton 'Autoplay'.

La plupart de ces paramètres s'expliquent d'eux-mêmes, il est donc conseillé de les explorer pour voir ce qui convient le mieux à votre site.

Vous pouvez mettre à jour ou publier la page lorsque vous êtes satisfait de la configuration du bloc.

Maintenant, si vous visitez la page sur votre site, vous verrez le lecteur de musique audio en direct. Vous pouvez également écouter l'audio en utilisant les boutons de contrôle de lecture du bloc.

Méthode 2. Comment ajouter un widget lecteur de musique audio à l'aide d'un plugin (plus personnalisable)

Le bloc audio WordPress est un outil simple pour ajouter des lecteurs audio. Il est facile à utiliser, mais il n'offre pas beaucoup d'options pour changer son apparence ou son fonctionnement.

De plus, vous ne pouvez pas créer un seul lecteur et l'utiliser dans différentes parties de votre site. Vous devrez ajouter un nouveau lecteur chaque fois que vous souhaitez en utiliser un.

Si vous souhaitez des fonctionnalités plus avancées et des lecteurs audio réutilisables, nous vous recommandons le plugin HTML5 Audio Player.

Similaire au bloc audio de WordPress, ce plugin peut lire divers formats de fichiers audio, comme un fichier .mp3, .wav ou .ogg. Mais il offre plus d'options de personnalisation.

Maintenant, bien que le plugin ne puisse lire qu'un seul fichier audio par lecteur, vous pouvez créer autant de lecteurs audio que vous le souhaitez. De cette façon, vous pouvez toujours lire de nombreuses pistes différentes sur votre site WordPress. Vous pouvez même ajouter plusieurs lecteurs audio sur la même page.

Pour commencer, vous devrez installer et activer le plugin. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, vous êtes prêt à créer votre premier lecteur audio en allant dans HTML5 Audio Player » HTML5 Audio Player.

Ici, cliquez sur le bouton « Ajouter un lecteur audio ».

L'étape suivante consiste à taper un nom pour le lecteur audio dans le champ qui affiche « Ajouter un titre ».

Ceci est juste pour votre référence, vous pouvez donc utiliser le titre que vous voulez.

Une fois que vous avez fait cela, vous voudrez faire défiler jusqu'à la section « Configuration du lecteur ».

Dans cette zone, vous pouvez ajouter un fichier audio au lecteur en cliquant sur le bouton « Ajouter un audio ».

Vous pouvez maintenant sélectionner n'importe quel fichier audio dans la médiathèque ou télécharger un fichier depuis votre ordinateur.

Après avoir choisi un fichier, vous êtes prêt à personnaliser le lecteur audio. Par défaut, le visiteur n'a qu'à cliquer sur le bouton « Lecture », et l'audio commencera à jouer avec le volume augmenté.

C'est ainsi que la plupart des visiteurs s'attendent à ce qu'un lecteur audio fonctionne, vous voudrez donc généralement utiliser ces paramètres par défaut. Cependant, il existe également des options pour couper le son par défaut, la lecture automatique, la répétition, et plus encore. N'hésitez donc pas à explorer ces paramètres.

Une fois que vous êtes satisfait de la configuration du lecteur, faites simplement défiler jusqu'en haut de l'écran et cliquez sur le bouton « Enregistrer ».

Ensuite, vous pouvez ajouter le lecteur audio à votre site en utilisant un shortcode ou le bloc Lecteur Audio HTML5.

Le bloc est la méthode la plus simple. Cependant, si vous souhaitez placer le lecteur à l'aide d'un shortcode, vous trouverez le code en haut de l'écran.

Pour plus de détails sur la façon de placer le shortcode, vous pouvez consulter notre guide sur comment ajouter un shortcode dans WordPress.

Pour ajouter le lecteur audio à l'aide d'un bloc, vous devrez ouvrir n'importe quelle page ou article et cliquer sur le bouton « + ».

Dans la fenêtre contextuelle qui apparaît, tapez simplement « HTML5 Audio Player » pour trouver le bon bloc. Une fois que vous cliquez sur le bloc « HTML5 Audio Player – Insérer », il ajoutera le bloc à votre page.

Ensuite, vous pouvez ouvrir le menu déroulant « Sélectionner un lecteur » pour voir la liste de tous les lecteurs audio que vous avez créés.

Vous pouvez maintenant cliquer sur un lecteur audio pour l'ajouter à la page ou à l'article.

Vous pourriez alors remarquer que l'éditeur de page WordPress n'affiche pas le lecteur audio.

Cependant, si vous cliquez sur le bouton « Aperçu », vous pourrez voir à quoi ressemblera le lecteur pour les visiteurs de votre site Web. Dans ce mode, vous pouvez même écouter l'audio et tester vous-même les différents boutons de lecture.

Lorsque vous êtes satisfait de l'apparence et du fonctionnement du lecteur audio, vous pouvez mettre à jour ou publier la page.

Maintenant, si vous visitez cette page sur votre site WordPress, vous verrez le lecteur audio en direct.

Voulez-vous ajouter d'autres pistes audio à votre site ? Ensuite, vous pouvez simplement suivre le processus décrit ci-dessus pour créer d'autres lecteurs audio et les ajouter à votre site.

Astuce bonus : Rendez votre site plus amusant en utilisant des galeries d'images et de vidéos

Vous voulez rendre votre site plus amusant et engageant ? Envisagez d'ajouter des galeries d'images et de vidéos pour accompagner votre widget de lecteur de musique audio.

En créant une galerie, vous pouvez présenter vos photos dans une disposition soignée en grille, économisant de l'espace et rendant votre site beaucoup plus professionnel. Les miniatures permettent aux visiteurs de prévisualiser les images, et ils peuvent cliquer pour les voir en entier.

Par exemple, si vous êtes photographe, une galerie bien organisée peut présenter votre travail d'une manière élégante et visuellement époustouflante.

Désormais, l'ajout d'images à vos articles WordPress est assez simple avec le bloc Image. Mais les choses peuvent devenir un peu compliquées lorsque vous ajoutez plusieurs images. Elles s'empileront les unes après les autres, obligeant les utilisateurs à faire beaucoup de défilement.

Ce n'est certainement pas la configuration la plus attrayante visuellement. 😬

Essayez plutôt d'utiliser le bloc Galerie dans l'éditeur Gutenberg. C'est un moyen facile d'afficher plusieurs images de manière plus propre. Et si vous souhaitez encore plus de fonctionnalités, il existe de nombreux plugins de galerie qui peuvent améliorer l'affichage de vos images, comme Envira Gallery.

Pour des instructions détaillées, consultez notre guide sur la création d'une galerie d'images dans WordPress.

De plus, bien que les images soient excellentes, les vidéos peuvent l'être encore plus. Un carrousel vidéo peut présenter tout, des démonstrations de produits et des critiques aux témoignages de clients, le tout dans un espace dynamique.

Par exemple, un site immobilier pourrait présenter des visites virtuelles de propriétés. Pendant ce temps, un site de voyage pourrait mettre en avant des destinations et des expériences pour séduire les visiteurs.

Avec un curseur vidéo, vous pouvez utiliser du contenu attrayant pour présenter vos meilleures fonctionnalités, qu'il s'agisse de témoignages, d'études de cas ou de points forts de produits. Le meilleur dans tout ça ? Soliloquy peut vous aider à en créer un facilement.

Pour en savoir plus, consultez notre guide sur comment créer un curseur vidéo dans WordPress.

En bref, qu'il s'agisse d'une galerie d'albums, d'une vitrine de produits ou de tutoriels vidéo, les galeries interactives peuvent améliorer l'attrait général de votre site et améliorer l'expérience de l'utilisateur.

FAQ : Comment ajouter un widget lecteur audio dans WordPress

Nous avons reçu de nombreuses questions concernant l'ajout d'audio dans WordPress. Voici les réponses à certaines des plus courantes.

Quel est le meilleur format de fichier audio pour WordPress ?

Pour le meilleur équilibre entre qualité sonore et taille de fichier, nous recommandons d'utiliser le format MP3. Il est largement pris en charge par tous les navigateurs et appareils modernes. Ainsi, vos visiteurs pourront profiter d'une expérience d'écoute fluide, quel que soit leur mode d'accès à votre site.

Puis-je créer une playlist avec plusieurs chansons ?

Oui, vous le pouvez. Bien que le bloc audio par défaut de WordPress soit conçu pour des pistes uniques, de nombreux plugins vous permettent de créer des playlists complètes. Certains plugins se connectent même à des services comme Spotify ou SoundCloud pour afficher des albums entiers sur votre site.

Comment puis-je ajouter un lecteur audio à la barre latérale de mon WordPress ?

Vous pouvez ajouter un lecteur audio à votre barre latérale ou à votre pied de page en utilisant les widgets WordPress.

Naviguez simplement vers Apparence » Widgets dans votre tableau de bord. De là, vous pouvez ajouter le bloc Audio ou un bloc de votre plugin choisi à n'importe quelle zone de votre thème prête pour les widgets.

Plus de guides sur l'utilisation de l'audio sur WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter un widget lecteur audio dans WordPress. Si vous avez trouvé cela utile, vous pourriez également vouloir lire nos autres guides sur :

• Comment ajouter des fichiers audio MP3 dans WordPress
• Comment vendre de la musique en ligne sur WordPress
• Comment lancer un podcast et le rendre prospère
• Meilleurs plugins de lecteur audio pour WordPress
• Meilleurs plugins WordPress pour les podcasteurs

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.