Vue.js odtwarzanie dźwięków z tablicy jako playlista

Cześć, zna ktoś może bibliotekę lub przykład kodu dla Vue.js do odtwarzania plików po kolei?
Mam tablicę w której są linki do plików mp3 na serwerze. Chciałbym je odtworzyć jeden po drugim po kliknięciu przycisku.
Szukałem już sporo ale nie mogę znaleźć nic prostego, może Wy spotkaliście się już z czymś takim :)

Nie czekaj na gotowca, pokaż co już próbowałeś, z czym masz problem itp ;) Nikt tego nie napisze za ciebie.

Ogólnie sprawa jest dość prosta. Tutaj więcej czystego JS niż Vue.
Robisz element <audio> do którego w :src podpinasz pierwszy element (utwór) tej tablicy.
Nasłuchujesz event ended w którym to zmieniasz utwór na kolejny z tablicy, tak więc po zakończeniu jednego utworu włączy się kolejny. To tyle. Rozbudowujesz sobie to jak tam potrzebujesz np. o przyciski.

Da się to jeszcze bardziej wyrafinowanie zrobić np. z efektem fade (płynne przejście między utworami). W takim wypadku potrzebujesz dwóch elementów audio w którym ładujesz utwory naprzemiennie. W evencie timeupdate sprawdzasz czy utwór jest bliski końca i jeśli tak to wyciszasz i uruchamiasz kolejny w drugim audio.

Wszystko da się zrobić, zamiast szukać gotowych komponentów i źródeł lepiej sięgać bezpośrednio do źródła więc dokumentacji HTML i JS, i dopiero wtedy rozkminiać jak sobie ułatwić to dzięki Vue czy innemu frameworkowi ;)

Lista eventów np. tutaj https://www.w3schools.com/tags/ref_av_dom.asp

Samego Audio nie musisz robić w DOM (umieszczać w HTML) tylko możesz też użyć bezpośrednio konstruktora z JS. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

Jak chcesz sobie ułatwić to Howler jest świetną biblioteką audio.

udało mi się coś takiego zrobić jednak takie coś działa tylko dla dwóch utworów, dla trzeciego już nie. Na razie nie chcę płynnego przechodzenia, nawet lepiej jeśli po każdym będzie chwila przerwy.

openAll() {
      let playlist = [];
      const currentIndex = 0;
      const audio = new Audio(playlist[currentIndex]);
      audio.addEventListener('ended', function () {
          const nextSrc = playlist[currentIndex + 1];
          const audio = new Audio(nextSrc);
          audio.play();
      });
      audio.play();
    },

Tak na oko to wystarczy zamienić:

const audio = new Audio(nextSrc);

na:

audio.src = nextSrc;

openAll() {
      let playlist = [];

      const currentIndex = 0;
      let audio = new Audio(playlist[currentIndex]);
      audio.addEventListener('ended', function () {
          audio.src = playlist[currentIndex + 1];
          audio.play();
      });
      audio.play();
    },

wtedy utwór drugi na liście wpada w pętle i się odtwarza w nieskończoność

ssquad napisał(a):

> openAll() {
>       let playlist = [];
> 
>       const currentIndex = 0;
>       let audio = new Audio(playlist[currentIndex]);
>       audio.addEventListener('ended', function () {
>           audio.src = playlist[currentIndex + 1];
>           audio.play();
>       });
>       audio.play();
>     },
> ```
> 
> wtedy utwór drugi na liście wpada w pętle i się odtwarza w nieskończoność

Zrób sobie `console.log(currentIndex);` to zobaczysz czemu.

Działający przykład

openAll() {
      const playlist = [];

      let currentIndex = 0;
      let audio = new Audio(playlist[currentIndex]);
      audio.addEventListener('ended', function () {
          currentIndex = currentIndex + 1;
          audio.src = playlist[currentIndex];
          audio.play();
      });
      audio.play();
    },

ssquad napisał(a):

Działający przykład

openAll() {
      const playlist = [];

      let currentIndex = 0;
      let audio = new Audio(playlist[currentIndex]);
      audio.addEventListener('ended', function () {
          currentIndex = currentIndex + 1;
          audio.src = playlist[currentIndex];
          audio.play();
      });
      audio.play();
    },

Jeszcze musisz obsłużyć co się ma stać kiedy ostatni utwór dobiegnie końca.