Lecteur audio MP3
Documentation
Recherche d'articles sur le lecteur audio et le thème WordPress

Ajouter un lecteur audio avec un shortcode

Un moyen facile d'afficher ou de contrôler le lecteur audio sur votre site Web est d'utiliser un code court.

Tout d'abord, vous devrez créer un post de liste de lecture qui contiendra votre audio. Créez un post de liste de lecture dans WP-Admin > Lecteur MP3.

Nous avons différents shortcodes avec de nombreux attributs pour chacun d'eux.

Shortcode du widget du lecteur #

[sonaar_audioplayer]

C'est notre code court principal. Il est utilisé pour afficher un lecteur audio sur votre page. Pour ajouter ce shortcode, vous pouvez soit le copier/coller manuellement dans votre contenu texte, soit le générer avec notre outil de génération de shortcode. Pour générer le shortcode, assurez-vous que vous utilisez l'éditeur classique et cliquez sur l'icône de la note de musique.

Si vous avez déjà créé une liste de lecture (dans WP-Admin > MP3 Player ), sélectionnez "Liste de lecture prédéfinie" dans la liste déroulante, puis sélectionnez la liste de lecture que vous souhaitez.

Une fois que le shortcode a été généré, vous pouvez toujours modifier les attributs directement dans le texte du shortcode sans avoir à générer un nouveau shortcode. Par exemple, si vous voulez afficher la liste de lecture, utilisez show_playlist="true". Si vous voulez supprimer la timeline de soundwave, utilisez hide_timeline="true".

Attributs du code court

