• 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

Object Storage Arubacloud
+2 głosów
244 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 (254,880 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ź 156 wizyt
pytanie zadane 16 listopada 2022 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)
0 głosów
2 odpowiedzi 411 wizyt
pytanie zadane 17 grudnia 2018 w JavaScript przez wachcio Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 142 wizyt
pytanie zadane 9 lipca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)

92,762 zapytań

141,686 odpowiedzi

320,499 komentarzy

62,106 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...