cześć.

Na mojej stronie wstawiłem sobie kod na odtwarzanie więcej jak jednego pliku. Ważne było, aby podczas przełączenia dźwięki nie nachodziły na siebie i tojest super.

Ale chciałem zrobić też tak, aby ten sam przycisk robił play i pause i zmieniał odpowiednio nazwę. Tzn. jak audio gra to przycisk zmieni napis z play na pause i na odwrót.
Wstawiłem

[HTML] pobierz, plaintext 
pause[button].addEventListener('click', () => {
    main_player.pause()
    pause[button].innerHTML = "play";
})
[HTML] pobierz, plaintext 

po "main_player.play()
})"
ale po kliknięciu na play muszę jeszcze kliknąć na play w odtwarzaczu. I button w ogóle nie zmienia nazwy na play i nie pauzuje.

Z kolei jak dodam tylko

[HTML] pobierz, plaintext 
pause[button].addEventListener('click', () => {
    main_player.pause()
[HTML] pobierz, plaintext 

to owszem, musze ponownie kliknac play w odtwarzaczu ale pauza działa.

Niżej cały kod bez funkcji pause() ze zmianą nazwy na pause:

[HTML] pobierz, plaintext 
<audio src="/demo/03. Adel Tawil - Tu m'appelles (feat. PEACHY).mp3" type="audio/mp3" class='audios'></audio>
  <button class='fas fa-play'>play</button>
 
<audio src="/demo/03. 24kGoldn - Mood (feat. iann dior).mp3" type="audio/mp3" class='audios'></audio>
  <button class='fas fa-play'>play</button>
<hr />
 
<audio class='main-audio' controls>
     <source src="#" type="audio/mp3">
  </audio>
 
 
<script>
const audios_with_src = document.querySelectorAll('.audios')
const play = document.querySelectorAll('.fa-play')
const pause = document.querySelectorAll('.fa-play')
const main_player = document.querySelector('.main-audio')
 
for(let button =0; button < audios_with_src.length; button++) {
 play[button].addEventListener('click', (e) => {
    main_player.src = audios_with_src[button].src;
    play[button].innerHTML = "pause";
    main_player.play()   
    })
 
 
 
}
 
</script>
[HTML] pobierz, plaintext 

Ja jakiś czas temu robiłem takie audio


Podejrzyj ko źródłowy i może u siebie coś dopasujesz

Kliknij w tytuł- otworzy ci się audio

Audio na stronie - własne przyciski sterujace

znalazłem.

wystarczyło dodać

[HTML] pobierz, plaintext 
main_player.onended = (event) => {
            myIcon.innerHTML = "Play";
};
main_player.onpause = (event) => {
            myIcon.innerHTML = "Play";
};
 
 document.addEventListener('play', function(e){
    if(main_player && main_player != e.target){
        main_player.pause();
	main_player.currentTime = 0;
 
    }
    main_player = e.target;
}, true);
 
[HTML] pobierz, plaintext 

i śmiga