Audio player (lecteur audio)

Le Lecteur audio est un panneau de contrôle qui permet de gérer un média audio en cours d’écoute, comme un podcast ou la vocalisation d’un article.

Usage

Le composant lecteur audio doit être utilisé dès qu’un média audio est lancé par l’utilisateur.
Il doit être affiché tant que le média est en cours de lecture. Aussi, si le fait de changer de page ne coupe pas la lecture du média (p. ex. lors de l’écoute d’un podcast), ce lecteur doit toujours être visible afin de permettre son contrôle.
En fonction des capacités techniques, plusieurs informations et contrôles doivent être proposés dans le lecteur :
- un titre,
- un canal, chaîne de diffusion… (facultatif),
- un visuel (facultatif),
- un bouton de lecture / pause,
- des boutons pour se déplacer revenir en arrière ou avancer (facultatif),
- une barre de progression (facultatif),
- une croix de fermeture (qui coupe en même temps la lecture si celle-ci est encore active).

Bonnes pratiques

Le lecteur devrait toujours être accessible. Il devrait donc être en popover au-dessus de la page pour ne pas subir le scroll.

Style & code

Dépendances :

classe sipaui sur un parent (par exemple le <body>),
Helpers (classes d’aide),
Grids (grilles),
composant Titles (titres),
composant Picture (image),
composant Sources (sources),
composant Channel (canal),
composant Buttons (boutons),
composant Play-button (bouton de lecture),
composant Progress-bar (barre de progression),
composant Close button (bouton de fermeture).

Version standard

Pour construire un lecteur audio il faut incorporer divers autres composants (titre, bouton de lecture…) dans cette architecture de blocs : un bloc avec la classe su-audio-player contenant un bloc su-container (classe dépendante qui des grilles) qui adaptera automatiquement le contenu du lecteur à la largeur du contenu de la page, contenant lui-même 4 blocs, su-identity-container pour l’identification de l’audio en cours de lecture, su-controls-container pour les contrôles de lecture, su-time-container pour la barre de progression et su-close pour fermer le lecteur. Il doit aussi contenir bien sûr le fichier audio.

Dans un thème qui prévoit un lecteur au fond foncé, il faut aussi ajouter la classe su-negative à côté de su-audio-player afin de profiter du contenu clair.

Afin d’éviter que du contenu trop long ne casse le design de ce composant, il faut aussi utiliser des classes su-truncate-x sur les textes. Dans cette version par défaut, il suffit d’un su-truncate-2 sur le titre.

En plus des classes des divers composants standards (su-title, su-play-pause, su-progress-bar… cf. l’exemple de code ci-dessous pour l’exhaustivité), le composant utilise les classes su-identity au-dessus des textes d’identité (ici le titre), su-backward et su-forward sur les boutons d’avance et retour rapide et su-time sur les informations de temps.

Pour l’accessibilité, un de 15 secondes après les icônes des boutons d’avance et retour rapide permet de préciser le temps appliqué.

<div id="audio-player" class="su-audio-player su-negative">
    <div class="su-container">
        <div class="su-identity-container">
            <div class="su-identity">
                <p class="su-title su-truncate-2">«&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix</p>
            </div>
        </div>
        <audio src="toto.mp3" controls="" hidden="" preload="auto"></audio>
        <div class="su-controls-container">
            <button class="su-backward">
                <i class="su-icon">reculer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
            <button class="su-button su-primary su-small su-icon-only su-play-pause su-play" data-sutoggleclass='{"klass":"su-play"}'>
                <i class="su-icon su-icon-play">lecture</i>
                <i class="su-icon su-icon-pause">pause</i>
            </button>
            <button class="su-forward">
                <i class="su-icon">avancer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
        </div>
        <div class="su-time-container">
            <span class="su-time">01:25</span>
            <input type="range" max="252" value="85" class="su-progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="252" aria-valuetext="Votre média est avancé de 1 minute 25 secondes" />
            <span class="su-time">04:12</span>
        </div>
        <button class="su-close">
            <i class="su-icon">fermer</i>
        </button>
    </div>
</div>

Positionnement et interractivité

Afin de pouvoir être masqué par défaut et être affiché au-dessus de tout le reste de la page (cf. les bonnes pratiques), ce composant doit être positionné en popover. Pour cela il suffit de lui ajouter l’attribut popover, le bouton qui lancera la lecture de l’audio pourra alors utiliser les fonctionnalités de l’API popover (à gérer de votre côté).

Concernant l’interaction avec le fichier audio, ce composant n’est pas fonctionnel, c’est-à-dire qu’il ne contrôle pas la lecture de l’audio associé. Pour que les boutons puissent interagir avec ce fichier audio, il faut du JavaScript non fourni par SipaUI. Ce JS pourra alors s’appuyer sur l’API de contrôle des éléments audio du navigateur.

