Comment utiliser le bloc audio WordPress

Le bloc audio WordPress vous permet de fournir des fichiers audio lisibles dans vos pages et vos publications. Les fichiers audio peuvent être ajoutés à partir de votre médiathèque ou d'une URL. Les utilisateurs peuvent lire l'audio à partir de leurs navigateurs ou les télécharger pour les écouter hors ligne. C'est un excellent moyen de fournir de la musique, des podcasts ou d'autres types de fichiers audio à vos visiteurs à entendre et à utiliser.

Dans cet article, nous examinerons le bloc audio et verrons comment il fonctionne. Nous verrons également comment l'ajouter à vos articles et pages, voir des conseils et des bonnes pratiques pour l'utiliser et examiner les questions fréquemment posées.

Comment ajouter le bloc audio à votre publication ou page

Pour ajouter un bloc audio, cliquez sur le bloc d'insertion à l'emplacement où vous souhaitez placer le bloc ou sélectionnez-le dans le coin supérieur gauche. Recherchez Audio et cliquez dessus.

Alternativement, vous pouvez taper /audio et appuyer sur Entrée où vous souhaitez placer le bloc.

Le bloc audio sera ajouté à votre contenu où vous pourrez ajouter un fichier audio à lire ou à télécharger. Cliquez pour télécharger le fichier audio, choisissez-le dans votre bibliothèque ou entrez une URL pour le fichier.

Votre fichier audio sera affiché comme un lecteur audio avec une légende où vous pouvez entrer le nom ou d'autres informations sur le fichier. Il comprend les options de base du lecteur audio.

Le survol de l'icône de volume ouvre le curseur où l'utilisateur peut modifier le niveau de volume.

Sur la droite se trouvent trois points qui ouvrent des options pour l'utilisateur. Cela a un lien de téléchargement.

Paramètres et options de blocage audio

Le bloc audio comprend des paramètres et des options dans le bloc lui-même et dans la barre latérale droite. Regardons les deux.

Barre d'outils Bloc audio

La barre d'outils Bloc audio est placée au-dessus du bloc. Il apparaît lorsque vous sélectionnez le bloc et comprend moins d'outils que la plupart des blocs WordPress.

Modifier le type ou le style de bloc

Transformez le bloc en colonnes, un bloc de fichiers pour permettre aux utilisateurs de télécharger l'audio sous forme de fichier ou un groupe pouvant être stylisé. Je survole File dans cet exemple. Il fournit un aperçu de l'apparence du fichier en tant que bloc de fichiers.

Glisser et déplacer

L'outil Glisser, l'icône avec 6 points, vous permet de faire glisser le bloc où vous voulez. L'outil Déplacer, les flèches haut et bas, déplace le bloc vers le haut ou vers le bas d'un espace de contenu chaque fois que vous cliquez sur une flèche. Les deux offrent un moyen facile de déplacer le bloc dans votre zone de contenu.

Modifier l'alignement

Les options d'alignement déterminent l'emplacement du bloc sur l'écran. Les options incluent gauche, droite, grande largeur et pleine largeur. Choisir la gauche ou la droite le place de ce côté de l'écran et l'enveloppe avec le bloc de contenu en dessous.

Il s'agit de la largeur large, qui prend la plus grande partie de la largeur de l'écran.

Remplacer

Cette option vous permet de remplacer le fichier audio sans supprimer le bloc. Ouvrez la bibliothèque, téléchargez un fichier ou saisissez l'URL du fichier.

Options

L'option comprend les paramètres standard trouvés dans la plupart des blocs WordPress :

Masquer plus de paramètres - cela masque la barre latérale droite.

Copier - cela copie le bloc afin que vous puissiez le coller ailleurs dans votre contenu.

Dupliquer - cela ajoute un duplicata du bloc sous l'original.

Insérer avant – cela place un espace pour un bloc avant le bloc.

Insérer après – cela place un espace pour un bloc après le bloc.

Déplacer vers - cela vous permet de déplacer le bloc à l'aide d'une ligne bleue pour choisir son emplacement.

Modifier en HTML - cela bascule le bloc vers la vue de l'éditeur de code afin que vous puissiez modifier le code HTML sans changer le reste des blocs.

Ajouter aux blocs réutilisables – cela ajoute le bloc à votre liste de blocs réutilisables.

Groupe - cela ajoute le bloc à un groupe afin que vous puissiez les ajuster comme une seule unité.

Supprimer le bloc - cela supprime le bloc.

Légende

La légende a un autre ensemble d'options qui comprend des paramètres pour le texte en gras et en italique, des liens et plus d'options. J'en ai utilisé beaucoup dans cet exemple. Ils affectent le texte que vous mettez en surbrillance.

Les options gras et italique peuvent être utilisées ensemble ou indépendamment. J'ai ajouté des caractères gras et italiques au mot « Ceci » dans l'exemple ci-dessus.

Pour le lien, vous verrez des suggestions de ceux que vous avez déjà utilisés. Il comprend une option pour ouvrir le lien dans un nouvel onglet. J'ai ajouté un lien vers le mot « audio » dans l'exemple ci-dessus.

En cliquant sur Plus d'options, vous disposez de paramètres pour styliser le texte. Ils affectent tous le texte que vous mettez en surbrillance. J'en ai utilisé plusieurs dans l'exemple ci-dessus. Ils comprennent:

