8199 sujets

Développement web côté serveur, CMS

Bonjour,
je voudrais savoir s'il est possible, très certainement en JavaScript, d'annuler automatiquement une balise audio htlml5 quand on en active une autre. J'en ai en effet implanté plusieurs sur un site en construction, éloignées les unes des autres. Il se peut qu'une personne ait activé une balise et, plus loin sur la page, décide d'activer l'écoute de l'autre, sans remonter sur la première pour l'annuler. C'est en effet très désagréable, les deux sons se mélangent.
Bien à vous.
J'avance,
j'ai trouvé : http://www.storiesinflight.com/html5/audio.html
Un lecteur audio multiple dont l'activation de chaque lecteur arrête le précédent. En répartissant les balises audio sur la page, je peux arrêter la musique qui précède et jouer l'autre, où que je soit. En mettant : document.getElementById(s).duration*0; à zéro au lieu de 100 initial, ça fonctionne.
Il me reste maintenant à intégrer les controls audio pour pouvoir arrêter la musique. Ce n'est pas le cas pour le moment, chaque lecteur est sous la forme d'un lien html.
L'aide pour réaliser ça n'est pas pour autant abandonnée. Y compris une solution plus simple.
Regarde http://zeffiro.free.fr/ et clique sur bouton "Enregistrements"
Il n'y a qu'une seule balise audio qui se déplace en fonction des besoins
Le bouton d'arrêt rouge n'est sans doute pas indispensable, j'ai fait ça pour aller vite, il y avait une personne qui ne parvenait pas à arrêter l'audio en cliquant sur le fond de page, comme je l'avais prévu au départ.
J'ai fait dans le temps d'autres pages avec plusieurs <audio>, mais c'est plus facile d'arrêter le son et le relancer sur autre chose quand on a une seule balise.
Le code est visible par les outils de développement. Demande moi si tu as besoin d'explications.
Salut,
pas mal. Et on peut utiliser d'autres icônes que le petit haut parleur, malgré le fait qu'il soit très parleur Smiley cligne La balise audio n'est pas présente au départ. Là où elle va ne me plaît pas trop, mais avec du css, on peut la faire aller où on veut.
Le JavaScript est conséquent mais en tous cas, je retiens cette version. C'est ce que je cherche, les morceaux de musique sont répartis sur les pages du site et il n'est pas question que je mette un lecteur global, parce que la partition de chaque morceau est aussi présente dans un slider. Je veux que le visiteur ait tout sous la main.

Merci.
Le haut parleur est une image, tu mets ce que tu veux
De même pour le positionnement de <audio>. Si je me souviens bien de ce que j’ai fait le JS le change <audio> de conteneur. En changeant le CSS la position par rapport au conteneur est ce que tu désires. En JS tu peux mettre un autre conteneur.
Bonjour Bongota et PapyJp.

Certes, la proposition de PapyJp fonctionne.

Cependant une autre approche est possible, qui pourrait également fonctionner. Or, j'ai l'heur d'espérer que ma proposition soit infiniment plus courte, facile, lisible et façonnable à souhait.

La voici au détail : celle-ci bénéficie tout d'abord d'élaborer une méthode javascript de solliciter des liens .html sous la forme la plus commune <a href="music-1.mp3">Music 1</a> et de les interpréter ensuite par javascript. Puis, de disposer du .css pour sa faculté de connaître un lien créé, survolé, visité et de le marquer. Et bien sur, de lire à la suite autant d'audio (voire de vidéo) que le rédacteur de la page le souhaitera. En neutralisant la précédente : c'en est bien le sujet.

Commençons par le .css en stylant la balise audio :
audio{scale:.6;opacity:.7}/*Au choix nativement limité*/
audio:hover{opacity:1}

Puis, identifions en .css le conteneur du lecteur unique (très utile, cependant pour la "forme" !) :
#audio_player{display:block;position:relative;text-align:left}/*Au choix*/

Ensuite, toujours par .css caractérisons les liens d'appel aux différentes musiques qui seront lues successivement dans ce lecteur audio unique :
#audio_player a:link{/*Un style au choix*/}
#audio_player a:hover{/*Un autre style au choix*/}
#audio_player a:visited{/*Un autre style au choix*/}

Puis, le .html dans le body :
<div id="audio_player">
<audio id="muse" controls>
<source src="music1.mp3" /><!-- Il est opportun d'en proposer un premier à lire ! Non ? -->
</audio>
</div>
pour l'ouverture de la page.

Et, aménagé, le .html : dans le même id="audio_player" qui propose désormais une liste de multiples musiques à écouter :
<div id="audio_player">
<audio id="muse" controls>
<source src="music1.mp3" />
</audio>
<a href="music1.mp3">Titre 1 - Durée - Auteur - Interprètes - Année</a><br>
<a href="music2.mp3">Titre 2 - Durée - Auteur - Interprètes - Année</a><br>
<a href="music3.mp3">Titre 3 - Durée - Auteur - Interprètes - Année</a><br>
<a href="music4.mp3">Titre 4 - Durée - Auteur - Interprètes - Année</a><br>
<!-- Autant que vous voulez ! -->
</div>


Enfin, voici le javascript qui exécute chacun des liens dans le même lecteur unique et qui, ainsi neutralise la musique précédente (!) en lançant la nouvelle. Et je considère ce script comme étant minimaliste et façonnable à souhait ...

Il n'y a rien à modifier ici dès lors que vous aurez rédigé le juste .html
<div id="audio_player">....</div>
qui intègre son bon <audio id="muse">...</audio> :
//3 variables déclarées à la suite
var muse = document.getElementById('muse'),
audio_player = document.getElementById('audio_player'),
links = audio_player.getElementsByTagName('a');