Attributun seul endroit
disposition du joueurChoisissez la disposition du lecteur. Valeur : skin_float_tracklist, skin_boxed_tracklist ou skin_button
La valeur par défaut est skin_float_tracklist, par exemple : player_layout="skin_boxed_tracklist".
albumsL'ID de l'article de votre liste de lecture que vous souhaitez affecter au lecteur. Valeur : IDs séparés par une virgule ou "all" pour tous les posts. Pour connaître l'ID de votre album, voir la capture d'écran : https://d.pr/i/KH79f2
ex : albums="55″ ou albums="all"
catégorie[PRO] Spécifiez l'ID de la catégorie de votre article. Valeur : ID de catégorie séparés par une virgule ou 'all' pour tous les articles. ex : category="57, 60″ ou category="all".
champ_méta_audio[PRO] Si vous utilisez un champ personnalisé pour votre URL audio (par exemple, si vous utilisez JetEngine, ACF, Metabox, etc.), spécifiez l'ID metakey de votre URL audio, par exemple : audio_meta_field="my_audio_url_metakey_id".
champ_méta_répéteur[PRO] Si vous utilisez un groupe répéteur dynamique pour générer plusieurs pistes dans un message, spécifiez l'ID metakey de votre groupe répéteur. Vous devez également utiliser l'attribut audio_meta_field pour spécifier votre URL audio (voir ci-dessus). ex : repeater_meta_field="my_repeater_group_metakey_id" audio_meta_field="my_audio_url_metakey_id"
messages_par_page[PRO] Spécifiez le nombre de posts à charger dans le lecteur. Valeur : nombre entier. ex : posts_per_page="5″
play-latestLorsqu'il est défini sur true, le lecteur prend automatiquement les derniers messages de la liste de lecture publiés dans WP-Admin > MP3 Player > All Playlists. Valeur : true ou false. Par exemple : play-latest="true".
alimentationDéfinit les URLs audio délimitées par le caractère ||. Ex : feed="https://yourdomain.com/01.mp3 || https://yourdomain.com/02.mp3″ - Voir ceci article pour les fournisseurs de streaming pris en charge.
titre du fluxSi vous avez utilisé l'attribut feed, vous voudrez utiliser feed_title pour définir les noms des titres de vos pistes. Délimités par le caractère ||. Ex : feed_title="Titre 01 || Titre 02″
image d'alimentationSi vous avez utilisé l'attribut feed, vous pouvez utiliser feed_img pour définir vos couvertures d'images. Délimité par le caractère ||. Ex : feed_img="https://yourdomain.com/img1.jpg || https://yourdomain.com/img2.jpg"
liste de lectureAffiche ou non la liste des pistes. Valeur : true ou false. ex : show_playlist="true"
affichage_contrôle_travailAffiche les boutons de lecture dans l'image d'illustration de la liste de lecture. Valeur : true ou false. Par exemple : display_control_artwork="true".
cacher_artworkCachez l'image de la couverture de votre album. Valeur : true ou false. ex : hide_artwork="true"
hide_timelinePour la mise en page flottante uniquement. Supprime la barre de progression et les contrôles. Valeur : true ou false. ex : hide_timeline="true"
hide_progressbar[PRO] Supprime la barre de progression, conserve les contrôles. Valeur : true ou false. ex : hide_progressbar="true"
hide_control_underSupprime les contrôles mais conserve la barre de progression. Valeur : true ou false. ex : hide_control_under="true"
reverse_tracklist[PRO] Inverse l'ordre de la tracklist. ex : reverse_tracklist="true". Valeur : true ou false. eg : reverse_tracklist="true"
heures cachées[PRO] Supprime les temps et les durées à côté de la barre de progression. Valeur : true ou false. eg : hide_times="true"
hide_album_title[PRO] Suppression du titre de l'album dans la TRACKLIST. S'applique uniquement au lecteur flottant. Valeur true ou false. eg : hide_album_title="true"
hide_player_title[PRO] Supprime le titre de l'album au-dessus de la barre Soundwave dans le lecteur. Valeur true ou false. eg : hide_player_title="true"
hide_track_title[PRO] Supprime le titre de la piste au-dessus de la barre d'onde sonore. Valeur : true ou false. eg : hide_track_title="true"
barre de progression_en ligne[PRO] Affiche le bouton Prev/Play/Next en ligne avec la barre de progression. Valeur : true ou false. ex : progressbar_inline="true"
show_meta_duration[PRO] nous calculerons la somme de la durée de chaque piste et afficherons le montant total de la durée dans le lecteur. Valeur : true ou false. ex : show_meta_duration="true"
Afficher la date de publication[PRO] Nous afficherons la date de publication de la liste de lecture/de l'épisode en cours de lecture dans le lecteur. Valeur : true ou false. ex : show_publish_date="true"
Afficher le nombre de pistes[PRO] Il est parfois utile de faire savoir à votre visiteur combien de pistes contient la liste de lecture. Nous afficherons cette étiquette dans le lecteur. Valeur : true ou false. eg : show_tracks_count="true"
montrer_skip_bt[PRO] Un auditeur vient de manquer quelque chose dans votre morceau ? Ajoutez un bouton de retour en arrière de 15 secondes pour qu'il puisse rapidement rattraper son retard. Même chose s'il veut sauter rapidement un segment ou deux. Valeur : true ou false. ex : show_skip_bt="true"
show_shuffle_bt[PRO] Permet de mélanger les pistes de façon aléatoire dans la liste de lecture. Valeur : true ou false. Par exemple : show_shuffle_bt="true".
show_speed_bt[PRO] Un bouton de vitesse permet à votre utilisateur de modifier la vitesse de lecture de 0,5x, 1x, 1,2x, 1,5x et 2x. Valeur : true ou false. ex : show_speed_bt="true"
montrer_volume_bt[Nous ajouterons un contrôle du volume dans le lecteur afin que l'utilisateur puisse ajuster le niveau de volume. Le niveau de volume est conservé dans sa session de navigation. Valeur : true ou false
strip_html_track_desc[PRO] Nous supprimerons les balises HTML dans la description de votre piste afin d'éviter tout style indésirable. Valeur : true ou false. ex : strip_html_track_desc="true"
piste_desc_longueur[PRO] Spécifiez le nombre de mots que peut contenir une description de piste. Nous afficherons [...] lorsqu'elle atteindra cette quantité maximale. Valeur : nombre entier. La valeur par défaut est 55. ex : track_desc_lenght="55″
hide_trackdesc[PRO] Nous cacherons la description dans la tracklist mais nous garderons une icône d'information pour que les gens puissent l'atteindre. Valeur : true ou false. eg : hide_trackdesc="true"
montrer_cat_description[PRO] Nous allons afficher la description de la catégorie définie dans le lecteur MP3 > Podcast Show. S'applique uniquement aux podcasts. Valeur : true ou false. eg : show_cat_description="true"
album_store_position[PRO] S'applique uniquement au lecteur en boîte. Affichez les boutons de liens externes directement dans le lecteur en boîte au lieu de les placer sous la liste de lecture. Valeur : "top". ex : album_store_position="top"
show_track_marketAffichez les icônes des magasins de votre piste à côté de chacune de vos pistes. Valeur : true ou false. ex : show_track_market="true"
marché_albumAffichez les icônes des magasins de votre liste de lecture sous cette dernière. Valeur : true (vrai) ou false (faux). Par exemple : show_album_market="true".
store_title_textChangez Available Now par n'importe quelle chaîne. Valeur : Chaîne. Valeur par défaut : "Available Now". Exemple : store_title_text="Listen On".
couleur_vagueSpécifiez la couleur de votre forme d'onde pour contourner la couleur du paramètre du plugin. Valeur : couleur hexa. ex : wave_color="#E81538″
couleur_progression_vagueSpécifiez la couleur de votre barre de progression sur votre forme d'onde pour contourner la couleur du paramètre du plugin. Valeur : couleur hexa. eg : wave_progress_color="#FFBCC6″
utiliser_le_label_avec_icône[PRO] Affichez l'étiquette "lecture" textuelle ainsi qu'une icône de lecture pour votre bouton de lecture. S'applique uniquement à la mise en page encadrée et au bouton.
hide_play_icon[PRO] Supprimez l'icône de lecture et conservez uniquement l'étiquette textuelle "play", par exemple : hide_play_icon="true".
Texte de lecture[PRO] Définit la chaîne textuelle "play". Ne s'applique qu'à la disposition en boîte et en bouton. ex : play_text="Play The Track Now"
texte de la pause[PRO] Définit la chaîne textuelle de la "pause". S'applique uniquement à la disposition en boîte et en bouton. ex : pause_text="Pause Current Track"
play_bt_text_colorDéfinit la couleur de l'étiquette de jeu textuelle. S'applique uniquement à la disposition en boîte et en bouton. Valeur : couleur hexa. ex : play_bt_text_color="#FFFFFF"
play_bt_bg_colorDéfinit la couleur d'arrière-plan de l'étiquette de jeu textuelle. S'applique uniquement à la disposition en boîte et en bouton. Valeur : couleur hexa. ex : play_bt_bg_color="#000000″
titletag_playlistBalise d'en-tête au-dessus de la liste de lecture à des fins de référencement. Valeur : h1, h2, h3, h4, h5, h6, div, span, p. ex : titletag_soundwave="h3″
titletag_soundwaveBalise d'en-tête du titre au-dessus de l'onde sonore à des fins de référencement. Valeur : h1, h2, h3, h4, h5, h6, div, span, p. ex : titletag_soundwave="h4″
sticky_player[PRO] Active le lecteur collant. Valeur : true ou false. ex : sticky_player="true"
piste_travail[PRO] Affiche des vignettes à côté de chacun de vos titres dans la liste de lecture. Valeur : true ou false. ex : track_artwork="true"
barre de défilement[PRO] Active la barre de défilement dans la tracklist. Valeur : true ou false. eg : scrollbar="true"
remue-ménage[PRO] Activer le brassage des données. Valeur : true ou false. ex : shuffle="true"
notrackskip[PRO] Si cette option est activée, le lecteur s'arrêtera lorsque la piste en cours sera terminée pour empêcher la lecture automatique de la piste suivante. Valeur : true ou false. Par défaut, false.
no_loop_tracklist[PRO] Si cette option est définie sur true, le lecteur s'arrêtera lorsque la liste de lecture actuelle sera terminée pour éviter que la liste de lecture ne redémarre automatiquement. Valeur : true ou false. Par défaut, false. Par exemple : no_loop_tracklist="true".
en lignePermet de placer plusieurs lecteurs sur la même ligne en fonction de l'espace disponible. Valeur : true ou false. ex : inline="true"
idAttribut facultatif utilisé pour définir un ID unique afin de pouvoir cibler ce lecteur pour le shortcode sonaar_ts. Voir le shortcode sonaar_ts ci-dessous pour l'utilisation. Valeur : Valeur alphanumérique, sans caractère spécial, sans espace. ex : id="mon_joueur_féminin".

Utilisez l'URL audio au lieu de créer une liste de lecture :

Il existe également un moyen plus avancé d'ajouter un lecteur sans avoir à créer de liste de lecture et en spécifiant directement l'URL de la source audio. Pour construire un lecteur à la volée sans créer de liste de lecture, sélectionnez Audio URL Inputs (Advanced) dans la liste déroulante Playlist type (voir la capture d'écran : https://d.pr/i/iLjqnz) Vous aurez la possibilité d'ajouter plusieurs URLs audio avec leurs titres directement dans le shortcode. N'oubliez pas de séparer l'URL ou les titres des pistes par le caractère || qui est utilisé comme un délimiteur. Voir l'attribut feed ci-dessus pour en savoir plus.

Si vous voulez construire quelque chose de dynamique avec des champs personnalisés, voyez nos attributs audio_meta_key ci-dessus.

Exemple de code court

Exemple 001

album-art

Regardez au bas de l'écran pour les paroles de Karaoké.
[sonaar_audioplayer albums="6" sticky_player="true" hide_artwork="false" show_playlist="true" show_track_market="true" show_album_market="false" wave_color="#000000" wave_progress_color="#CCCCCC"][/sonaar_audioplayer]

Exemple 002

[sonaar_audioplayer albums="723185" player_layout="skin_boxed_tracklist" sticky_player="true" hide_artwork="false" show_playlist="true" show_track_market="true" show_album_market="false" show_volume_bt="true" show_speed_bt="true" show_shuffle_bt="true" show_skip_bt="true"  ][/sonaar_audioplayer]

Shortcode des chapitres et de la lecture textuelle #

[sonaar_ts]Play Now[/sonaar_ts]

Lorsque vous utilisez ce code court, le texte qu'il contient sera converti en un lien d'action cliquable.

Si vous ne spécifiez aucun attribut, comme dans l'exemple ci-dessus, nous allons essayer de lire le premier widget de lecteur audio trouvé au-dessus de ce shortcode. Si aucun lecteur n'est trouvé sur la page, nous essaierons de lire les pistes définies dans nos champs personnalisés Tracklist de la page actuelle.

Vous pouvez également utiliser les attributs suivants :

Attributun seul endroit
widget_idSpécifiez l'identifiant du widget du lecteur à cibler. Par exemple : widget_id= "mon_joueur_féminin". Pour définir un identifiant de lecteur sur l'instance de votre lecteur lorsque vous utilisez le shortcode sonaar_audioplayer, utilisez l'attribut id (voir ci-dessus)
post_idSpécifiez l'ID du post de la liste de lecture à cibler. Cela lancera le lecteur collant, par exemple : post_id="55″.
identifiant de la pisteSpécifiez le numéro de la piste à cibler. ex : track_id="4″
tempsSpécifiez l'horodatage de départ. Utile pour créer des chapitres et une table des matières. ex : time="2:27″. Cela fera démarrer le lecteur au temps 2:27.
boutonMettez la valeur true si vous voulez transformer le lien pour qu'il ressemble à un bouton. ex : button="true"
icône de jeuMettez la valeur true si vous voulez ajouter une icône de lecture. ex : play_icon="true"
textePlacez du contenu textuel dans votre bouton pour l'état de lecture. ex : text="Play Episode 01″
texte_pausePlacez du contenu textuel dans votre bouton pour l'état de pause, par exemple : text_pause="Pause Episode".
couleurDéfinissez la couleur de la police. ex : color="#fff"
couleur de fondDéfinissez la couleur de fond : ex : background_color="#000″.
taille de la policeDéfinissez la taille de la police : par exemple, font_size="32px".
blocDéfinissez la valeur true (vrai) si vous souhaitez que votre lien s'affiche sous forme de bloc et non de ligne.

Voici les exemples finaux et ce à quoi cela ressemblerait :

Jouer maintenant
[sonaar_ts]Play Now[/sonaar_ts]

// shall play in the sticky player, the first audio player widget found above this shortcode. If no player found on your page, we will try to play the tracks set in our tracklist custom fields set for the current page.

Chapitre 01 : A propos de cette session #1 (00:30)
Chapitre 02 : Apprendre quelque chose de cool (01:43)
Chapitre 03 : Le Mastermind est délicat (02:00)
Chapitre 04 : Trouvez toujours vos voies (02:15)

Chapter 01: [sonaar_ts time="0:30"]About this session #1 (00:30)[/sonaar_ts]
Chapter 02: [sonaar_ts time="1:43"]Learn something cool (01:43)[/sonaar_ts]
Chapter 03: [sonaar_ts time="2:00"]Mastermind is tricky (02:00)[/sonaar_ts]
Chapter 04: [sonaar_ts time="2:15"]Find your ways always (02:15)[/sonaar_ts]

// shall tranform the times into clickable links and will play in the sticky player, the first audio player widget found above the shortcodes at the specified times. If no player found on your page, we will try to play the tracks set in our tracklist custom fields set for the current page.

Jouez le Epigramme à 01 minute dans le lecteur collant

Play the [sonaar_ts post_id="590318" time="1:00"]Epigram at 01 minute[/sonaar_ts] in the Sticky Player

// shall transform 'Episode 02' text content into a clickable link and will play the playlist ID 55 starting at 2 minutes 27 seconds in the sticky player
Jouer à l'épigramme
[sonaar_ts post_id="55" button="true" play_icon="true" text="Play Episode" color="#fff" background_color="#000" font-size="32px" block="true"]

// add a very simple 'Play Episode' button with a play icon. It will play the playlist id #55 in the sticky player

Shortcode pour les paroles de chansons #

[sonaar_lyrics_placeholder]

Si vous utilisez des paroles pour votre chanson, vous pouvez ajouter un espace réservé aux paroles n'importe où dans votre contenu. Nous afficherons les paroles de la chanson en cours de lecture dans cet espace réservé. Aucun attribut n'est requis.

Exemple :

[sonaar_lyrics_placeholder]

Shortcode pour l'aperçu de la licence #

Si vous vendez de la musique avec WooCommerce, il y a de fortes chances que vous fournissiez des contrats de licence de musique. Si ce n'est pas le cas, assurez-vous de consulter notre édition MP3 Audio Player Pro avec WooCommerce qui vous donne la possibilité de vendre des licences audio, de fournir des contrats et des accords en format PDF à télécharger.

Vous pouvez en savoir plus sur comment utiliser notre fonction de licence ici.

Voici un shortcode pour afficher l'aperçu de la licence n'importe où sur votre site

[sonaar_license post_id='772' column='true' show_preview_button="true"]

post_id : Spécifiez le post_id de l'article Licences et contrats de musique que vous souhaitez afficher. Voir la capture d'écran : https://d.pr/i/KCb0Gp Laissez vide si vous utilisez ce shortcode dans un modèle de produit unique afin qu'il obtienne automatiquement les licences attachées au produit actuel.

colonne : Affiche la licence dans un format de colonne au lieu d'être en ligne. Ex : column='true'

show_preview_button : Affiche un bouton de prévisualisation de la licence sous les puces de la licence. Le bouton affichera un aperçu de l'accord de licence. Par exemple : show_preview_button='true'.

Mis à jour le 31 mai 2022
Cet article vous a-t-il été utile ?
betterdocs-category-grid-icon

Pour commencer

Toujours coincé ?
Comment pouvons-nous vous aider ?