Po podmianie ścieżki pliku audio, plik audio jest odtwarzany ze starej ścieżki

Question

Funkcja tworząca obiekt audio i odtwarzająca dźwięk, zmienna audio jest globalna ustawiona na null

let audio = null; // deklarujemy zmienną, w której będziemy przechowywać obiekt Audio

function playSoundOnce(path) {
  //audio = document.getElementById("myAudio"); // pobranie starym obiektu audio
  //audio.pause(); // zatrzymanie odtwarzania
  //audio.src = path;   
  // funkcja przyjmuje ścieżkę do dźwięku jako argument
  // audio = document.getElementById("myAudio"); 
  if (audio !== null) { // sprawdzamy, czy dźwięk jest już odtwarzany
    audio.pause(); // jeśli tak, przerywamy odtwarzanie
    audio.currentTime = 0; // ustawiamy czas odtwarzania na początek
  }

  audio = new Audio(path); // tworzymy nowy obiekt Audio z podaną ścieżką
  audio.src = path;
  audio.load();
  audio.play(); // odtwarzamy dźwięk
  audio.remove();
}

W pliku html ścieżki są zamieniane według następującego przykładu, jednak dźwięk jest odtwarzany tylko z pierwszej ścieżki, po odświeżeniu strony wszystko wraca do normy, problem w tym, że chciałbym bez odświeżania strony odtwarzać dźwięk z drugiej ścieżki

<div class="word1 wrong" data-audio-path="files/words/mp3/burn.mp3">
<div class="word1 checked" data-audio-path="files/words/mp3/tie.mp3">

<!-- Jeśli kliknie się klasę word2 -->
<div class="word2 wrong" data-audio-path="files/words/mp3/cat.mp3">
<div class="word2 wrong" data-audio-path="files/words/mp3/dog.mp3">

<!-- Jest analogicznie odtwarza się tylko pierwsza ścieżka -->

Tutaj jeszcze element kodu, myślę nieznaczący w tym wypadku, ale daje dla lepszego podglądu sytuacji

 for (let i = 0; i < 6; i++) {
                      let audioPath = data[i];
                      $('.word'+i).each(function() {
                         $('.word').removeAttr('data-audio-path');
                          $(this).attr('data-audio-path', audioPath);
                      });
                      $('.word'+i).click(function() {
                        let audioPath = $(this).data('audio-path');
                        playSoundOnce(audioPath);
                      });
                    }

 

Myślę, że przyczyną problemu jest to, że element audio zostaje w pamięci przeglądarki, próbowałem dawać audio = null; audio.remove(); nie skutkowało, w jaki sposób można usunąć stary obiekt audio, abym mógł odtworzyć dźwięk z nowej ścieżki pliku, która została dodana bez odświeżania strony?

Comments

Gdzie deklarowana jest zmienna i, której używasz do pobrania audioPath oraz do tworzenia selektora klasy przy konkatenacji '.word' + i?

---

@Don Matteo, Deklarowana jest w pętli for, której tutaj nie dawałem, to z niej pochodzą ścieżki, które są umieszczane w tagach HTML, to po prostu zmienna PATH. To literacja po wierszach tabeli mysql, gdzie są przechowywane ścieżki

---

W pętli for w JavaScript-cie? Pokaż nagłówek tej pętli.

---

 for (let i = 0; i < 6; i++)

Wielkie dzięki za pomoc, problem nie był w pętli for, spojrzałem teraz na ten kod jeszcze raz świeższym okiem, zamiast audio-path powinno być data-audio-path

---

zamista audio-path  powinno być data-audio-path

Hmm, jesteś pewien? Bo jQuery-owa metoda .data() przy odczycie sama dokleja "data-" do nazwy atrybutu. Więc wywołanie .data( 'audio-path' ) powinno zwrócić wartość atrybutu o nazwie "data-audio-path".

---

$('.word'+i).each(function() {
  $('.word').removeAttr('data-audio-path');
  $(this).attr('data-audio-path', audioPath);
});
$('.word'+i).click(function() {
  let audioPath = $(this).data('audio-path');
  playSoundOnce(audioPath);
});

Czy zamiast selektora '.word' (wewnątrz .each()) nie powinieneś użyć this?

Wykonsoluj audioPath wewnątrz .click() i upewnij się, że ścieżka jest prawidłowa (wskazuje na nowy plik zamiast starego).

---

// let audioPath = $(this).data('audio-path');

Zrobiłem tak i działa prawidłowo, ta linia nie jest potrzebna, powoduje ona błąd, this słuszna uwaga, powinno się tam znaleźć, let audio-path po konsolowaniu to po prostu audio-path

Teraz kod działa także się cieszę :)

Answer 1

Proponuję zastosować Event Delegation co IMHO upraszcza znacząco kod.

Przykład on-line: [ 1 ]  [ 2 ].

<div class="audio-container">
  <div class="word1 wrong" data-audio-path="burn.mp3"></div>
  ...
</div>

const URL = 'files/words/mp3/';
const audio = new Audio();

const words = document.querySelector('.audio-container-demo');
words.addEventListener('click', playSoundOnce);

function playSoundOnce(e) {
  const word = e.target;
  if (word.matches('[data-audio-path]')) {
    audio.pause();
    if (word.dataset.audioPath.trim() !== '') {    
      audio.src = URL + word.dataset.audioPath;
      audio.play();
    }
  }
}