• 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

+2 głosów
112 wizyt
pytanie zadane 5 października 2021 w JavaScript przez mikey Użytkownik (800 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,040 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 (800 p.)
a jeszcze jakaś rada jak to przerobić na Vue.js?
1
komentarz 6 października 2021 przez qax Dyskutant (8,040 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,040 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 Mędrzec (164,890 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

0 głosów
2 odpowiedzi 229 wizyt
pytanie zadane 17 grudnia 2018 w JavaScript przez wachcio Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 102 wizyt
pytanie zadane 9 lipca 2018 w JavaScript przez mi-20 Stary wyjadacz (12,840 p.)
0 głosów
1 odpowiedź 123 wizyt
pytanie zadane 25 czerwca 2018 w JavaScript przez mi-20 Stary wyjadacz (12,840 p.)

88,037 zapytań

136,615 odpowiedzi

304,705 komentarzy

58,392 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...