//Une boucle opportune sur tous les liens du conteneur qui au click ...
for (var i=0; i<links.length; i++) {
	links[i].addEventListener('click', Ecouter);
}

//Voici la fonction déterminante de lecture à la suite, remplaçante :
	function Ecouter(e)
{
e.preventDefault();
audiocible = this.getAttribute('href');
filename = audiocible.substr(0, audiocible.lastIndexOf('.')) || audiocible;
audio = document.querySelector('#audio_player audio');

source = document.querySelectorAll('#audio_player audio source');
source[0].src = filename + ".mp3";
source[1].src = filename + ".ogg";	//Selon le cas où le nav-web ne lisait pas le .mp3 (?) Mais on peut inverser la préférence, évidemment. À cette seule condition que vous ayez les variantes de format en bibliothèque au même répertoire (en éventuelle impossibilité) ...
setTimeout(function(){muse.play()},100);	//Offrons une douce latence à la lecture d'une source modifiée, à l'exécution du script par click sur les liens ...
}

À +
Modifié par Arrival (30 Jun 2020 - 18:45)
Ouah,
je vais dormir et voir ça demain. en tous cas, du travail.
À la suite de cette expérience, je suis de plus en plus décidé à abandonner le lecteur audio html5 au profits de liens que je pourrai rendre plus beaux. Ça tombe bien.
Je suppose que quand on choisis une musique, l'autre s'arrête automatiquement. C'est la raison d'être unique de mes recherches.
A demain.
Bongota,
c'est en effet la raison unique de ma proposition. Et chez moi cela fonctionne très bien pour des vidéos : sentrais.eu/timelapse/timelapse.htm dont l'usage est même plus sophistiqué.

Bonne nuit !

@niuxe : la saisie d'un lien préalablement surligné à la rédaction ne fonctionne toujours pas spontanément par l'option lien. Un bug .php ?
Modifié par Arrival (30 Jun 2020 - 00:36)
Bonjour,
je vais tester ta solution. En attendant, j'en ai adopté une "à l'arrache" et rapide à mettre en place. Voici les deux lignes html qui font jouer la musique, à travers JavaScript :
<audio id="multiaudio1" src="Musique/mon_fichier.mp3" preload="auto"></audio>
<a href="javascript:play_multi_sound('multiaudio1');">Mon fichier</a><br />

J'ai tout simplement modifié et ajouté deux autres lignes :
<audio id="multiaudio6" src="" preload="auto"></audio>
<a href="javascript:play_multi_sound('multiaudio6');">Pause</a>

Je prends un channel non utilisé, je le vide de son mp3 et c'est tout. J'ai essayé dans tous les sens, le "Pause" arrête n'importe quelle musique. Le seul inconvénient, de taille, quand on appuie de nouveau, le morceau repart au début. Peut-être que d'ici ce soir, j'aurai trouvé la solution. Il me restera juste à décider quel pictogramme je mets sur les liens, ce qui est un problème secondaire. Ah oui, certains vont dire que ce n'est pas élégant comme façon de faire. Je suis d'accord, mais en attendant mieux et aussi simple...
Je tiens à m'affranchir de ce vilain lecteur audio html5, sans encombrer la page de ces lecteurs sophistiqués qu'on voit parfois. Le visiteur du site ne sera pas là pour faire le DJ, mais pour écouter un morceau.
Modifié par Bongota (30 Jun 2020 - 09:41)
Je comprends volontiers que l'esthétique des lecteurs audio et video nativement embarqués dans les nav Edge Chrome FireFox ne soient pas plaisants.

Or, au-delà de leur faculté de lire parfaitement un fichier son, son-et-image ! c'est également de proposer des indications visuelles précieuses à l'utilisateur : un bouton play/pause, la durée globale, la durée écoulée, le volume du son, et un curseur de progression dynamique sur lequel le visiteur peut agir.

On peut s'en passer, certes. En réinventant la poudre ...

Commençons par un bouton play/pause qui agira sur la lecture du lecteur unique. Son .css :
#playpause
{display:inline-block;
position:relative;
width:24px;
height:24px;
background:#bcc2b8;
cursor:pointer;
border-radius:15px;
border:3px solid transparent;}

#playpause:hover
{border:3px solid #555;}
Son écriture dans le body après avoir re-stylé le lecteur muse :
<div id="playpause"></div><br>

<div id="audio_player">
<audio id="muse" style="display:none"><!-- Le lecteur demeure actif mais disparaît de l'écran -->
<source src="music1.mp3" />
</audio>
<a href="music1.mp3">Titre 1</a><br>
<a href="music2.mp3">Titre 2</a><br>
<a href="music3.mp3">Titre 3</a><br>
<!-- ... -->
</div>
Ensuite, une larme de javascript :
//Créer 2 variables
var muse=document.getElementById('muse'), //Le lecteur unique de mon exemple précédent
pp=document.getElementById('playpause'); //Le bouton playpause

	function playpause() //La fonction qui active ou interrompt la lecture
{
if(muse.paused)
	{
muse.play();
pp.style.background='#438566'; //C'est opportun de modifier la couleur ...
	}
else
	{
muse.pause();
pp.style.background='#854366'; //C'est opportun de modifier la couleur ...
	}
}

muse.onended=function(){pp.style.background='#bcc2b8';} //C'est opportun de modifier la couleur lorsque que la lecture est arrivée à son terme

pp.onmousedown=playpause; //De façon alternative, on active ou on interrompt la lecture du lecteur unique
Plus loin, on pourra récupérer et afficher auprès du bouton playpause le temps de lecture écoulée, et la durée totale de chaque fichier sélectionné ...
Modifié par Arrival (30 Jun 2020 - 18:44)