Attention ! Le bouton de fermeture du lecteur doit non seulement fermer celui-ci, mais aussi couper la lecture ! (ce qui n’est pas géré dans l’exemple ci-dessous).

<button class="su-button su-primary su-small su-margin-bottom-m" popovertarget="audio-player" popovertargetaction="show">Ouvrir le lecteur audio</button>
<p>Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù skeud tach foenn ni kleñved skrivañ solier, dezho kemener peoc’h mall e atav bed. C’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez. Plouezoc’h benveg e Chrouer kleiz ennomp gervel lavarout huanadiñ elgez erc’h digarez pehini troc’hañ, gwer bez evidoc’h degemer degemer ampart taol serret homañ gouzout eürus. Kenavo ennomp Sant-Nouga gwazh porzh sec’h toull wrierez ahont goude Pask rev nav seizh, arat ehan e beuziñ eviti elgez c’hontrol volz vuiañ ur doñjer. Hejañ dimezell vezañ me gwellañ jiletenn e da davañjer, c’hann kaoued mousc’hoarzhin daouarn magañ drezañ penn toenn brozh, falc’hat derc’hel piv maouez nemet  skol evel. Ledan Pornizhan ennoc’h Bro buan fall amanenn klevout rumm, ankouna’haat</p>
<div id="audio-player" popover class="su-audio-player su-negative">
    <div class="su-container">
        <div class="su-identity-container">
            <div class="su-identity">
                <p class="su-truncate-2 su-title">«&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix</p>
            </div>
        </div>
        <audio src="toto.mp3" controls="" hidden="" preload="auto"></audio>
        <div class="su-controls-container">
            <button class="su-backward">
                <i class="su-icon">reculer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
            <button class="su-button su-primary su-small su-icon-only su-play-pause su-play" data-sutoggleclass='{"klass":"su-play"}'>
                <i class="su-icon su-icon-play">lecture</i>
                <i class="su-icon su-icon-pause">pause</i>
            </button>
            <button class="su-forward">
                <i class="su-icon">avancer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
        </div>
        <div class="su-time-container">
            <span class="su-time">01:25</span>
            <input type="range" max="252" value="85" class="su-progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="252" aria-valuetext="Votre média est avancé de 1 minute 25 secondes" />
            <span class="su-time">04:12</span>
        </div>
        <button class="su-close" popovertarget="audio-player" popovertargetaction="hide">
            <i class="su-icon">fermer</i>
        </button>
    </div>
</div>

Avec une image

Il est possible d’ajouter une image dans le bloc su-identity-container. Cela peut être la vignette d’un podcast ou l’image principale d’un article. Pour cela, ajouter une <figure> contenant un <div class="su-ratio-1-1 su-main-picture">, lui-même contenant votre image.

<div id="audio-player" class="su-audio-player su-negative">
    <div class="su-container">
        <div class="su-identity-container">
            <figure>
                <div class="su-ratio-1-1 su-main-picture">
                    <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                </div>
            </figure>
            <div class="su-identity">
                <p class="su-title su-truncate-2">«&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix</p>
            </div>
        </div>
        <audio src="toto.mp3" controls="" hidden="" preload="auto"></audio>
        <div class="su-controls-container">
            <button class="su-backward">
                <i class="su-icon">reculer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
            <button class="su-button su-primary su-small su-icon-only su-play-pause su-play" data-sutoggleclass='{"klass":"su-play"}'>
                <i class="su-icon su-icon-play">lecture</i>
                <i class="su-icon su-icon-pause">pause</i>
            </button>
            <button class="su-forward">
                <i class="su-icon">avancer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
        </div>
        <div class="su-time-container">
            <span class="su-time">01:25</span>
            <input type="range" max="252" value="85" class="su-progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="252" aria-valuetext="Votre média est avancé de 1 minute 25 secondes" />
            <span class="su-time">04:12</span>
        </div>
        <button class="su-close">
            <i class="su-icon">fermer</i>
        </button>
    </div>
</div>

Avec une source ou un canal (ou chaîne)

Il est aussi possible d’ajouter une source ou un canal pour identifier l’origine. Dans ce cas, il faut impérativement passer la troncature à 1 ligne avec la classe su-truncate-1 sur les 2 textes.

Source

Pour la source, ajoutez dans su-identity un Ma source, et passez la troncature du tire à 1. Il est possible de mettre aussi la cocarde avec un su-cockade-xx.

