JS - odtwarzanie mp3 jeden po drugim

Question

Cześć,

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

 

Dzięki :)

Answer 1

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'
  }
});

 

Comments

a jeszcze jakaś rada jak to przerobić na Vue.js?

---

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ł. 

---

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 

Answer 2

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.