Bonjour, tout en reprenant mon code auquel vous faites référence, vous pouvez créer un conteneur via une balise <div> pour chaque bloc audio, puis utiliser une boucle for pour parcourir les différents blocs audio et ainsi mettre en pause ou en lecture :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment créer plusieurs boutons audio sur une même page HTML ?</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
<style>
audio {
display: none;
}
</style>
</head>
<body>
<div class="bloc">
<audio src="https://www.1formatik.fr/conan/volcan.mp3"></audio>
<button onclick="Action(this);">
<i class="fas fa-volume-up fa-2x"></i>
</button>
</div>
<div class="bloc">
<audio src="https://www.1formatik.fr/conan/sw.mp3"></audio>
<button onclick="Action(this);">
<i class="fas fa-volume-up fa-2x"></i>
</button>
</div>
<div class="bloc">
<audio src="https://www.1formatik.fr/conan/pirates.mp3"></audio>
<button onclick="Action(this);">
<i class="fas fa-volume-up fa-2x"></i>
</button>
</div>
<script>
var blocs = document.getElementsByClassName("bloc");
function Action(e)
{
for(var i = 0; i < blocs.length; i++)
{
if (blocs[i].contains(e) == false)
{
const contenus = blocs[i].children;
const audio = contenus[0];
const bouton = contenus[1];
const icone = bouton.firstElementChild;
if (audio.played)
{
audio.pause();
icone.classList.remove('fa-volume-mute');
icone.classList.add('fa-volume-up');
}
}
}
if (e.previousElementSibling.paused)
{
e.previousElementSibling.currentTime = 0;
e.previousElementSibling.play();
e.firstElementChild.classList.remove('fa-volume-up');
e.firstElementChild.classList.add('fa-volume-mute');
}
else
{
e.previousElementSibling.pause();
e.firstElementChild.classList.remove('fa-volume-mute');
e.firstElementChild.classList.add('fa-volume-up');
}
}
</script>
</body>
</html>
Remarque : Pour qu'une musique ne redémarre pas au début lorsque l'utilisateur la met en pause et la relance, supprimez la ligne :
e.previousElementSibling.currentTime = 0;
