Tout savoir sur WordPress
Tutoriel WordPress

Shortcode pour afficher un lecteur audio HTML5 dans vos articles

Cette astuce montre la démarche à suivre pour créer un shortcode qui permet d’insérer un lecteur audio en HTML5 dans vos articles.

Après avoir vu le shortcode pour insérer un player vidéo HTML5 dans vos articles, je vous propose de faire la même chose pour un lecteur audio HTML5.

Copier le code-ci dessous dans le fichier functions.php de votre thème :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


add_shortcode('audio5', 'gkp_html5_audio');
function gkp_html5_audio($atts, $content = null) {
    extract(shortcode_atts(array(
	"src"      => '',
	"autoplay" => '',
	"preload"  => 'true',
	"loop"     => '',
	"controls" => ''
	), $atts));

    return '<audio src="' . esc_attr( $src ) . '" autoplay="' . esc_attr( $autoplay ) . '" preload="' . esc_attr( $preload ) . '" loop="' . esc_attr( $loop ) . '" controls="' . esc_attr( $controls ) . '" autobuffer ></audio>';
}

[/pastacode]

Pour insérer un lecteur audio dans un article, vous devez utiliser le shortcode [audio5 src=”adresse de votre vidéo”]

Cet article a été mis à jour il y a 4510 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

9 Commentaires

  1. @Fredplus : Oui, il suffit d’ajouter l’attribut correspondante dans la balise audio et dans l’array de la fonction shortcode_atts

  2. @Dadou : Il faut ajouter l’attribut autoplay à la balise vidéo pour que la lecture se lance automatiquement.

  3. Bonjour,

    Depuis la version 3.7, il suffit de taper ceci dans votre page/post pour afficher un lecteur audio :

    [audio src="la-source-de-votre-fichier-audio-ou-podcast.mp3"]

    WordPress se charge désormais tout seul d’afficher le lecteur.

    Idem pour les vidéos, mais je ne vous apprends rien ;-)