Embellir une piste audio (figcaption etc...)

PaulLoupSulitzer, mercredi 01 février 2023 à 23h39

Bonsoir,

J’ai cherché quelques heures (et oui) comment "habiller" une piste audio : fond, contour, marges etc… +figcaption.

Si je fais appel à vous, c’est que

Mon HTML me semble pourtant correct :

<div id="musette"><div class="audiomusette"><figure>
<figcaption>Listen to the T-Rex:</figcaption><audio controls>
<source src="./media/Elvis.mp3" type="audio/mp3">
<source src="./media/Elvis.ogg" type="audio/ogg">
<source src="./media/Elvis.wav" type="audio/wav">
Your browser does not support the audio element.
</audio></figure></div></div>

et mes CSS aussi :

audio{
z-index: 999;
height: 100px;
position: relative;
margin: 0 auto;
height: 100px;
background-color: yellow;
}
.audiomusette 
{text-align: center;	margin-top: 30%; color: white; font-size: 8em;}

Est-ce possible de faire un joli truc avec un titre avec une belle fonte ?

Bonne soirée

P.

01/02/23 à 23h39

+0 -0

Gil Cot, jeudi 02 février 2023 à 02h58

https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio#mise_en_forme_avec_css me semble un bon point de départ. Cette page pointe vers une page en anglais qui détaille plus.

Maintenant, quel problème rencontres-tu exactement ? Il n’y a aucune allusion à ta belle fonte dans tes CSS mais c’est peut-être hérité ?

02/02/23 à 02h58

“It is seldom that liberty of any kind is lost all at once.” ― David Hume

+0 -0

PaulLoupSulitzer, jeudi 02 février 2023 à 07h41

Bonjour Gil Cot,

Merci pour ta réponse. Le figcaption de mon code vient d’après le lien que tu donnes J’ai "bien" lu cette page qui ne répond pas à mes attentes ou (plus certainement) trop pointue pour moi Et la page en anglais (terrible mon anglais) montre comment "enrichir" la "figure". Faut-il que je parte de ça ?

Pour la fonte, j’attendais déjà de voir mon texte avant de la mettre

Merci à toi et bonne journée

02/02/23 à 07h41

+0 -0

Banni

Alexsmith12, jeudi 02 février 2023 à 19h05

Masqué par viki53 — Spam

02/02/23 à 19h05

Gil Cot, vendredi 03 février 2023 à 23h53

Alors, pour paraphraser le premier lien, concernant la balise <audio>,

Chaque navigateur a ses contrôles (du lecteur) que tu ne peux pas vraiment modifier : à chaque navigateur+os son identité :
Tu peux activer les contrôles ou les désactiver (en pratique la plupart des navigateurs n’affichent alors rien —le truc est utilisé par exemple quand le son est en lecture automatique en fond), mais c’est du tout (tous les contrôles) ou rien …sauf si tu utilise l’API JS (c’est le seul moyen connu de faire son lecteur personnalisé non flash ou autre.) Pour styliser les contrôles, c’est bien audio qu’il faut cibler et c’est du tout ou rien aussi (comme pour leur affichage). On nous liste des exemples d’attributs utilisables :
- display
- border
- border-radius
- padding
- margin
- d’autres génériques comme width et height

Tu peux oublier le second lien (ou son pendant) qui indique(nt) plutôt comment réaliser un lecteur personnalisé en utilisant l’API JS. Si le sujet t’intéresse, je viens de voir que Eskimon l’a traité sur Zds (donc en français…) Revenons à la problématique.

Je viens de vérifier, et il semble bien que l’attribut background-color n’est pas officiellement pris en compte, mais que certains (Blink/WebKit/Gecko) ont leur support maison.

audio {
  position: relative;
  margin: 0 auto;
  height: 100px;
}
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color: yellow;
  color: #000;
}
audio::-webkit-media-controls-enclosure {
  background-color: #c6c6ec;
  color: red;
}

Par contre, les pseudo-éléments sont reconnus de tous, si ça peut aider.

audio:focus {
  outline: thick double #32a1ce;
}

