11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Lecteur audio HTML5 "maison" : barre de progression interract

Bonsoir,

Ce sujet est la suite du sujet précédent sur la création d'un lecteur audio HTML5 avec l'API HTMLMediaElement, le chapitre 2 si l'on peut dire.

Pour l'instant j'en suis là de mon lecteur audio (je n'ai pas pu m'empêcher de le designer un peu) : page en ligne.

J'ai donc une nouvelle question : en 2023 vous utiliseriez quoi dans l'idéal pour faire une barre de progression interactive ?

1. Pour l'instant j'ai fais simple : deux div imbriquées, sur un modèle que j'avais déjà expérimenté (ici). Il n'y a pas d’interaction avec cette barre de progression pour l'instant, apparement il faudrait que j'utilise des écouteurs d'événements tels que addEventListener "pointerdown", "pointerup" et/ou "pointermove" je crois.

2. Mais je pourrais aussi utiliser un input range qui serait, lui, plus facile à écouter mais... bien moins facile à designer. En même temps je l'ai déjà fait. Non, la question serait plutôt : serait-ce vraiment pertinent ? Je me pose la question car, après tout, l'attribut range reste un élément de formulaire, normalement il lui faut un label si l'on veut être valide (pas comme avec les exemples qui traînent sur StackOverflow).

Bref, qu'en pensez-vous ?
Modifié par Olivier C (17 Apr 2023 - 23:35)
Bon, ben finalement ça sera un input type range, ou l'art de se compliquer la vie : page de démonstration.

Ce n'est pas encore interactif mais se sont bien des ranges que j'ai réaligné sur le design précédent. Pas une mince affaire, par exemple pour gérer la couleur de la barre de progression :
background-image: linear-gradient(90deg, var(--colorSlide) 0, var(--colorSlide) var(--stop), transparent var(--stop))

Et dans la fonction currentTime :
progress.style.setProperty('--stop', `${media.currentTime / media.duration * 100}%`)

J'ai aussi ajouté une barre pour les volumes à la manière du lecteur par défaut de Chrome.
Maintenant il va falloir interagir avec tout ça.
Modifié par Olivier C (18 Apr 2023 - 02:04)
Salut,
ça ne va pas faire avancer ton projet, mais puisque nous sommes en plein dans les lecteurs audio html 5, en voici un, dépouillé. Plus simple avec liste de titres, tu meurs. Avec un peu de css, on peut arranger la liste pour la faire plus présentable. J'y ai ajouté une image. Il est même responsive, à condition d'ajouter des @media. Pour qui cherche un lecteur audio ultra simple avec liste.
<style>
audio{scale:.8;}
audio:hover{opacity:1}
#audio_list { 
	width:40em;	
	color:blue;}
#audio_player {
	display:flex;
	position:relative;
	width:50%;
	height:20em;
	margin:auto;
	text-align:left;
	background:url('Une_image);
	background-reapet:no-reapet;
	opacity:1;}
form {
	text-align:center;
	margin:auto;}
</style>

<body>
<audio controls id="audio_player" src="Titre_1.mp3"></audio>
<br>
<form>
<label for="audio_list">
</label>
<select onchange="change_audio_file();" id="audio_list">
<option selected value="Titre_1.mp3">Une</option>
<option value="Titre_2.mp3">Deux</option>
<option value="Titre_3.mp3">Trois</option>
/*Et autant de titres que l'on veut*/
</select>
</form>

<script>
function change_audio_file()
{
  var file_list = document.getElementById('audio_list') ;
  var file_to_play = file_list.options[ file_list.selectedIndex ].value ;
  var player = document.getElementById('audio_player');
  player.src = file_to_play ;
  player.play() ;}
</script>

upload/1681822649-67790-audioliste.png
Modifié par Bongota (18 Apr 2023 - 14:57)
J'ai procrastiné hier, pas d'avancée sur la barre de progression. J'ai fais des ajouts de fonctionnalités faciles : replay, stop, avancer ou revenir de 10s... C'est en ligne.

Le plus dur n'est pas de coder : c'est de savoir ce que l'on veut comme fonctionnalité et comme rendu.
Modifié par Olivier C (19 Apr 2023 - 08:25)
Salut,

il y a aussi sur mon lecteur la possibilité de faire avancer ou reculer la barre de progression avec la souris, ce qui est très pratique. Ainsi que la barre de volume.
Pendant que je suis dessus, Raphaël m'avait donné ici, il y a maintenant près de deux années, un tout petit bout de JavaScript afin de positionner le volume du lecteur à l'ouverture de la page. Beaucoup de personnes vont sur les sites avec une écoute positionnée au maximum sur leur ordinateur. Mettre le lecteur automatiquement en-dessous du niveau maximum est une précaution. Libre au visiteur de le remonter ensuite, toujours à la souris.
document.querySelectorAll('video').forEach(($audio)=>{
$audio.volume = 0.8;
});

Sur le lecteur DragonPlay, cette option est déjà proposée dans le script, elle est réglable dans le html de la balise audio avec data-volume="0.8"
Modifié par Bongota (19 Apr 2023 - 11:17)
Merci, j'avais vu pour le volume, les fonctions HTMLMediaElement sont bien documentées.

Par contre, je n'aime pas interférer avec les préférences utilisateur pour le choix du volume, même si, bien sûr, celui-ci peut le modifier après coup.
Modifié par Olivier C (19 Apr 2023 - 12:40)
Salut les amis,

J'ai fini de peindre ma maison ! Hier soir j'ai eu le temps de trouver la solution :
['click', 'rangeinput'].forEach((event) => { // @todo 'touchmove' ?
  mediaProgressBar.addEventListener(event, e => {
    const rect = mediaProgressBar.getBoundingClientRect();
    const position = (e.pageX - rect.left) / mediaProgressBar.offsetWidth;
    media.currentTime = position * media.duration;
  })
})

La meilleure doc que j'ai trouvé pour créer un player HTML5 : MDN, Creating a cross-browser video player.
La plupart des ressources sur le sujet s'appuient en réalité sur ce document (même si elles ne le disent pas). C'est bête je l'avais trouvé puis oublié celui-là.

Comme quoi, il est toujours important de bien se préparer en amont (recherche des meilleures ressources, des meilleurs pratiques) avant de foncer tête baissée dans le codage. On gagne quand-même beaucoup de temps.

EDIT : un petit up. Même si la ressource était top elle ne traitait pas le cas de figure des événements pour la barre input[type=range], et j'avais quelques bugs pour l’interaction avec la barre. Donc le code définitif est celui-ci :
progressBar.addEventListener('input', e => {
  media.currentTime = (progressBar.value / progressBar.max) * media.duration
  currentTime(media, output, progressBar)
})

Et là c'est parfais. Maintenant mon player est au minimum équivalent aux fonctionnalités des players par défaut des navigateurs, avec déjà des fonctions supplémentaires. Et bien sûr entièrement personnalisable pour ce qui est des styles.

Et au final, range était le bon choix : plus de calcul de la position du clic par rapport à la position gauche de la page, rapporté au rectangle de l'élément. Non désormais on se fie simplement à la valeur du range.
Modifié par Olivier C (24 Apr 2023 - 21:26)
Meilleure solution
Bongota a écrit :
Beaucoup de personnes vont sur les sites avec une écoute positionnée au maximum sur leur ordinateur. Mettre le lecteur automatiquement en-dessous du niveau maximum est une précaution. Libre au visiteur de le remonter ensuite, toujours à la souris.

Au fait tu avais raison pour les volumes, MDN préconise même à "0.5". Je verrais ça tantôt.
Prévenir un modérateur
Répondre au sujet
Aller à