<div id="audio-player" class="su-audio-player su-negative">
    <div class="su-container">
        <div class="su-identity-container">
            <div class="su-identity">
                <p class="su-source su-cockade-of su-truncate-1">Ouest-France</p>
                <p class="su-title su-truncate-1">«&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix</p>
            </div>
        </div>
        <audio src="toto.mp3" controls="" hidden="" preload="auto"></audio>
        <div class="su-controls-container">
            <button class="su-backward">
                <i class="su-icon">reculer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
            <button class="su-button su-primary su-small su-icon-only su-play-pause su-play" data-sutoggleclass='{"klass":"su-play"}'>
                <i class="su-icon su-icon-play">lecture</i>
                <i class="su-icon su-icon-pause">pause</i>
            </button>
            <button class="su-forward">
                <i class="su-icon">avancer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
        </div>
        <div class="su-time-container">
            <span class="su-time">01:25</span>
            <input type="range" max="252" value="85" class="su-progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="252" aria-valuetext="Votre média est avancé de 1 minute 25 secondes" />
            <span class="su-time">04:12</span>
        </div>
        <button class="su-close">
            <i class="su-icon">fermer</i>
        </button>
    </div>
</div>

Canal

Pour le canal d’un podcast par exemple, ajoutez dans su-identity un Mon canal, et passez la troncature du tire à 1.

<div id="audio-player" class="su-audio-player su-negative">
    <div class="su-container">
        <div class="su-identity-container">
            <div class="su-identity">
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <p class="su-title su-truncate-1">«&nbsp;Lies&nbsp;»&nbsp;: #3 María del Mar, eus Spagn da Dreboul</p>
            </div>
        </div>
        <audio src="toto.mp3" controls="" hidden="" preload="auto"></audio>
        <div class="su-controls-container">
            <button class="su-backward">
                <i class="su-icon">reculer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
            <button class="su-button su-primary su-small su-icon-only su-play-pause su-play" data-sutoggleclass='{"klass":"su-play"}'>
                <i class="su-icon su-icon-play">lecture</i>
                <i class="su-icon su-icon-pause">pause</i>
            </button>
            <button class="su-forward">
                <i class="su-icon">avancer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
        </div>
        <div class="su-time-container">
            <span class="su-time">01:25</span>
            <input type="range" max="252" value="85" class="su-progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="252" aria-valuetext="Votre média est avancé de 1 minute 25 secondes" />
            <span class="su-time">04:12</span>
        </div>
        <button class="su-close">
            <i class="su-icon">fermer</i>
        </button>
    </div>
</div>

Version complète

<div id="audio-player" class="su-audio-player su-negative">
    <div class="su-container">
        <div class="su-identity-container">
            <figure>
                <div class="su-ratio-1-1 su-main-picture">
                    <img class="su-media" alt="Podcast « Lies »." src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNzE1MjFjYTRmZGJmZDQ3MTU4OWEwMGE3Y2VmZWRkMzU?width=1260&amp;height=1260&amp;focuspoint=50%2C50&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=d5b75fb8a040be2ab10dbaa3b43216cb6a0a2bda436d5678e79887d53c5e9823">
                </div>
            </figure>
            <div class="su-identity">
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <p class="su-title su-truncate-1">«&nbsp;Lies&nbsp;»&nbsp;: #3 María del Mar, eus Spagn da Dreboul</p>
            </div>
        </div>
        <audio src="toto.mp3" controls="" hidden="" preload="auto"></audio>
        <div class="su-controls-container">
            <button class="su-backward">
                <i class="su-icon">reculer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
            <button class="su-button su-primary su-small su-icon-only su-play-pause su-play" data-sutoggleclass='{"klass":"su-play"}'>
                <i class="su-icon su-icon-play">lecture</i>
                <i class="su-icon su-icon-pause">pause</i>
            </button>
            <button class="su-forward">
                <i class="su-icon">avancer</i><span class="su-visually-hidden">de 15 secondes</span>
            </button>
        </div>
        <div class="su-time-container">
            <span class="su-time">01:25</span>
            <input type="range" max="252" value="85" class="su-progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="252" aria-valuetext="Votre média est avancé de 1 minute 25 secondes" />
            <span class="su-time">04:12</span>
        </div>
        <button class="su-close">
            <i class="su-icon">fermer</i>
        </button>
    </div>
</div>

Liste des classes disponibles

su-audio-player
su-identity-container
su-controls-container
su-time-container
su-identity
su-backward
su-forward
su-time

Classes annexes

su-negative
su-icon (dépendant des icônes de SipaUI [cf. Ressources/Icônes])
su-container (dépendant des Grids (grilles))
su-truncate-1, su-truncate-2 (dépendants des Helpers (classes d’aide))
su-visually-hidden (dépendant des Helpers (classes d’aide))
su-title (dépendant du composant Titles (titres))
su-main-picture, su-ratio-1-1 (dépendant du composant Picture (image))
su-source, su-cockade-xx (dépendant du composant Sources (sources))
su-channel (dépendant du composant Channel (canal))
su-button, su-primary, su-small, su-icon-only (dépendant du composant Buttons (boutons))
su-play-pause, su-play, su-icon-play, su-icon-pause (dépendant du composant Play-button (bouton de lecture))
su-progress-bar (dépendant du composant Progress-bar (barre de progression))
su-close (dépendant du composant Close button (bouton de fermeture))