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)
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.