const buttons = document.querySelectorAll('.play-pause-btn');

buttons.forEach(button => {
    const audio = document.getElementById(button.dataset.audio);

    button.addEventListener('click', () => {
        if (audio.paused) {
            // Pause all other audio files
            document.querySelectorAll('audio').forEach(a => {
                a.pause();
                a.currentTime = 0; // Reset other audio files
            });
            document.querySelectorAll('.play-pause-btn').forEach(btn => {
                btn.textContent = '▶';

            });

            // Play the clicked audio
            audio.play();
            button.textContent = '⏸︎';

        } else {
            audio.pause();
            button.textContent = '▶';
        }
    });

    // Reset button icon when audio ends
    audio.addEventListener('ended', () => {
        button.textContent = '▶';
    });
});

<div class="player-container">
	<button class="play-pause-btn" data-audio="audio1">▶️</button>
	<audio id="audio1" src="audio1.mp3"></audio>
</div>

<div class="player-container">
	<button class="play-pause-btn" data-audio="audio2">▶️</button>
	<audio id="audio2" src="audio2.mp3"></audio>
</div>

.player-container {
    display: inline;
    vertical-align: text-bottom;
    align-items: center;
    margin-bottom: 20px;
}
.play-pause-btn {
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}