• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JS - odtwarzanie mp3 jeden po drugim

VPS Starter Arubacloud
+2 głosów
250 wizyt
pytanie zadane 5 października 2021 w JavaScript przez mikey Użytkownik (820 p.)
Cześć,

mam tablicę z linkami każdy mp3, jak odtworzyć je jeden po drugim po kliknięciu przycisku?

 

Dzięki :)

2 odpowiedzi

0 głosów
odpowiedź 5 października 2021 przez qax Dyskutant (8,060 p.)

Na przykład tak:

<audio id="audio-element"></audio>
<button type="button" id="button-element">Graj</button>
<br />
<span id="span-element"></span>
var audioElement = document.getElementById('audio-element');
var buttonElement = document.getElementById('button-element');
var spanElement = document.getElementById('span-element');
var id = 0;
var tablica = ['https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3', 'https://filesamples.com/samples/audio/mp3/sample3.mp3', 'https://filesamples.com/samples/audio/mp3/sample1.mp3']

buttonElement.addEventListener('click', function() {
	spanElement.innerText = 'Odtwarzanie pliku nr ' + (id + 1) + ' o URL ' + tablica[0];
	audioElement.src = tablica[0];
  audioElement.play();
});

audioElement.addEventListener('ended', function() {
	if(id < tablica.length - 1) {
    id++;
    spanElement.innerText = 'Odtwarzanie pliku nr ' + (id + 1) + ' o URL ' + tablica[id];
    audioElement.src = tablica[id];
    audioElement.play();
  } else {
  	spanElement.innerText = 'Ukończono odtarzanie plików'
  }
});

 

komentarz 5 października 2021 przez mikey Użytkownik (820 p.)
a jeszcze jakaś rada jak to przerobić na Vue.js?
1
komentarz 6 października 2021 przez qax Dyskutant (8,060 p.)

Nie znam się jak narazie na Vue.js i nie wiem czy kiedykolwiek w przyszłości będę go używał. Aktualnie uczę się Reacta, bo to jest wiodąca biblioteka JS, więc w nim bardziej coś bym Ci pomógł. smiley

1
komentarz 6 października 2021 przez qax Dyskutant (8,060 p.)

A tak przy okazji zapraszam na mój blog: http://www.wlasocha.pl/portfolio/audio-web-player - wczoraj wydałem drugą poprawioną wersję odtwarzacza mp3 wink

0 głosów
odpowiedź 5 października 2021 przez VBService Ekspert (255,500 p.)
edycja 5 października 2021 przez VBService

Chodzi o zdarzenie ended elementu audio ( <audio> )

ended (Web Audio Event)

 

The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.

 

Przykład

<button id="button-play" class="button-play" disabled><span>‣</span></button>
.button-play span {
  display: block;
  transform: scale(2.5);
}
const play_list = [
  { 'name':'Radio Tune',       'url':'Radio%20Tune-SoundBible.com-1525681700.mp3' },
  { 'name':'Car Alarm',        'url':'Car%20Alarm-SoundBible.com-2096911689.mp3' },
  { 'name':'Train',            'url':'Train_Approach_n_Pass-Mike_Koenig-678807208.mp3' },
  { 'name':'Helicopter Pass',  'url':'Best_Helicopter_Pass-Mike_Koenig-1156203370.mp3' },
  { 'name':'Energyless robot', 'url':'Dying%20Robot-SoundBible.com-1721415199.mp3' }
];

const button_play  = document.querySelector('#button-play'),
      audio_player = new Audio(),
      WEB_URL = 'https://soundbible.com/mp3/';

button_play.addEventListener('click', startPlay);
window.addEventListener('DOMContentLoaded', initializeAudio);

function initializeAudio() {
  audio_player.onended = startPlay; // <-- TU
  audio_player.setAttribute('data-index-form-playlist', -1);
  button_play.removeAttribute('disabled');
}

function startPlay() {
  const song_index = indexFromPlaylist();

  audio_player.src = WEB_URL + play_list[song_index].url;
  audio_player.play();

  console.clear();
  console.log('Odtwarzam: ' + play_list[song_index].name); 
}

function indexFromPlaylist() {
  let index = parseInt(audio_player.getAttribute('data-index-form-playlist')) + 1;
  if (index >= play_list.length) index = 0;
  
  audio_player.setAttribute('data-index-form-playlist', index);

  return index;
}

 

 

 jak to przerobić na Vue.js?

nie pracowałem (i nie pracuję) z vue, więc ciężko Mi coś doradzić, ale może "wygeneruj" za jego pomocą button-a, a resztę kodu do odtwarzania muzyki "podepnij" jak zwykły js.

Podobne pytania

+1 głos
1 odpowiedź 159 wizyt
pytanie zadane 16 listopada 2022 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)
0 głosów
2 odpowiedzi 424 wizyt
pytanie zadane 17 grudnia 2018 w JavaScript przez wachcio Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 145 wizyt
pytanie zadane 9 lipca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)

92,851 zapytań

141,792 odpowiedzi

320,882 komentarzy

62,183 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...