Code en ligne - cela stylise le texte pour qu'il ressemble à du code.

Image en ligne – cela ajoute une image en ligne de votre médiathèque, comme je l'ai fait entre les mots « audio » et « légende ».

Saisie au clavier : stylise le texte avec le formatage HTML du clavier utilisé par votre navigateur.

Barré - cela place une ligne à travers le texte, comme le mot "légende" dans l'exemple ci-dessus.

Indice – cela rend le texte plus bas et plus petit que le reste, comme le mot « Vous » dans l'exemple ci-dessus.

Exposant – cela rend le texte plus haut et plus petit que le reste.

Couleur du texte - cela ouvre des outils de couleur pour changer la couleur du texte, comme je l'ai fait avec le mot "vous" dans l'exemple ci-dessus. Choisissez parmi les couleurs présélectionnées ou créez une couleur personnalisée. Pour les couleurs personnalisées, vous pouvez utiliser le sélecteur de couleurs ou saisir le code hexadécimal, le code RVB ou le code HSL.

Paramètres de la barre latérale du bloc audio

Les paramètres de la barre latérale ajoutent des paramètres audio et des paramètres avancés. Sélectionnez l'engrenage pour ouvrir les paramètres si la barre latérale ne s'affiche pas. Sélectionnez le bloc pour voir les paramètres de ce bloc spécifique. Regardons de plus près les paramètres.

Les paramètres audio

Les paramètres audio vous permettent de choisir la manière dont le lecteur audio gère le fichier. Le définir sur lecture automatique démarrera le fichier lorsque la page se chargera. Le définir en boucle fait redémarrer le fichier lorsqu'il atteint la fin du fichier.

Vous pouvez également choisir le mode de fonctionnement du préchargement. Cela détermine la quantité de fichier téléchargée lorsque la page se charge dans le navigateur de l'utilisateur. Les options incluent :

Auto - ceci télécharge l'intégralité du fichier audio même si l'utilisateur ne clique pas pour le lire.

Métadonnées - cela télécharge uniquement le texte, qui est l'information de base sur le fichier. Le fichier audio lui-même ne se télécharge que si l'utilisateur choisit de lire le fichier.

Aucun – aucune information ou donnée n'est téléchargée automatiquement.

Avancée

Les paramètres avancés incluent des champs pour l'ancre HTML et des classes CSS supplémentaires. L'ancre HTML est une URL qui vous permet de vous lier directement au bloc. Le champ Classes CSS supplémentaires vous permet d'ajouter des classes CSS pour styliser le bloc.

Conseils et bonnes pratiques pour utiliser efficacement le bloc audio

Utilisez la légende pour afficher le nom du fichier audio.

Utilisez des titres et des paragraphes clairs pour décrire les fichiers. Cela informe l'utilisateur de ce à quoi s'attendre.

Définissez le préchargement sur aucun ou sur les métadonnées pour accélérer le chargement de la page pour tout bloc qui n'a pas besoin de lecture automatique.

Utilisez la lecture automatique et la boucle pour les CTA des produits. Désactivez la lecture automatique et la boucle pour les autres blocs audio de la page.

Choisissez Groupe pour styliser l'arrière-plan du lecteur audio.

Utilisez ce bloc pour intégrer de l'audio dans vos pages et vos publications.

Utilisez un bloc d'intégration avec l'URL du fichier si vous ne souhaitez pas inclure de bouton de téléchargement.

Foire aux questions sur le bloc audio

À quoi sert le bloc audio ?

Il ajoute un lecteur audio à votre site Web qui permet aux utilisateurs de lire ou de télécharger un fichier audio.

Quel est l'avantage d'utiliser le bloc audio ?

Il crée un lecteur, de sorte que les utilisateurs sont informés qu'un fichier audio est disponible pour qu'ils puissent l'écouter.

Peut-il être transformé en d'autres blocs ?

Oui. Il peut également être transformé en un bloc de fichiers, des colonnes ou un groupe. Le bloc de fichiers permet aux utilisateurs de télécharger le fichier plutôt que de le lire via leurs navigateurs.

D'autres blocs peuvent-ils être utilisés pour les fichiers audio ?

Oui. Vous pouvez coller l'URL dans un bloc d'intégration, mais il n'a pas les paramètres audio du bloc audio. Il vous donnera un lecteur audio sur le front-end, mais il n'est pas aussi élégant que celui fourni par ce bloc. La version intégrée inclut l'heure sur la barre de suivi, mais elle n'inclut pas d'option de téléchargement ni de légende.

Quelles sont les meilleures utilisations de ce bloc ?

Ce bloc peut être utilisé pour la musique, les pistes audio, les échantillons d'albums, les podcasts, les sermons, les cours audio, les livres audio, etc.

Quels types de fichiers le bloc peut-il utiliser ?

Le bloc audio est compatible avec les fichiers .mp3, .m4a, .ogg et .wav. Le lecteur ressemble et fonctionne de la même manière avec chacun des types de fichiers.

Conclusion

C'est notre regard sur WordPress Audio Block. C'est un simple bloc avec quelques paramètres. Vous contrôlez son emplacement dans votre contenu et son fonctionnement dans les navigateurs de vos visiteurs. Ce bloc est un excellent choix pour tout type de fichier audio compatible avec WordPress.

Nous voulons de vos nouvelles. Utilisez-vous le bloc audio ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via tout bagel / shutterstock.com