Maintenant, est-ce que si on passe l’attribut sur le conteneur parent c’est hérité ? Je n’ai pas encore testé.

03/02/23 à 23h53

“It is seldom that liberty of any kind is lost all at once.” ― David Hume

+0 -0

PaulLoupSulitzer, samedi 04 février 2023 à 00h20

Très riche tout ça. Merci beaucoup. Mais j’avais fait (d’après un tuto) un piste audio avec un fond rouge et un titre blanc (figcaption) au dessus de la piste. Je n’arrive pas à retomber dessus C’était mi-2022

je vais quand même tester tout ce que tu me dis.

Par contre, j’ai changé mon fusil d’épaule. J’ai mis un titre avant la piste audio (oublions figcaption :/

La piste audio ne vient pas à la suite du titre, mais part à left: 0 au dessous. Y-a-t’il moyen que la piste audio vienne à la suite du titre ?

Encore merci pour ton aide, et tes exemples…. bcp de choses à tester

Bon week-end !

04/02/23 à 00h20

+0 -0

Gil Cot, samedi 04 février 2023 à 04h27

Par contre, j’ai changé mon fusil d’épaule. J’ai mis un titre avant la piste audio (oublions figcaption :/

Bah c’est fait pour ça normalement (quoique, c’est référencé depuis le flux principal et doit pouvoir être déplacé en annexe, bref.)

<figure>
  <figcaption>légende avant</figcaption>
  contenu…
</figure>
ou alors
<figure>
  contenu…
  <figcaption>légende après</figcaption>
</figure>

La piste audio ne vient pas à la suite du titre, mais part à left: 0 au dessous. Y-a-t’il moyen que la piste audio vienne à la suite du titre ?

Tu veux dire que le balisage est changé pour ceci ?

Listen to the T-Rex:<audio controls>
<source src="./media/Elvis.mp3" type="audio/mp3">
<source src="./media/Elvis.ogg" type="audio/ogg">
<source src="./media/Elvis.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>

Le comportement du lecteur est normal à cause de ce que demande la feuille de styles

audio{
z-index: 999;
height: 100px;
position: relative;
margin: 0 auto;
height: 100px;
background-color: yellow;
}

La ligne de marges se traduit, en détaillée, par

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

où auto signifie de distribuer automatiquement l’espacement restant de part et d’autre …autrement dit ça va centrer le lecteur par rapport à son conteneur (je suppose <div class="audiomusette"> ?) Ma théorie souffre de ce qu’il y a aussi un position: relative sans précision (de top, right, bottom ou left, je présume que la valeur par défaut de ce dernier s’est imposée ?) ; qui de plus est dans un nouveau contexte d’empilement du fait du z-index: 999…
Seul conseil ici, utiliser l’inspecteur de styles dans les outils de développement du navigateur.

04/02/23 à 04h27

“It is seldom that liberty of any kind is lost all at once.” ― David Hume

+0 -0

PaulLoupSulitzer, samedi 04 février 2023 à 08h09

Bonjour Gil Cot,

Tout cela me semble TOP. Je suis obligé de me sauver mais je regarde tout ça dès mon retour lundi ou mardi.

Bon week-end, et encore merci,

P.

04/02/23 à 08h09

+0 -0

PaulLoupSulitzer, lundi 06 février 2023 à 23h16

Bonsoir Gil Cot, J’ai un peu nettoyé mon code, ce qui donne ceci actuellement :

#musette {
	position: relative;
	overflow : hidden;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width:100%;
	height: 100%;
	-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
	background-position: top right;
	background-repeat: no-repeat;
	background-image: url("../images/musette.jpg");
	background-color: black;
			}		
audio{
	z-index: 999; position: relative;

}

et mon HTML :

		<div id="musette"><h1 class="presley">Listen to<br>
the T-Rex</h1><audio controls>
								<source src="./media/Elvis.mp3" type="audio/mp3">
									<source src="./media/Elvis.ogg" type="audio/ogg">
										<source src="./media/Elvis.wav" type="audio/wav">
											Your browser does not support the audio element.
		</audio></div>