[JavaScript][HTML]Play/Pause Audio - problem, problem po kliknięciu play i brak zmiany nazwy button na play Opcje

[ReBeLs513]

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 

Ten post edytował ReBeLs513 30.01.2022, 20:25:33